Delegering av hendelser i JavaScript

I forrige leksjon ble et problem beskrevet, som oppstår når nye elementer legges til, og løsningen ble presentert. I denne leksjonen vil vi se på en bedre måte å omgå problemet på - delegering av hendelser. La oss analysere det.

Som du allerede vet, når vi klikker på en li, klikker vi samtidig også på ul. Dette er mulig takket være hendelsesbobling. Vi kan bruke dette til å løse vår oppgave: vi legger ikke hendelsen til hver enkelt li, men på deres forelder ul:

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

Nå vil this i hendelseshåndtereren peke på elementet som hendelsen er bundet til, og event.target vil peke på elementet der hendelsen inntraff:

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

La oss gjøre slik at li som det ble klikket på, får et utropstegn lagt til på slutten:

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

Gjenta den presenterte løsningen. Forsikre deg om at nye li også vil reagere på klikk.