Компактная запись .querySelectorAll()

#javascript

Всем привет!
Допустим есть код:



var btn = document.querySelectorAll('button');
btn[0].addEventListener('click', function() {
  console.log(btn[0].textContent);
});
btn[1].addEventListener('click', function() {
  console.log(btn[1].textContent);
});
btn[2].addEventListener('click', function() {
  console.log(btn[2].textContent);
});

  
  
  





Вопрос: Возможно ли написать более компактную запись: btn[i].addEventListener(..)
(или что-то еще) чтобы не перечислять каждую по отдельности? Спасибо.
    

Ответы

Ответ 1

Возможно ли написать более компактную запись: btn[i].addEventListener(..)


Да, возможно, для этого надо использовать цикл for

var btn = document.querySelectorAll('button');
for(var i=0;i
  
  
  



Ответ 2

Во первых, querySelectorAll возвращает коллекцию, которую можно перебрать:



document.querySelectorAll('button')
  .forEach(function(btn) {
    btn.addEventListener('click', function() {
      console.log(btn.textContent);
    })
  });

  
  
  




  

Во вторых, можно обойтись одним обработчиком событий:



document.addEventListener('click', function(e) {
  if(!e.target.matches('button')) return;
  console.log(e.target.textContent);
})

  
  
  




Ответ 3

Можно кнопки перебрать.



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

btn.forEach(c => {
    c.addEventListener('click', () => {
        console.log(c.textContent)
    })
})

     
     


Ответ 4

Взято из learn.javascript.ru.  


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


Хороший пример обработчика и для абсолютно разных действий.


  
  
  





про data атрибут тут