You might have a number of similar elements on a page and you want to add event listeners to all of them and in some cases you might want to add the same event listener to all the elements. For example, a click event to a bunch of button elements. I’ll show you three ways to do this and each of the methods assumes you’re targeting all <button> elements.
Using a for…of loop
You can use a simple for...of loop:
let btns = document.querySelectorAll('button');
for (i of btns) {
i.addEventListener('click', function() {
console.log(this);
});
}
Code language: JavaScript (javascript)The key to ensuring the above code works is to reference the clicked button by means of the this keyword. If you try to use the i variable inside the loop, you’ll only have a reference to the last button in the loop, rather than the currently clicked button. It should also be noted that for better memory consumption, you should use a named function instead of the anonymous function, then define the function once elsewhere in the code. The same principle applies to the below examples, which also use anonymous functions.
Using for…of along with an IIFE
Another way to do this is using for...of along with an immediately invoked function that passes the current element in the loop back into the function, so you don’t have the problem inherent in the previous example. This way you can reference the current button using the i variable (or whatever variable name you choose):
let btns = document.querySelectorAll('button');
for (i of btns) {
(function(i) {
i.addEventListener('click', function() {
console.log(i);
});
})(i);
}
Code language: JavaScript (javascript)Using forEach()
Another way to do this is using a forEach() loop that correctly adds the listeners and allows immediate access to the current element.
let btns = document.querySelectorAll('button');
btns.forEach(function (i) {
i.addEventListener('click', function() {
console.log(i);
});
});
Code language: JavaScript (javascript)