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:

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

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

javascriptlist.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:

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