JavaScript Event Listeners. Everything You Need To Know

Posted by TotalDC

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

In order for you to better understand how event listeners work here’s a simple example that executes functions on 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 second event handler overwrites the first. To deal with this problem there is 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 – he document object, the window object, or any other object that support 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 have 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>

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: