Delegowanie zdarzeń w JavaScript

W poprzedniej lekcji opisano problem, powstający przy dodawaniu nowych elementów, i przedstawiono jego rozwiązanie. W tej lekcji rozważymy lepszy sposób na obejście problemu - delegowanie zdarzeń. Rozbierzmy go.

Jak już wiesz, klikając na li, jednocześnie klikamy też na ul. Jest to możliwe dzięki wypływaniu zdarzeń. Możemy wykorzystać to do rozwiązania naszego zadania: nałożymy zdarzenie nie na każdą li, a na ich rodzica ul:

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

Teraz w obsłudze zdarzenia this będzie wskazywać na element, do którego jest powiązany obsługa, a event.target - na element, w którym zdarzyło się zdarzenie:

javascriptlist.addEventListener('click', function(event) {
  console.log(this);         // nasza lista
  console.log(event.target); // punkt listy
});

Zróbmy tak, aby li, na której zdarzył się klik, na koniec dodał się wykrzyknik:

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