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 listeningEvent 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 directoryExample: 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 :
|
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. |
Similar Reads
Difference between GWT and React GWT (Google Web Toolkit ) is a development toolkit that compiles Java code into JavaScript for building the web applications, while React is a JavaScript library used to create modern, component-based user interfaces directly in the browsers.GWTGWT is a development toolkit for building and optimizin
2 min read
Difference between Node.js and React.js Node.js and React.js are two powerful technologies widely used in the development of modern web applications. While both are based on JavaScript, they serve entirely different purposes and are used at different stages of the web development process. This article provides a detailed comparison betwee
5 min read
Difference Between JavaScript and React.js JavaScript is a versatile programming language widely used for creating interactive web pages and web applications. It is essential for front-end development, allowing developers to manipulate webpage elements, handle user interactions, and dynamically update content. On the other hand, React.js is
4 min read
Difference Between a .js and .jsx File in React React is a JavaScript library used for building user interfaces, especially for single-page applications. It uses a component-based structure that makes development more efficient and maintainable. In React, different file extensions are used for specific purposes: .js or .jsx for JavaScript and JSX
4 min read
Difference Between Virtual DOM and Real DOM Understanding the difference between Virtual DOM and Real DOM is important in ReactJS. Real DOM is the actual structure represented in the User Interface and the virtual DOM object is the same as a real DOM object, except that it is a lightweight copy.Virtual DOMThe Virtual DOM is a concept used by
3 min read
Difference between React.Component and React.PureComponent? A Component is one of the core building blocks of React. In other words, we can say that every application you will develop in React will be made up of pieces called components. But React has two types of Components:React.PureComponent: It is one of the most significant ways to optimize React applic
3 min read
Difference between ReactJS and Vue.js ReactJS: ReactJS is an open-source JavaScript library created by Facebook which is used to deal with the view layer for both Web and Mobile applications. It can be provided on the server-side along with working on the client-side. Features of ReactJS: Scalability: It is reasonable for enormous scale
2 min read
What is the Difference between Element and Component ? An Element is an object that represents a DOM node it is a part of DOM structure, while a component is a reusable block of code that contains logic, states, and also returns the Element. The element contains the information to be rendered on the UI and the Components are composed of the elements.Tab
4 min read
What are the differences between JSX and HTML? JSX and HTML differ in their integration and usage within web development. HTML is a standard markup language for creating static web pages, while JSX is a syntax extension for JavaScript, mainly used with React, allowing HTML-like code within JavaScript. Additionally, JSX uses camelCase for attribu
4 min read
Difference Between React.js and Angular.js When it comes to building modern web applications, React.js and Angular.js are two of the most popular choices. Both are used in front-end development, but they differ significantly in terms of architecture, features, and usage.What is React.js?React.js is a declarative, efficient, and flexible Java
5 min read