How to add many Event Handlers to the same element with JavaScript HTML DOM?

Front End Technology Javascript Object Oriented Programming

It is very common to use the events while we are programming in JavaScript. Suppose you are creating a modal that opens up on clicking a button or hovering over using the cursor, here we using two events on a single element but JavaScript does not have any official way to use many event listeners on a single element. In this article, we will learn How to add many Event Handlers to the same element with JavaScript HTML DOM. To achieve this, we have the following approaches given below.

Using Multiple addEventListener Methods
Using the ES6 Way

Using Multiple addEventListener Methods

The addEventListener is an inbuilt JavaScript method that is used to attach an event to an element. It has three arguments the first one takes the name of the event in string format and the second is the callback function that gets called when the event is fired, and the third argument is optional and which is used to specify whether you want to capture the event or not, it is a Boolean value. You can use the addEventListener with window and document as well.

Syntax

Event.addEventListener(event, function, useCapture )

Parameter

Event − It is a required parameter that specifies the name of the event in string format.
Function − It is a required parameter that gets called when the event is fired.
useCapture − It is an optional parameter that specifies if the event is in the bubbling or capturing phase. Its type is Boolean.

Note − Do not use “on” before the event. For example: write “click” instead of “onclick”.

Approach

To add multiple event listeners on a single element, we call the addEventListener method multiple times with multiple events but every time the function is passed to it should be the same.

Example

In this example, we have a button and we are increasing the counter on clicking the button or hovering over the button.


<html>
<head>
   <title> Example -add many Event Handlers to the same element with JavaScript HTML DOM </title>
</head>
<body>
   <h2> Adding many Event Handlers to the same element with JavaScript HTML DOM ? </h2>
   <p> Click or mouse over the button to increase the counter </p>
   <h1>Counter: <span id="counter"> 0 </span> </h1>
   <button id="btn" >Increse ++</button>
</body>
<script>
   // Get the button and counter
   let btn = document.getElementById("btn")
   let counter = document.getElementById("counter");
   
   // Call the addEventListener method
   btn.addEventListener("mousemove", increase)
   btn.addEventListener("click", increase)
   
   // Define the increase function
   function increase(){
      counter.innerText = parseInt(counter.innerText) + 1
   }
</script>
</html>

Using the ES6 Way

In this method also we use the addEventListener but instead of calling it multiple times, we call it only once. In this approach, we use the following steps.

Add all the events in an array.
Apply the forEach method to the array and then at each iteration call the addEventListener with that element which is the name of the event.

Example

In this example, we have a button and we are increasing the counter on clicking the button or hovering over the button.


<html>
<head>
   <title>Example- add many Event Handlers to the same element with JavaScript HTML DOM </title>
</head>
<body>
   <h2> Adding many Event Handlers to the same element with JavaScript HTML DOM? </h2>
   <p> Click or mouse over the button to increase the counter </p>
   <h1>Counter: <span id="counter"> 0 </span> </h1>
   <button id="btn">Increse ++</button>
</body>

<script>
   // Get the button and counter
   let btn = document.getElementById("btn")
   let counter = document.getElementById("counter");
   
   // Call the addEventListener method
   ["click", "mousemove"].forEach((event) => {
      btn.addEventListener(event, increase)
   })
   
   // Define the increase function
   function increase() {
      counter.innerText = parseInt(counter.innerText) + 1
   }
</script>
</html>