Event listeners are similar to event handlers, but they allow you to assign multiple event listeners to a particular event on a specific element.
To understand how event listeners work, let's consider a simple example. Suppose you have created two functions and you want to execute both of them when a button is clicked using the onclick event handler, as demonstrated in the following example:
<button id="myBtn">Click Me</button>
<script>
// Defining custom functions
function firstFunction() {
alert("The first function executed successfully!");
}
function secondFunction() {
alert("The second function executed successfully");
}
// Selecting button element
var btn = document.getElementById("myBtn");
// Assigning event handlers to the button
btn.onclick = firstFunction;
btn.onclick = secondFunction; // This one overwrite the first
</script>If you run the above example and click the button element, only secondFunction() will be executed because assigning the second event handler overwrites the first.
This limitation is inherent in the classic event model—you can only assign one event handler to a particular event on a specific element, i.e., a single function per event per element. To address this issue, the W3C introduced a more flexible event model called event listeners.
With event listeners, any HTML element can have multiple event listeners, allowing you to assign multiple functions to the same event for the same element, as demonstrated in the following example:
<button id="myBtn">Click Me</button>
<script>
// Defining custom functions
function firstFunction() {
alert("The first function executed successfully!");
}
function secondFunction() {
alert("The second function executed successfully");
}
// Selecting button element
var btn = document.getElementById("myBtn");
// Assigning event listeners to the button
btn.addEventListener("click", firstFunction);
btn.addEventListener("click", secondFunction);
</script>Now, if you run the above example and click the button, both functions will be executed.
In addition to the event type and listener function parameter, the addEventListener() method accepts one more optional parameter called useCapture. This Boolean parameter specifies whether to use event capturing (true) or event bubbling (false). The basic syntax is:
Event bubbling and capturing are two methods of propagating events. For detailed information on event propagation, please refer to the upcoming chapter.
Similar to event handlers, you can assign different event listeners to different event types on the same element. The following example demonstrates assigning different event listener functions to the "click", "mouseover", and "mouseout" events of a button element.
<button id="myBtn">Click Me</button>
<script>
// Selecting button element
var btn = document.getElementById("myBtn");
// Defining custom functions
function sayHello() {
alert("Hi, how are you doing?");
}
function setHoverColor() {
btn.style.background = "yellow";
}
function setNormalColor() {
btn.style.background = "";
}
// Assigning event listeners to the button
btn.addEventListener("click", sayHello);
btn.addEventListener("mouseover", setHoverColor);
btn.addEventListener("mouseout", setNormalColor);
</script>The addEventListener() method enables you to add event listeners to various HTML DOM elements, the document object, the window object, or any other object that supports events, such as the XMLHttpRequest object. Here's an example that attaches an event listener to the window "resize" event:
<div id="result"></div>
<script>
// Defining event listener function
function displayWindowSize() {
var w = window.innerWidth;
var h = window.innerHeight;
var size = "Width: " + w + ", " + "Height: " + h;
document.getElementById("result").innerHTML = size;
}
// Attaching the event listener function to window's resize event
window.addEventListener("resize", displayWindowSize);
</script>You can use the removeEventListener() method to remove an event listener that has been previously attached with the addEventListener(). Here's an example:
<button id="myBtn">Click Me</button>
<script>
// Defining function
function greetWorld() {
alert("Hello World!");
}
// Selecting button element
var btn = document.getElementById("myBtn");
// Attaching event listener
btn.addEventListener("click", greetWorld);
// Removing event listener
btn.removeEventListener("click", greetWorld);
</script>Note: The addEventListener() and removeEventListener() methods are supported in all major browsers. They are not supported in IE 8 and earlier, and Opera 6.0 and earlier versions.