1console.log("hello-world);
javascript
console.log("hello-world);
hidden codeblock for CSS
css
.container {
  width: 80%;
}
hidden codeblock for CSS
html
<pre><code class="language-css">
.container {
  width: 80%;
}
</code></pre>
hidden codeblock for CSS
Code Carnage
1console.log("hello-world);
javascript
console.log("hello-world);
hidden codeblock for CSS
css
.container {
  width: 80%;
}
hidden codeblock for CSS
html
<pre><code class="language-css">
.container {
  width: 80%;
}
</code></pre>
hidden codeblock for CSS

Adding Event Listener to All Elements with Class in JavaScript

ReadTime: 4 minutes

Adding event listeners to elements with a specific class is a common task in web development, allowing you to respond to user interactions with elements that share a common identifier. In this guide, we’ll explore different methods to achieve this using JavaScript.

Setting the stage: Sample HTML and JS Code

Let’s start with a simple example to set the context. Consider the following HTML:

html
<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Event Listener Demo</title>
    <style>
      .clickable {
        cursor: pointer;
        color: blue;
      }
    </style>
  </head>
  <body>
    <p class="clickable">Element 1</p>
    <p class="clickable">Element 2</p>
    <p class="clickable">Element 3</p>
  
    <script src="script.js"></script>
  </body>
  </html>
Sample HTML Code to add event listener to

Now, let’s add an event listener to all elements with the class “clickable” using JavaScript.

Method 1: Using document.querySelectorAll(), forEach(), and addEventListener()

  • We use document.querySelectorAll(‘.clickable’) to select all elements with the class “clickable.”
  • The forEach method iterates over each selected element.
  • We attach an event listener using addEventListener(‘click’, …) to respond to click events.
javascript
// script.js
const clickableElements = document.querySelectorAll('.clickable');

clickableElements.forEach(element => {
  element.addEventListener('click', () => {
      console.log('Element clicked:', element.textContent);
      // Your custom logic goes here
  });
});
document.querySelectorAll to add event listener

Method 2: Using document.getElementsByClassName

Alternatively, can use below approach.

javascript
// script.js
const clickableElements = document.getElementsByClassName('clickable');

for (const element of clickableElements) {
  element.addEventListener('click', () => {
      console.log('Element clicked:', element.textContent);
      // Your custom logic goes here
  });
}
document.getElementsByClassName to add event listener

Both approaches achieve the same result, and you can choose the one that fits your needs.

Choosing the Event Type

Customize the type of event you want to listen for by replacing ‘click’ with the desired event type. For a list of available event types, refer to the MDN event list here.

Method 3: Using a for…of Loop

If you prefer traditional loops, you can use a for…of loop as an alternative to forEach():

javascript
// script.js
const clickableElements = document.querySelectorAll('.clickable');

for (const element of clickableElements) {
  element.addEventListener('click', () => {
      console.log('Element clicked:', element.textContent);
      // Your custom logic goes here
  });
}
for...of Loop to Add Event Listeners

🧪Practice Coding Problem: Magic Button Click

In the spirit of Test Driven Development ( 😁), lets test our understanding by solving a problem.

Create a button with the class “magic-btn” and add an event listener to log “Abracadabra!” to the console when the button is clicked. You can write code in script.js.

Problem (JavaScript)

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Magical Button</title>
<style>
  .magic-btn {
    padding: 10px;
    background-color: purple;
    color: white;
    cursor: pointer;
  }
</style>
</head>
<body>
<button class="magic-btn">Cast Spell</button>
<script src="script.js"></script>
</body>
</html>
Problem Code

Please attempt before seeing the Answer:

Solution
javascript
// script.js
const magicButton = document.querySelector('.magic-btn');

magicButton.addEventListener('click', () => {
  console.log('Abracadabra!');
  // Can do more Magical Shenanigans here! 🔮
});
Solution Code

Hope you will make all those HTML elements listen to your Javascript. Keep coding and casting those programming spells! ✨🧙‍♂️💻

You might like:

Contact

Feel free to reach out!