How to Add an Event Listener to All Elements with a Class in JavaScript

A fundamental task in web development is to make a group of similar elements interactive. For example, you might have a gallery of images, a list of product cards, or a set of buttons, and you want to trigger the same action whenever any one of them is clicked.

This guide will teach you the primary methods for adding an event listener to all elements that share a specific class. You will learn the modern and highly efficient event delegation technique, as well as the more direct approach of iterating through the elements with querySelectorAll() and forEach().

The Goal: Attaching a Click Event to Multiple Elements

Given a set of HTML elements that share a class, we want to execute a JavaScript function whenever any one of them is clicked.

The HTML:

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>

Method 1 (Most Efficient): Event Delegation

Event delegation is the most performant and scalable solution. Instead of adding a separate event listener to every single element, you add one single listener to a common parent element. This listener then uses the event.target property to figure out which child element was actually clicked.

The logic:

1. Add a click event listener to a parent container that holds all your target elements.
2. Inside the listener, check if the clicked element (event.target) matches the class you're interested in.
3. If it matches, perform your action.

The Solution:

<div id="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

const container = document.getElementById('container');

container.addEventListener('click', (event) => {
  // Check if the clicked element has the 'box' class
  if (event.target.classList.contains('box')) {
    // The event.target is the specific .box that was clicked
    event.target.style.backgroundColor = 'yellow';
    console.log('Clicked:', event.target.textContent);
  }
});

note

Why this is the best practice:

• Performance: It uses only one event listener, which is more memory-efficient, especially with hundreds of elements.
• Dynamic Content: It works automatically for new .box elements that are added to the container later.

Method 2 (Recommended for Simplicity): querySelectorAll() and forEach()

For a small or fixed number of elements, this method is very direct and easy to understand. It involves selecting all the elements and then looping through them to attach a listener to each one.

The logic:

1. Select all the target elements using document.querySelectorAll().
2. Use the forEach() method to iterate over the resulting NodeList.
3. In each iteration, add a click event listener directly to that element.

The solution:

const boxes = document.querySelectorAll('.box');

boxes.forEach(box => {
  box.addEventListener('click', event => {
    // event.target is the element that was clicked
    event.target.style.backgroundColor = 'yellow';
    console.log('Clicked:', event.target.textContent);
  });
});

note

This is the most common and readable approach for many developers.

Method 3 (Alternative): Using a for...of Loop

The for...of loop is another excellent way to iterate. It achieves the same result as forEach() and is slightly more versatile, as it works on more types of collections.

The solution:

const boxes = document.querySelectorAll('.box');

for (const box of boxes) {
  box.addEventListener('click', event => {
    event.target.style.backgroundColor = 'yellow';
    console.log('Clicked:', event.target.textContent);
  });
}

Understanding NodeList vs. HTMLCollection

This is a common source of errors for beginners.

• querySelectorAll() returns a NodeList, which has a built-in forEach() method.
• getElementsByClassName() returns an HTMLCollection, which does not have a forEach() method.

Example of code with error:

// This will FAIL with a TypeError!
const boxes = document.getElementsByClassName('box');
boxes.forEach(box => { ... }); // ⛔️ boxes.forEach is not a function

Solution: If you must use getElementsByClassName(), either use a for...of loop (which works on HTMLCollection) or convert the collection to an array first with Array.from(). However, it's simpler to just use querySelectorAll() from the start.

// ✅ Option 1: Use querySelectorAll() — returns NodeList with forEach()
const boxes1 = document.querySelectorAll('.box');
boxes1.forEach(box => console.log('querySelectorAll:', box.textContent));

// ✅ Option 2: Convert HTMLCollection to array with Array.from()
const boxes2 = document.getElementsByClassName('box');
Array.from(boxes2).forEach(box => console.log('Array.from:', box.textContent));

// ✅ Option 3: Use for...of loop (works on HTMLCollection)
const boxes3 = document.getElementsByClassName('box');
for (const box of boxes3) {
    console.log('for...of:', box.textContent);
}

Practical Example: A "Selectable Items" List

This script allows a user to click multiple items in a list, toggling an "active" class on each one. It uses the efficient event delegation method.

The HTML and CSS:

<style>
  .item.is-selected {
    background-color: lightgreen;
    font-weight: bold;
  }
</style>

<ul id="item-list">
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
</ul>

The JavaScript:

const itemList = document.getElementById('item-list');

itemList.addEventListener('click', (event) => {
  // Find the closest parent <li> element of what was clicked
  const clickedItem = event.target.closest('li.item');

  // If a valid item was clicked, toggle its class
  if (clickedItem) {
    clickedItem.classList.toggle('is-selected');
  }
});

Conclusion

Adding event listeners to multiple elements is a fundamental DOM manipulation task.

• Event Delegation (a single listener on a parent element) is the most efficient and scalable method. It should be your default choice for performance and for handling dynamic content.
• querySelectorAll() combined with forEach() is a very clear and readable alternative that is perfect for a small, fixed number of elements.
• Avoid using getElementsByClassName() with forEach() unless you convert it to an array first; querySelectorAll() is generally the better selector tool.