Implementing the addEvent Listener Method in JavaScript
One of the major elements of JavaScript is an event. A web page reacts to a situation based on what happened. Some events are created by users, while others are created by APIs. In this article, we will discuss the event name known as addEventListener in JavaScript and how it is employed. Reshape your skill in our JavaScript Training in Chennai and become a certified web developer.
What is an Event Listener?
A JavaScript method that monitors for events is known as an event listener. A user clicking the mouse or hitting a key on the keyboard is a basic example of an event.
The built-in JavaScript method addEventListener() accepts the event to listen for and a second parameter that will be invoked whenever the stated event occurs. A single element can have any number of additional event handlers added to it without replacing any already present ones.
addEventListener in JavaScript
The event listener method has certain capabilities that include:
- The chosen element receives an event handler when using the addEventListener() function.
- Without replacing already installed event handlers, this technique connects an event handler to an element.
- One element can have a lot of event handlers added to it.
- One element may have several event handlers of the same kind, such as two “click” event handlers.
- Not just HTML elements but any DOM object may have event listeners attached. that isthe window object.
- It is simpler to regulate how the event responds to bubbling when using the addEventListener() function.
For easier reading and the flexibility to add event listeners even when you don’t have control over the HTML content, the addEventListener() function separates the JavaScript from the HTML code. Furthermore, the removeEventListener() function makes it simple to remove an event listener.
Syntax
target.addEventListener(type, listener[, options]);target.addEventListener(type, listener[, useCapture]);
target.addEventListener(type, listener[, useCapture, wantsUntrusted ]);
Parameter Values
| Parameter | Description |
| event | Required. a String holding the event’s name.Note: Avoid using the prefix “on.” Use “click” instead of “onclick,” for instance.Visit our comprehensive HTML DOM Event Object Reference for a list of all HTML DOM events. |
| function | Required. Indicates the function to be executed when the event happens.An event object is transferred to the function as the first parameter when the event happens. The specified event determines the kind of event object. The “click” event, for instance, belongs to the MouseEvent object. |
| useCapture | Optional. a Boolean value indicating whether or not the event should be handled during the capturing or bubbling phase.Potential valuesFalse is the default; true means the event handler is run during the capturing phase. The bubbling phase is when the event handler is run. |
Now you understand how an event listener operates. Let’s look at a JavaScript addEventListener() example.
Example : addEventListener in JavaScript
<!DOCTYPE html>
<html>
<body>
<p>This example uses the addEventListener() method to execute a function when a user clicks on a button.</p>
<button id=”myBtn”>Try it</button>
<p id=”demo”>
<script>
document.getElementById(“myBtn”).addEventListener(“click”, myFunction);
function myFunction() {
document.getElementById(“demo”).innerHTML = “Hello World”;
}
</script>
</body>
</html>
Output
Conclusion
We hope that you now fully grasp how JavaScript’s event listener method operates. Explore our JavaScript Course that comes with instructor-led live training and classroom mode training. You gain the ability to work with both front-end and back-end web technologies after completing this course. Join for the Best Web Developer Training in Chennai at Softlogic.
