Difference between HTML and React Event Handling - GeeksforGeeks

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.
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>
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
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.
References: https://www.geeksforgeeks.org/javascript-addeventlistener-with-examples/
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
HTML-Questions
Picked
React-Questions
Difference Between
HTML
ReactJS
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Difference Between Method Overloading and Method Overriding in Java
Difference between Prim's and Kruskal's algorithm for MST
Difference between Internal and External fragmentation
Differences and Applications of List, Tuple, Set and Dictionary in Python
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?