Delegovanie udalostí v JavaScripte

V predchádzajúcej lekcii bol opísaný problém, ktorý vzniká pri pridávaní nových prvkov, a bolo uvedené jej riešenie. V tejto lekcii skúmame vhodnejší spôsob, ako obísť problém - delegovanie udalostí. Poďme si ho rozobrať.

Ako už viete, kliknutím na li sme súčasne klikli aj na ul. To je možné vďaka prebublávaniu udalostí. Môžeme to využiť na riešenie našej úlohy: udalosť nepridáme na každú li, ale na ich rodiča ul:

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

Teraz v obslužnej rutine udalosti this bude ukazovať na prvok, ku ktorému je priradená obslužná rutina, a event.target - na prvok, v ktorom sa udalosť stala:

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

Urobme to tak, aby li, na ktorej došlo ku kliknutiu, na koniec pridala výkričník:

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

Zopakujte uvedené riešenie. Presvedčte sa, že nové li budú tiež reagovať na kliknutie.