Delegování událostí v JavaScriptu

V předchozí lekci byl popsán problém, vznikající při přidávání nových prvků, a uvedeno jeho řešení. V této lekci prozkoumáme vhodnější způsob, jak se problému vyhnout - delegování událostí. Pojďme si jej rozebrat.

Jak již víte, kliknutím na li zároveň klikáme i na ul. To je možné díky propagaci událostí. Můžeme to využít k řešení našeho úkolu: připojíme událost ne na každou li, ale na jejich rodiče ul:

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

Nyní v obslužné rutině události this bude ukazovat na prvek, ke kterému je připojen obslužný kód, a event.target - na prvek, ve kterém došlo k události:

list.addEventListener('click', function(event) {
	console.log(this);         // náš seznam
	console.log(event.target); // položka seznamu
});

Udělejme to, aby li, na které došlo ke kliknutí, přidala na konec vykřičník znak:

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

Zopakujte uvedené řešení. Přesvědčte se, že nové li budou také reagovat na kliknutí.