Делегирање на настани во JavaScript

Во претходната лекција беше опишаниот проблем, кој се појавува при додавање нови елементи, и е приведено нејзиното решение. Во оваа лекција ние ќе разгледаме подобар начин да се заобиколи проблемот - делегирање на настани. Ајде да го разбереме.

Како што веќе знаете, кликање на li, ние истовремено кликаме и на ul. Ова е возможно благодарение на 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 + '!';
});