Gebeurtenisdelegatie in JavaScript

In de vorige les werd het probleem beschreven, dat optreedt bij het toevoegen van nieuwe elementen, en de oplossing ervan gegeven. In deze les zullen we een betere manier bekijken om het probleem te omzeilen - gebeurtenisdelegatie. Laten we het uitzoeken.

Zoals je al weet, klikken we op li, we klikken tegelijkertijd ook op ul. Dit is mogelijk dankzij het opborrelen van gebeurtenissen. We kunnen dit gebruiken om onze taak op te lossen: we hangen de gebeurtenis niet aan elke li, maar aan hun ouder ul:

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

Nu in de gebeurtenishandler zal this verwijzen naar het element waaraan de handler is gekoppeld, en event.target - naar het element, waarin de gebeurtenis plaatsvond:

list.addEventListener('click', function(event) {
	console.log(this);         // onze lijst
	console.log(event.target); // lijstitem
});

Laten we ervoor zorgen dat de li waarop geklikt werd, een uitroepteken aan het einde toevoegt:

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

Herhaal de gegeven oplossing. Zorg ervoor dat de nieuwe li ook op de klik zullen reageren.