Дэлегаванне падзей у JavaScript

У папярэднім ўроку была апісана праблема, якая ўзнікае пры дабаўленні новых элементаў, і прыведзена яе рашэнне. У даным ўроку мы разгледзім больш удалы спосаб абыйсці праблему - дэлегаванне падзей. Давайце яго разбярэм.

Як вы ўжо ведаеце, клікаючы на li, мы адначасова клікаем і на ul. Гэта магчыма дзякуючы ўсплыццю падзей. Мы можам выкарыстоўваць гэта для вырашэння нашай задачы: навяжем падзею не на кожную 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 + '!';
});