Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Difference between HTML and React Event Handling

  • Last Updated : 30 Jun, 2021

Event handling in HTML and React are different from one another in terms of syntax and some rules. The reason behind this is that React works on the concept of virtual DOM, on the other hand, the HTML has access to the Real DOM all the time. We are going to see how we can add the events in HTML and how React differs in event handling.

In HTML, we are directly writing the code for the Real DOM so in order to Real DOM to let know that we are referring to the javascript function or method we need to specify ” ( ) ” at the end of the string. If we do not want to go with this approach, there is one more approach using javascript. We need to use the addEventLisener to specify events and listener.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Both method works fine, we have made one onclick using the first method and one using addEventlistener which both greet the user whenever the user clicks on that. As you can see the first button is not having any id, we are specifying the event using the first method which is “onclick”. It is clearly visible that we have provided “greet( )” as a string and also provided the parenthesis at the end (see the first script tag). The second method is using addEventListener, we have specified the event “Click” and given a callback, we can also give the method name. See this article.

Example:

index.htm






<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
  
    <style>
        .btn {
            padding: 20px;
            background-color: blueviolet;
            color: white;
            font-size: 20px;
        }
    </style>
    <!-- script for onclick method -->
    <script>
        var greet = function () {
            window.alert("hello onclick event sent me");
        };
    </script>
</head>
  
<body>
    <button class="btn" onclick="greet()">
        Greet me using "onclick"
    </button>
  
    <button id="b1" class="btn">
        Greet me using addEventListener
    </button>
  
    <!-- Script for addevnetListner -->
    <script>
        var button = document.getElementById("b1");
        button.addEventListener("click", () =>
            window.alert("hello addevnetlistner sent me")
        );
    </script>
</body>
  
</html>

Output:

HTML event listening

 

In React. we use the concept of virtual DOM, so all the events need to specify at the time of creating the component. Here in App.js file, we have defined one component App, which is having a button. We have used “onClick” event and we are providing a method name instead of a string. As in JSX, we specify javascript in “{ }” that is why the method name is in the { }.

You can create React app using the following command:

npx create-react-app nameoftheapp

react file directory

Example:

App.js




import React from 'react'
  
export default function App() {
  const greet = () => {
    window.alert("onClick in React sent me");
  }
  return (
    <div>
      <button className="btn" onClick={greet}>
          Greet me using onClick React 
      </button>
    </div>
  )
}

You can run your app using the following command:

npm start

Output:

React event handling

  • In HTML, we specify event in html tags like onclick, onsubmit etc. and pass the string that contain the parenthesis at the end.
  • In html, we can also add them afterword using external javascript using addEventListener.
  • In React, we specify event at the time of creating our component.
  • we use camel case convention in React i. e. onClick, onSubmit.
  • In React, we bind them using method name only like onClick={greet}.
  • addEventListener cannot be used in React component.

These are some key differences in event handling we are going to see them in detail with the examples.

In HTMLIn ReactJS
we specify event using “onclick”,”onsubmit”which is the normal convention. We specify the event using  “onClick”,”onSubmit” likewise which is camel case convention.
We bind or provide the listener in form of the string.We bind or provide the listener in form of function name or method name as a variable. 
The string we pass to the listener should have “( )” at the end in order to work.We are only suppose to pass the method  name and nothing else. React can determine that it has to run this method.
We can add event listener any time using external javascript.We have to specify all the Events at the time of creating the component. 

References: https://www.geeksforgeeks.org/javascript-addeventlistener-with-examples/




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!