Делегирање догађаја у ЈаваСкрипту

У претходној лекцији је описана појава, која настаје када се додају нови елементи, и наведено је њено решење. У овој лекцији ћемо размотрити успешнији начин да се заобиђе тај проблем - делегирање догађаја. Хајде да га расправимо.

Као што већ знате, кликом на li, ми истовремено кликамо и на ul. То је могуће захваљујући избијању догађаја (event bubbling). Ми можемо искористити то за решавање нашег задатка: доделимо догађај не свакој li, већ њиховом родитељу ul:

javascriptlist.addEventListener('click', function() {
  
});

Сада у руковаоцу догађаја this ће указивати на елемент на који је везан руковалац, а event.target - на елемент, у ком се догодио догађај:

javascriptlist.addEventListener('click', function(event) {
  console.log(this);         // наш списак
  console.log(event.target); // ставка списка
});

Направимо да li, на коју се десио клик, на крај додаје узвичник:

javascriptlist.addEventListener('click', function(event) {
  event.target.textContent = event.target.textContent + '!';
});