What is the best way to add an event in JavaScript ?
Javascript has events to provide a dynamic interface to a webpage. These events are hooked to elements in the Document Object Model(DOM).
There are three ways to assign an event handler:
The best way to add an event in JavaScript script is addEventListener(). Let’s dive into few examples to understand.
Example 1: In this example, we will add an event using event handler attributes.
Syntax:
<element onclick = "script">
The onclick event attribute works when the user clicks on the button. When the mouse clicked on the element then the script runs.
HTML
<!doctype html> <html> <head> <script> function Geeks() { alert('Hi there!'); } </script> </head> <body> <button type="button" onclick="Geeks()"> Click me event </button> </body> </html> |
Output:
HTML
<!doctype html> <html> <head> <script> function Geeks() { alert('Hi there!'); } </script> </head> <body> <button type="button" onclick="Geeks()"> Click me event </button> </body> </html> |
Disadvantage:
- Assigning event handlers using HTML event handler attributes is considered a bad practice.
- The event handler code is mixed with the HTML code, which will make the code more difficult to maintain and extend.
- There is a problem with timing as if the element is loaded fully before the JavaScript code, users can start interacting with the element on the webpage which will cause an error.
Example 2: In this example, we will add an event using the HTML DOM property.
Syntax:
element.onclick = function() {}
HTML
<!doctype html> <html> <body> <button id="button">Click me event</button> <script> let btn = document.getElementById("button"); btn.onclick = function() { alert('Hi there'); }; </script> </body> </html> |
Output:
Disadvantage: We can’t assign more than one event handler for a particular event.
Example 3: In this example, we will add an event using the addEventListener() method. The addEventListener() method takes the event to listen for, and a second argument to be called whenever the described event gets fired. Any number of event handlers can be added to a single element without overwriting existing event handlers.
Syntax:
element.addEventListener(event, listener);
HTML
<!doctype html> <html> <body> <button id="button">Click me event</button> <script> let btn = document.getElementById("button"); btn.addEventListener('click', function() { alert('Hi there'); }); btn.addEventListener('click', function() { alert('Welcome To zambiatek'); }); </script> </body> </html> |
Output:
Advantage: We can assign more than one event handler for particular event.
Conclusion: Now you can Conclude that addEventListener() is the best way to add an event in JavaScript script due to it’s Multiple event handler for particular event.
