Как лучше вешать событие onclick?

Question

[koxac]

Нужно при нажатии на любой элемент с определенным классом выполнить функцию, вижу 2 способа, но какой из них лучше?

window.addEventListener('click', function(evt) {
  if (evt.target.classList.contains('onClick'))
    console.log(evt.target);
});

или

document.querySelectorAll('.onClick').forEach(function(target) {
  target.addEventListener('click', function(evt) {
    console.log(evt.target);
  });
});

Comments

[Михаил]

в 1 .target может быть span в .onClick
во 2м событие не произойдёт если элемент был динамически добавлен

Answer 1

[Alex]

1. Здесь вы вешаете один обработчик на весь документ. И отслеживаете вообще любой клик, проверяя на какой элемент было нажание. Важно отметить, что например вот это

   <button class="onClick"><span>CLICK</span></button>

   не сработает, так как фактически клик произошел не на кнопке, а на вложенном в него спане. Этот способ подходит, когда у вас очень много элементов onClick на странице, чтобы не вешать 1000 обработчиков, а только 1, или они постоянно динамически подгружаются.
   
   
2. Здесь вы навешиваете по 1 обработчику на каждый элемент. В target всегда будет именно тот элемент на который вы повесили обработчик. Но если элементы onClick динамически подгружаются то для них снова нужно вешать обработчик. Рекоментуется использовать во всех случаях за исключением описанных в пункте №1
   

Comments

[koxac]

А чем именно рекомендуется первый способ?
Тем что меньше обращений к dom?

Нормально ли если несколько событий будет у window?

for (var i=0; i<100; i++)
  window.addEventListener('click', function(evt) {
    if (evt.target.classList.contains('onClick_'+i))
      console.log(i, evt.target);
  });

Разумеется этот код как пример, чтоб было понятно что сотни событий и во всех разные классы проверяются, понимаю конечное что лучше если все проверки выполнять в одном событии

window.addEventListener('click', function(evt) {
  if (evt.target.classList.contains('onClick_1'))
    console.log(1, evt.target);
  elseif (evt.target.classList.contains('onClick_2'))
    console.log(2, evt.target);
});