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.

🤩 Our Amazing Sponsors 👇

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

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
}