What You Need To Know About JavaScript Event Listeners

The JavaScript event listeners are simply like event handlers, except that you can assign as many event listeners as you want on an event on a certain element.

For you to better understand how event listeners work here’s a simple example that executes functions on the click of a button using the onclick event handler:

<button id="myBtn">Click Me</button>

<script>
// Defining custom functions
function firstFunction() {
    console.log("The first function executed successfully!");
}

function secondFunction() {
    console.log("The second function executed successfully");
}

// Selecting button element
let btn = document.getElementById("myBtn");

// Assigning event handlers to the button
btn.onclick = firstFunction;
btn.onclick = secondFunction; // This one overwrite the first
</script>

In this example when you click the button element, only secondFunction() will be executed, because the second event handler overwrites the first. To deal with this problem there is a more flexible event-model – event listeners.

Any HTML element can have multiple event listeners, therefore you can assign multiple functions to the same event for the same element. Here’s an example:

<button id="myBtn">Click Me</button>

<script>
// Defining custom functions
function firstFunction() {
    console.log("The first function executed successfully!");
}

function secondFunction() {
    console.log("The second function executed successfully");
}

// Selecting button element
let btn = document.getElementById("myBtn");

// Assigning event listeners to the button
btn.addEventListener("click", firstFunction);
btn.addEventListener("click", secondFunction);
</script>

Now, if you click the button, both functions will be executed.

How To Add Event Listeners For Different Event Types In JavaScript

You can assign different event listeners to different event types on the same element. Here’s an example where different event-listener functions are assigned to the click, mouseover, and mouseout events of a button element:

<button id="myBtn">Click Me</button>

<script>
// Selecting button element
let 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>

How To Add Event Listeners To Window Object In JavaScript

For this, you will need addEventListener() method. This method allows you to add event listeners to any HTML elements – the document object, the window object, or any other object that supports events, etc. Here’s an example:

<div id="result"></div>

<script>
// Defining event listener function
function displayWindowSize() {
    let w = window.innerWidth;
    let h = window.innerHeight;
    let 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>

How To Remove Event Listeners In JavaScript

For this, you can use the removeEventListener(). This method will remove an event listener that has been previously attached with addEventListener(). Here’s an example:

<button id="myBtn">Click Me</button>

<script> 
// Defining function
function greetWorld() {
    console.log("Hello World!");
}

// Selecting button element
let btn = document.getElementById("myBtn");

// Attaching event listener
btn.addEventListener("click", greetWorld);

// Removing event listener
btn.removeEventListener("click", greetWorld);
</script>