Как повесить обработчик на несколько элементов?

Question

[Mikhail Rerberg]

Всем привет!

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

Код:
https://jsfiddle.net/qc6fhzLg/

Answer 1

[0xD34F]

Делегирование, назначаем обработчик один раз:

document.querySelector('.container').addEventListener('click', e => {
  if (e.target.tagName === 'BUTTON') {
    e.target.parentNode.querySelector('img').classList.toggle('active');
  }
});

Или каждому элементу индивидуально:

const buttons = document.querySelectorAll('.container button');
const onClick = e => e.target.previousElementSibling.classList.toggle('active');
buttons.forEach(n => n.addEventListener('click', onClick));

Answer 2

[Finch_85]

https://jsfiddle.net/mdsmmy3L/2/

Немного переделал вариант товарища выше на ES6
Стильно, модно. молодежно! (ES6). Без prototype и call и короче

let buttons = document.querySelectorAll('.btn');


buttons.forEach((elem)=>{
	elem.addEventListener('click',()=>{
      elem.parentNode.querySelector('.picture').classList.toggle('active')
  })
})

Answer 3

[Антон Спирин]

Или без делегирования.