EN
JavaScript - add event listener to multiple elements
0 points
In this article, we would like to show you how to add event listener to multiple elements in JavaScript.
Quick solution:
xxxxxxxxxx1
// add onclick event to multiple elements with the same class property2
3
document.querySelectorAll('.element-class').forEach((item) => {4
item.addEventListener('click', (event) => {5
console.log('onclick event occurred.');6
});7
});or
xxxxxxxxxx1
// add onclick event to multiple elements with different class property2
3
[4
document.querySelectorAll('.element-class1'),5
document.querySelectorAll('.element-class2'),6
].forEach((item) => {7
item.addEventListener('click', (event) => {8
console.log('onclick event occurred.');9
});10
});
In this example, we will add click event listener to multiple elements with the same class property values.
Runnable example:
xxxxxxxxxx1
2
<html>3
<body>4
<div class="my-div">Click me! (my-div first)</div>5
<div class="my-div">Click me! (my-div second)</div>6
<script>7
document.querySelectorAll('.my-div').forEach((item) => {8
item.addEventListener('click', (event) => {9
console.log('onclick event occurred.');10
});11
});12
</script>13
</body>14
</html>In this example, we add click event listener to multiple elements with different class property values in the following way:
- we use
querySelectorAllto get all the elements frommy-div1andmy-div2classes, - with the spread operator (
...) we merge two arrays of elements into one, - using
forEachwe add an event listener to everyitemfrom the merged array.
Runnable example:
xxxxxxxxxx1
2
<html>3
<body>4
<div class="my-div1">Click me! (my-div1)</div>5
<div class="my-div2">Click me! (my-div2)</div>6
<script>7
[8
document.querySelectorAll('.my-div1'),9
document.querySelectorAll('.my-div2'),10
].forEach((item) => {11
item.addEventListener('click', (event) => {12
console.log('onclick event occurred.');13
});14
});15
</script>16
</body>17
</html>18
Note:
Instead of the
classyou can use any other property to select the elements (e.g.id). However, remember to use a different selector (#instead of.).
