Как назначить обработчик события для каждого из элементов массива?

Question

[Ignatiy2]

Допустим, я воспользовался document.querySelectorAll и мне нужно для каждого из полученных элементов назначить обработчик события. Как это сделать?

Answer 1

[Вадим В]

Циклом по ним пройтись

elements.forEach((item) => { item.addEventListener(event, callback []) })

Либо повесить обработчик на родителя и использовать деллигирование

Answer 2

[Дядя Ваня]

let elements = [...document.querySelectorAll('classname')].forEach(item => { 
	item.addEventListener('click', ()=>{
		console.log('1');
    });
});

Вот)

Answer 3

[Михаил Смолинский]

Если нужно вешать событие на однотипный набор элементов, то лучшим решением будет повешать событие на их общего родительского элемента, а к самым элементам получать доступ внутри колбек-функции обработчика события через event.target.

<ul id=parent>
  <li data-id="1">child 1</li>
  <li data-id="2">child 2</li>
  <li data-id="3">child 3</li>
</ul>

document.querySelector('#parent').addEventListener('click', event => {
  const id = event.target.getAttribute('data-id');
  if (!id) return;  // prevent event in non data-id elenent 

  // ... some code
})

Answer 4

[DanKud]

Через цикл вешать событие на каждый элемент - https://codepen.io/anon/pen/MxVVXz

Answer 5

[Alexander Pushkarev]

Читайте про addEventListener

PS можно ещё вот так сделать

Object.defineProperty(NodeList.prototype, "addEventListener", {
    value: function (event, callback, useCapture) {
        useCapture = ( !! useCapture) | false;
        for (var i = 0; i < this.length; ++i) {
            if (this[i] instanceof Node) {
                this[i].addEventListener(event, callback, useCapture);
            }
        }
        return this;
    }
});

Comments

[Владимир Проскурин]

( !! useCapture) | false
А для чего эта магия? Аргумент useCapture у addEventListener должен быть булевым значением (а не 0-1), поэтому можно было оставить !!useCapture.