Delegiranje događaja u JavaScript

U prethodnoj lekciji je opis problem koji se javlja pri dodavanju novih elemenata, i dato je njegovo rešenje. U ovoj lekciji ćemo razmotriti bolji način da se zaobiđe problem - delegiranje događaja. Hajde da ga razumemo.

Kao što već znate, klikajući na li, mi istovremeno klikamo i na ul. Ovo je moguće zahvaljujući izbijanju (bubbling) događaja. Mi možemo iskoristiti ovo da rešimo naš zadatak: postavimo događaj ne na svaku li, već na njihovog roditelja ul:

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

Sada u obrađivaču događaja this će pokazivati na element kome je vezan obrađivač, a event.target - na element u kome se događaj desio:

list.addEventListener('click', function(event) {
	console.log(this);         // naš spisak
	console.log(event.target); // stavka spiska
});

Učinimo da li, na kojoj se desio klik, na kraj doda uzvičnik:

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

Ponovite navedeno rešenje. Uverite se, da će nove li takođe reagovati na klik.