События Javascript (нажмите)

Question

Мой сайт работает в основном с javascript. сервер возвращает html в массиве JSON, тогда javascript добавит его в DOM. Моя проблема связана с событиями. Должен ли я добавить событие click в тело/окно, а затем проверить соответствие цели или добавить событие к каждому элементу? (Большинство событий будет в корме, где элементы имеют тот же класс):

<div id="feed_1"> 
      <div class="like_button" data-click="something here">Like</div> 
    </div> 
<div id="feed_2"> 
      <div class="like_button" data-click="something here">Like</div> 
    </div> 

примечание: Я не использую JQuery

Answer 1

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

С событиями, которые работают с большим количеством элементов, мы применяем СУХИЕ принципы с помощью делегирования событий. Это включает в себя объявление прослушивателя событий с параметром события, а затем запуск события на цель события. Пример:

var el = document.getElementByID('container'); 
el.addEventListener('click', function(e) { 
    doSomething(e.target); // do something to the target element 
}); 

Идея заключается в том, что ваш контейнер элемент включает в себя все, что вы хотите быть «кликабельны», однако, если щелкнуть элемент внутри контейнера, событие будет стрелять только для этого щелкнул элемента. Таким образом, мы не можем определить прослушиватель событий для каждого отдельного элемента.

Надеюсь, это поможет.