Как повесить EventListener на все элементы в коллекции?

Question

[Владислав]

На странице генерируется n-ое кол-во кнопок с одинаковым классом. Мне нужно на все эти кнопки повесить EventListener. Пытался делать так:

var buttons = document.getElementsByClassName('buttons');
var button;
for(var i=0; i<buttons.length; i++){
        button = buttons[i]
        button.addEventListener('click', some_function)
    }

Но ивент навешивается только на последний элемент коллекции.

Comments

[4mobile]

По моему мнению, так делать неразумно из-за снижения производительности.
Лучше навесить слушателя на их родителя и проверять при срабатывании ивента на что именно кликнули.

Answer 1

[hzzzzl]

document.body.addEventListener('click', (event) => {
  if (event.target.matches('.buttons')) {
    some_function(event)
  }
})

но если хочется циклом, то var поменять на let должно хватить

for(let i=0; i<buttons.length; i++){
        button = buttons[i]
        button.addEventListener('click', some_function)
    }

Comments

[torik0]

спасибо