How to add an event listener to multiple elements in JavaScript
Say you want to add an event listener to multiple elements in JavaScript. How can you do so?
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
}
→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025