How to add an event listener to multiple elements in JavaScript

Sign up to my newsletter!.

In JavaScript you add an event listener to a single element using this syntax:

document.querySelector('.my-element').addEventListener('click', event => {
  //handle click
})

But how can you attach the same event to multiple elements?

In other words, how to call addEventListener() on multiple elements at the same time?

You can do this in 2 ways. One is using a loop, the other is using event bubbling.

Using a loop

The loop is the simplest one conceptually.

You can call querySelectorAll() on all elements with a specific class, then use forEach() to iterate on them:

document.querySelectorAll('.some-class').forEach(item => {
  item.addEventListener('click', event => {
    //handle click
  }
})

If you don’t have a common class for your elements you can build an array on the fly:

[document.querySelector('.a-class'), document.querySelector('.another-class')].forEach(item => {
  item.addEventListener('click', event => {
    //handle click
  }
})

Using event bubbling

Another option is to rely on event bubbling and attach the event listener on the body element.

The event is always managed by the most specific element, so you can immediately check if that’s one of the elements that should handle the event:

const element1 = document.querySelector('.a-class')
const element2 = document.querySelector('.another-class')

body.addEventListener('click', event => {
  if (event.target !== element1 && event.target !== element2) {
    return
  }
  //handle click
}

Comments

[Jaime López]

The second option seems to be a quick trick for PoC or just for testing purposes. I won't recommend this code on production environments due to not being a clear code or not respect standard paradigms like Single Responsibility and more.