Event Delegation i JavaScript

I den forrige lektion blev problemet beskrevet, der opstår, når nye elementer tilføjes, og dens løsning blev præsenteret. I denne lektion vil vi overveje en bedre måde at omgå problemet på - event delegation. Lad os analysere det.

Som du allerede ved, ved at klikke på li, klikker vi samtidig også på ul. Dette er muligt takket være event bubbling. Vi kan bruge dette til at løse vores opgave: vi tilføjer eventet ikke til hver enkelt li, men til deres forælder ul:

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

Nu i event handleren vil this pege på det element, som handleren er bundet til, og event.target - på elementet, hvor eventet fandt sted:

list.addEventListener('click', function(event) {
	console.log(this);         // vores liste
	console.log(event.target); // listepunkt
});

Lad os sørge for, at li, som der blev klikket på, får tilføjet et udråbstegn til slut:

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

Gentag den præsenterede løsning. Vær sikker på, at nye li også vil reagere på klik.