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
Difference between HTML and React Event Handling
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.
Contact Us