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:

list.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:

list.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:

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

Ismételd meg a bemutatott megoldást. Győződj meg róla, hogy az új li elemek is reagálni fognak a kattintásra.