Add event listener to all Elements with Class using JS

avatar

Borislav Hadzhiev

Last updated: Dec 31, 2021

banner

Check out my new book

Add event listener to all Elements with Class using JS #

To add an event listener to all elements with class:

  1. Use the document.querySelectorAll() method to select the elements by class.
  2. Use the forEach() method to iterate over the collection of elements.
  3. Use the addEventListener() method to add an event listener to each element.

Here is the HTML for the examples in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const boxes = document.querySelectorAll('.box'); boxes.forEach(box => { box.addEventListener('click', function handleClick(event) { console.log('box clicked', event); box.setAttribute('style', 'background-color: yellow;'); }); });

add event listener to all elements with class

We used the document.querySelectorAll method to select all elements with class of box.

The querySelectorAll method returns a NodeList, so we are able to use the NodeList.forEach method to iterate over the result.

If you are use the document.getElementsByClassName method, you have to convert the result to an array before calling the forEach() method.

index.js
const boxes = Array.from(document.getElementsByClassName('box')); boxes.forEach(box => { box.addEventListener('click', function handleClick(event) { console.log('box clicked', event); box.setAttribute('style', 'background-color: yellow;'); }); });

We called the addEventListener method on each element in the collection.

The addEventListener method takes 2 arguments:

  1. The type of the event to listen for. If you need a list of all of the available event types, check out the MDN events list.

  2. A function to be invoked every time the event is triggered.

The function in the example gets invoked every time the element is clicked and sets the style property on the element.

An alternative, but also very common approach is to use the for...of loop to iterate over the collection.

index.js
const boxes = document.getElementsByClassName('box'); for (const box of boxes) { box.addEventListener('click', function handleClick(event) { console.log('box clicked', event); box.setAttribute('style', 'background-color: yellow;'); }); }

The code snippet achieves the same result, but this time we used the for...of loop to iterate over the collection of elements.

If you need to select elements with different classes, you can pass multiple, comma-separated selectors to the document.querySelectorAll() method.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div class="box1">Box 1</div> <div class="box2">Box 2</div> <div class="box3">Box 3</div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const boxes = document.querySelectorAll('.box1, .box2, .box3'); boxes.forEach(box => { box.addEventListener('click', function handleClick(event) { console.log('box clicked', event); box.setAttribute('style', 'background-color: yellow;'); }); });

We passed multiple, comma-separated selectors to the querySelectorAll method to get a collection of the DOM elements that have a class of box1, box2 and box3.

Use the search field on my Home Page to filter through my more than 3,000 articles.