How to add an EventListener to multiple elements in JavaScript

In JavaScript, add an event listener as shown below:

// html
<button id="btn"> click me </button>

// js
let btn = document.getElementById('btn');
btn.addEventListener('click', (event)=> {
    // ... event handled
});

Adding the same event for multiple elements

Let’s say we have two sign-in buttons on a page, and we need to perform the same operation on clicking both buttons. We could handle the above case in two ways:

1. looping through all elements and adding a listener
2. event bubbling

1.Looping through all elements and adding a listener

In the following code, we will loop through the list of DOM elements and attach an event listener:

let btns = document.querySelectorAll(".btn-class");

btns.forEach(btn => {

   btn..addEventListener('click', (event)=> {
    // ... event handled
   });

});

If we want to add the event listener to two different elements, we can create a new array from the DOM elements and attach an event listener:

let btn1 = document.querySelector('.btn-1');
let btn2 = document.querySelector('.btn-1');

let btnsArray = [btn1, btn2];

btnsArray.forEach(btn => {

   btn..addEventListener('click', (event)=> {
    // ... event handled
   });

});

2. Event bubbling

When an event occurs on an element, the event is fired for that element first before it bubbles to its parent, and so on. This is shown below:

// html

<div id=""parent> 
  <button id="btn"> hi </button>
</div>

// js
let parent = document.getElementById("parent")

parent.addEventListener('click', (e)=>{
  console.log("event happened on", e.target);
  console.log("event registerd on", e.currentTarget);
});

In the code above, we added an event listener to the parent element. When the button is clicked, JavaScript will check if the click event is registered for the button and handle it. Then, the event will bubble to its parent (here, the parent of the button is div#parent). Next, Javascript will check if any listener is registered for a click event in div#parent and execute the event handler.

Using the technique above, we can add an event listener to the document or the parent container, and check if the target element of the event meets our condition:

document.addEventListener('click', (e)=> {
   let target = e.target;
   if( target.classList.contains(".btn") )  {
      // handle btn click
   } 
});

Adding the same event listener to different events

Sometimes we need to add the same handler for multiple events. In such a case, we can define a common function and pass the function reference to the event listener:

function handleClick(e) {
}

btn.addEventListener('dblclick', handleClick);
btn.addEventListener('click', handleClick)

When using jQuery, do the following:

$(btn).on('click dblclick', handleClick);