Difference between HTML and React event handling

In terms of syntax and standards, HTML and React handle events differently because React is built on the notion of a virtual DOM, whereas HTML always has access to the Real DOM.

The following are the significant distinctions we will discuss:

• In HTML, event names are written in lowercase, however in React, they are written in camelCase.

• In HTML, we may avoid default behavior by returning false, but in React, we must call preventDefault() explicitly

• In HTML, the function is called by inserting "()" to the function name. If we don't want to utilize this way, we may use addEventLisener to provide events and listeners, however in React, we require the method name without the "()" appended.

1) In HTML, event names are written in lowercase,

Let us take a example where we would like to invoke click event on the button:

<button onclick='handleEvent()'>


however in React, they are written in camelCase.

<button onClick={handleEvent}>


2) In HTML, we may avoid default behavior by returning false, but in React, we must call preventDefault() explicitly

Let's start by making a simple form and giving the input text a name. After submitting the form, we must call the 'onsubmit' event, and the form must not be refreshed.

HTML Example

<form onsubmit="console.log('You clicked submit.'); return false">
   <input  type="text" name="name" />
   <button type="submit">Submit</button>
</form>

React Example

function Form() {
  function handleSubmit(e) {
    e.preventDefault();
    console.log('You clicked submit.');
  }
 return (
   <form onsubmit="{handleSubmit}">
    <input  type="text" name="name" />
    <button type="submit">Submit</button>
   </form>
  );
}

3) In HTML, the function is called by inserting "()" to the function name. If we don't want to utilize this way, we may use addEventLisener to provide events and listeners, however in React, we require the method name without the "()" appended

HTML Example

 <button onclick='activateLasers()'>

React Example

<button onClick={activateLasers}>