Add event listener to all Elements with Class in JavaScript

# Add event listener to all Elements with Class using JS

To add an event listener to all elements with class:

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

Here is the HTML for the examples.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </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>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
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

The code for this article is available on GitHub

The code sample adds an event listener to the results from the querySelectorAll() method.

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

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

# Using document.getElementsByClassName

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

index.js

Copied!
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;');
  });
});

using document get elements by class name

The code for this article is available on GitHub

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

The addEventListener method takes 2 arguments:

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.
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.

# Using a `for...of` loop instead of `forEach()`

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

index.js

Copied!
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 for this article is available on GitHub

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

Copied!
<!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

Copied!
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;');
  });
});

The code for this article is available on GitHub

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.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Add event listener to all Elements with Class in JavaScript

# Add event listener to all Elements with Class using JS

# Using document.getElementsByClassName

# Using a for...of loop instead of forEach()

# Additional Resources

Borislav Hadzhiev

# Using a `for...of` loop instead of `forEach()`