How to Use Multiple Event Listeners – A Beginner’s Guide

Learn how to add multiple event listeners to elements in JavaScript and create dynamic interactions on a webpage. This beginner-friendly tutorial covers the basics of using the addEventListener method and removes event listeners with the removeEventListener method. Improve your web development skills today!

In this Beginner’s Guide I will give you multiple examples, on hove we can use multiple event listeners in JavaScript to create dynamic interactions on a webpage.

Learn JavaScript

First, we select the button element and the h1 element from the HTML using document.querySelector(). This method allows us to select the first element on the page that matches a given CSS selector. In this case, we are selecting the button element and the h1 element.

const button = document.querySelector("button");
const title = document.querySelector("h1");

Then, we use the addEventListener() method to attach event listeners to the button element. The addEventListener() method takes two arguments: the type of event to listen for, and the function to call when the event occurs.

button.addEventListener("click", function () {
  console.log("click");
  title.style.color = "red";
  removeMouseMoveEvent();
  title.innerHTML = "Event listener was removed from element";
});

button.addEventListener("dblclick", function () {
  console.log("doubleclick");
  title.style.color = "black";
});

In this case, we are listening for both "click" and "dblclick" events on the button element. When the button is clicked once, the first function will be called, which changes the color of the title text to red and removes the "mousemove" event listener from the square element. And when the button is double clicked, the second function is called, which changes the color of the title text back to black.

We also use the properties onmouseenter and onmouseleave to attach event listeners to the button element. These event listeners call the eventHandler() function, which updates the title text to indicate whether the mouse has entered or left the button element.

button.onmouseenter = () => eventHandler(event);
button.onmouseleave = () => eventHandler(event);

function eventHandler(event) {
  if (event.type === "mouseenter") {
    title.innerHTML = "Mouse entered the button element";
  } else if (event.type === "mouseleave") {
    title.innerHTML = "Mouse has left the button element";
  }
}

Remove event listeners from elements

Next lets grab on to the div element from the DOM and add it to a const with the name of “square”. After thad lets add a traditional EventListener of “mousemove” to it witch will trigger a specific action when the mouse moves.

const square = document.querySelector("div");
// square.addEventListener("mousemove", getRandom);

// ! ATTENTION : this will not work
// square.onmousemove = () => getRandom;

function addMouseMoveEvent(event) {
  square.addEventListener(`${event}`, getRandom);
  title.innerHTML = `Event listener of "${event}" was added to element`;
}

function getRandom() {
  title.innerHTML = Math.random();
}

function removeMouseMoveEvent(event) {
  square.removeEventListener(`${event}`, getRandom);
  window.alert(`Event listener of "${event}" was removed from element`);
  square.style.background = "grey";
}

In conclusion, this example demonstrates how to use multiple event listeners in JavaScript to create dynamic interactions on a webpage. By using the addEventListener() method and the onmouseenter, onmouseleave properties, we were able to attach event listeners to the button element and respond to different types of user interactions. Additionally, we also showed how to remove event listeners with the removeEventListener method. Understanding how to use event listeners is an essential part of web development and can greatly enhance the user experience of a website.

For more information check out the video tutorial on YouTube.

Watch the full tutorial on YouTube and get step by step excellent education information about this project.

Want to become a web developer ?

Get complete web development courses on HTML, CSS , JavaScript, Bootstrap, Visual Studio Code, Responsive design and much more…

Web Development Courses

Love Podcast about web development?

Podcast