Eseménydelegálás a JavaScriptben

Az előző leckében leírtuk azt a problémát, ami új elemek hozzáadásakor merül fel, és megadtuk a megoldását. Ebben a leckében egy sikeresebb módját vizsgáljuk meg a probléma megkerülésének - a eseménydelegálást. Nézzük meg ezt.

Amint már tudod, ha a li elemre kattintasz, egyidejűleg a ul elemre is kattintasz. Ez az események bubbling (felbuborékázása) révén lehetséges. Ezt felhasználhatjuk a feladatunk megoldására: ne az egyes li elemekre helyezzük az eseményt, hanem a szülőjükre, a ul elemre:

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

Most az eseménykezelőben a this arra az elemre fog mutatni, amelyhez a kezelő van kötve, a event.target pedig arra az elemre, ahol az esemény történt:

javascriptlist.addEventListener('click', function(event) {
  console.log(this);         // a listánk
  console.log(event.target); // a listaelem
});

Tegyük úgy, hogy a li elem, amelyre kattintás történt, a végére egy felkiáltójelet kapjon:

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