Händelsedelegering i JavaScript

I föregående lektion beskrevs problemet, som uppstår när nya element läggs till, och dess lösning presenterades. I den här lektionen kommer vi att överväga ett bättre sätt att kringgå problemet - händelsedelegering. Låt oss analysera det.

Som du redan vet, när vi klickar på ett li, klickar vi samtidigt även på ul. Detta är möjligt tack vare event bubbling (händelseuppstegring). Vi kan använda detta för att lösa vår uppgift: vi sätter händelsen inte på varje li, utan på deras förälder ul:

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

Nu i händelsehanteraren kommer this att peka på elementet som hanteraren är bunden till, och event.target - på elementet, där händelsen inträffade:

list.addEventListener('click', function(event) {
	console.log(this);         // vår lista
	console.log(event.target); // listobjekt
});

Låt oss göra så att li, på vilken klicket skedde, får ett utropstecken tillagt i slutet:

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

Upprepa den presenterade lösningen. Försäkra dig om, att nya li också kommer att reagera på klick.