JS Event Listeners

Welcome to another tutorial, here you will learn about DOM event listeners in JavaScript.

Understanding Event Listeners

The Event listeners are just like event handlers, but you can assign as many event listeners as you like to a particular event on a particular element.

To understand how Event listeners actually work let's check out this simple example below. 

<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>

Try with example

When you eventually run the above example and then click the button element, only ‘secondFunction()’ will be executed. This is because assigning the second event handler overwrites the first. This is the main shortcoming of this classic event model; as you can only assign one event handler to a particular event on a particular element (i.e a single function per event per element). To handle this difficulty, W3C introduced a more flexible event model called event listeners.

All HTML elements have multiple event listeners, so you can assign multiple functions to the same event for the same element, as illustrated 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>

Try with example

Therefore, 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() allows one more Boolean parameter called the ‘useCapture’. The useCapture is an optional parameter that specifies whether to use event bubbling or event capturing. This is how its basic syntax is:

target.addEventListener(event, function, useCapture);

The Event bubbling and capturing are two methods of propagating events. In the subsequent tutorial, we will learn about event propagation in detail. 

Adding Event Listeners for Different Event Types

You can assign different event listeners to different event types on the same element, just like the event handler. The example here shows how to assign 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>

Try with example

Removing Event Listeners

With the removeEventListener() method you can remove an event listener that has been previously attached with the addEventListener(). This is illustrated in the example below:

<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>

Try with example

Note: The addEventListener() and removeEventListener() methods are supported by all major browsers. However, it is not supported in IE 8 and earlier versions, and Opera 6.0 and earlier versions.