An event is an important part of JavaScript.A web page responds according to an event that occurred. Some events are user-generated and some are generated by API’s. In this article, we will see how events occur and how the method, addEventListener in JavaScript is used in the following sequence:
- What is Event Listener?
- AddEventListener() in JavaScript
- Parameter Values
- AddEventListener in JavaScript: Example
What is Event Listener?
An event listener is a procedure in JavaScript that waits for an event to occur. The simple example of an event is a user clicking the mouse or pressing a key on the keyboard.
The addEventListener() is an inbuilt JavaScript function which 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.
addEventListener() in JavaScript
Some of the features of the event listener method include:
- The addEventListener() method attaches an event handler to the specified element.
- This method attaches an event handler to an element without overwriting existing event handlers.
- You can add many event handlers to one element.
- You can add many event handlers of the same type to one element, i.e two “click” events.
- Event listeners can be added to any DOM object not only HTML elements. i.e the window object.
- The addEventListener() method makes it easier to control how the event reacts to bubbling.
When using the addEventListener() method, the JavaScript is separated from the HTML markup, for better readability and allows you to add event listeners even when you do not control the HTML markup. For more check out this web developer course today.
Also, you can easily remove an event listener by using the removeEventListener() method.
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 that specifies the name of the event. Note: Do not use the “on” prefix. For example, use “click” instead of “onclick”. For a list of all HTML DOM events, look at our complete HTML DOM Event Object Reference. |
function | Required. Specifies the function to run when the event occurs. When the event occurs, an event object is passed to the function as the first parameter. The type of event object depends on the specified event. For example, the “click” event belongs to the MouseEvent object. |
useCapture | Optional. A Boolean value that specifies whether the event should be executed in the capturing or in the bubbling phase. Possible values:true – The event handler is executed in the capturing phasefalse- Default. The event handler is executed in the bubbling phase |
Now that you know how an event listener works, let’s take a look at an example of the addEventListener() in JavaScript.
addEventListener() in JavaScript: Example
<!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>
With this, we come to an end of this addEventListener in JavaScript. I hope you understood how the event listener method works in JavaScript.
Check out our Full Stack Web Developer Masters Program which comes with instructor-led live training and real-life project experience. This training makes you proficient in skills to work with back-end and front-end web technologies. It includes training in Web Development, jQuery, Angular, NodeJS, ExpressJS, and MongoDB.
Check out the Angular Certification by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe. Angular is a JavaScript framework that is used to create scalable, enterprise, and performance client-side web applications. With Angular framework adoption being high, performance management of the application is community-driven indirectly driving better job opportunities.
Got a question for us? Please mention it in the comments section of “addEventListener in JavaScript” blog and we will get back to you.