Add an Event Listener to Multiple Elements with JavaScript

It’s common to have multiple elements on a page that should all respond to the same event. Think of a group of buttons that should trigger the same action, a list of links that all need hover effects, or a set of inputs that should validate on change. Instead of attaching listeners one by one, you can add them all at once. In this article, we’ll look at three different ways to do that, using <button> elements as our example.

Using a for…of loop

You can use a simple for...of loop:

let btns = document.querySelectorAll('button');

for (i of btns) {
  i.addEventListener('click', function() {
    console.log(this);
  });
}
Code language: JavaScript (javascript)

The key to ensuring the above code works is to reference the clicked button by means of the this keyword. If you try to use the i variable inside the loop, you’ll only have a reference to the last button in the loop, rather than the currently clicked button.

It should also be noted that for better memory consumption, you should use a named function instead of an anonymous function, then define the function once elsewhere in the code. The same principle applies to the examples below, which also use anonymous functions.

Using for…of along with an IIFE

Another way to do this is using for...of along with an immediately invoked function that passes the current element in the loop back into the function, so you don’t have the problem inherent in the previous example. This way you can reference the current button using the i variable (or whatever variable name you choose):

let btns = document.querySelectorAll('button');

for (i of btns) {
  (function(i) {
    i.addEventListener('click', function() {
      console.log(i);
    });
  })(i);
}
Code language: JavaScript (javascript)

Using forEach()

Another way to do this is using a forEach() loop that correctly adds the listeners and allows immediate access to the current element.

let btns = document.querySelectorAll('button');

btns.forEach(function (i) {
  i.addEventListener('click', function() {
    console.log(i);
  });
});
Code language: JavaScript (javascript)