Tapahtumien delegointi JavaScriptissä

Edellisessä oppitunnissa kuvattiin ongelma, joka syntyy uusia elementtejä lisättäessä, ja esitettiin sen ratkaisu. Tässä oppitunnissa tarkastelemme parempaa tapaa kiertää ongelma - tapahtumien delegointi. Katsotaanpa sitä lähemmin.

Kuten jo tiedät, napsauttamalla li:tä, me samanaikaisesti napsautamme myös ul:ta. Tämä on mahdollista tapahtumien kuplimisen ansiosta. Voimme hyödyntää tätä tehtävämme ratkaisemisessa: kiinnitämme tapahtuman jokaiseen li:hin, vaan niiden vanhempaan ul:hin:

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

Nyt tapahtumankäsittelijässä this viittaa elementtiin, johon käsittelijä on sidottu, ja event.target - elementtiin, jossa tapahtuma sattui:

list.addEventListener('click', function(event) {
	console.log(this);         // listamme
	console.log(event.target); // listan kohde
});

Tehdään niin, että li, johon napsautus tapahtui, lisää loppuun huutomerkin:

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

Toista esitetty ratkaisu. Varmista, että myös uudet li:t reagoivat napsautukseen.