Difference between HTML and React Event Handling

Last Updated : 10 Nov, 2023

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.

Event Handling In HTML :

We are directly writing the code for the Real DOM so to let Real DOM 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 listeners.

Both methods work 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 does not have 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: This example shows the implementation of Event Handlers in HTML.

HTML

<!-- index.html -->
<!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>
        let button = document.getElementById("b1");
        button.addEventListener("click", () =>
            window.alert("hello addevnetlistner sent me")
        );
    </script>
</body>
 
</html>

Output:

HTML event listening

Event Handling 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 and move to the project directory:

npx create-react-app nameoftheapp
cd nameoftheapp

Project Structure:

react file directory

Example: This example demonstrate the use of event handlers in React JS.

Javascript

// Filename - 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>
    );
}

Step to Run the Application: You can run your app using the following command in the terminal inside project directory.

npm start

Output: This output will be visible on http://localhost:3000/ on the browser window.

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.

Difference between HTML and React Event Handling :

In HTML	In 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.