Notikumu deleģēšana JavaScript

Iepriekšējā nodarbībā tika aprakstīta problēma, kas rodas, pievienojot jaunus elementus, un piedāvāts tās risinājums. Šajā nodarbībā mēs apskatīsim veiksmīgāku veidu, kā apiet šo problēmu - notikumu deleģēšanu. Apskatīsim to tuvāk.

Kā jūs jau zināt, noklikšķinot uz li, mēs vienlaikus noklikšķinām arī uz ul. Tas ir iespējams, pateicoties notikumu izplatīšanās (burbuļošanās) mehānismam. Mēs varam izmantot to savam uzdevumam: pievienosim notikumu nevis katram li, bet to vecākam elementam ul:

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

Tagad notikuma apstrādes funkcijā this norādīs uz elementu, kuram ir piesaistīta apstrādes funkcija, bet event.target - uz elementu, kurā notika notikums:

list.addEventListener('click', function(event) {
	console.log(this);         // mūsu saraksts
	console.log(event.target); // saraksta punkts
});

Padarīsim tā, lai li, uz kuras notika klikšķis, beigās tiktu pievienots izsaukuma zīme:

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

Atkārtojiet iepriekš minēto risinājumu. Pārliecinieties, ka arī jaunie li reaģēs uz klikšķi.