/  Technology   /  Difference between HTML and React event handling
Difference between HTML and React event handling

Difference between HTML and React event handling

 

In terms of syntax and standards, HTML(Hypertext Markup Language) and React handle events differently because React is built on the notion of a virtual DOM( Document Object Model ), whereas HTML(Hypertext Markup Language)  always has access to the Real DOM.

The following are the important distinctions we will discuss:

  • In HTML(Hypertext Markup Language), event names are written in lowercase, however in React, and they are written in camelCase.
  • In HTML(Hypertext Markup Language), we are may avoid default behavior by returning false, and but in React, we must call preventDefault() explicitly.
  • In HTML(Hypertext Markup Language), the function is called by adding “()” to the function name. If we do not want to utilize this way, and we can use addEventLisener method to provide events and listeners, however in React, we require the method name without the “()” appended.
1. In HTML(Hypertext Markup Language), event names are written in lowercase.

Let us take a sample example where we can use 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(Hypertext Markup Language), we are may avoid default behavior by returning the false, and but in React, we must call preventDefault() explicitly

Let’s begin by making a simple submitting form and giving the input text a name. After submitting the form, and we must call the ‘onsubmit’ event, and the form is  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(Hypertext Markup Language), the function is called by adding”()” to the function name. If we do not want to utilize this way, we can use addEventLisener method to provide events and listeners, however in React, and we require the method name without the “()” appended

HTML Example

<button onclick='activateLasers()'>

React Example

<button onClick={activateLasers}>

 

Leave a comment