Įvykių delegavimas JavaScript

Ankstesnėje pamokoje buvo aprašyta problema, kylanči pridedant naujus elementus, ir pateiktas jos sprendimas. Šioje pamokoje mes nagrinėsime tinkamesnį problemos sprendimo būdą - įvykių delegavimą. Pažvelkime į jį.

Kaip jau žinote, spustelėdami li, mes kartu spustelime ir ul. Tai įmanoma dėka įvykių plitimo. Mes galime panaudoti tai savo uždaviniui išspręsti: priskirsime įvykį ne kiekvienai li, o jų tėviniam elementui ul:

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

Dabar įvykio apdoroklyje this rodys į elementą, prie kurio pririštas apdoroklis, o event.target - į elementą, kuriame įvyko įvykis:

list.addEventListener('click', function(event) {
	console.log(this);         // mūsų sąrašas
	console.log(event.target); // sąrašo punktas
});

Padarykime taip, kad li, ant kurios buvome paspaudę, į pabaigą būtų pridėtas šauktukas:

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

Pakartokite pateiktą sprendimą. Įsitikinkite, kad naujos li taip pat reaguos į paspaudimą.