Delegiranje dogodkov v JavaScript

V prejšnji lekciji je bil opis problem, ki se pojavi pri dodajanju novih elementov, in predstavljena njegova rešitev. V tej lekciji bomo obravnavali boljšo metodo za obvod problema - delegiranje dogodkov. Oglejmo si ga.

Kot že veste, s klikom na li, hkrati kliknemo tudi na ul. To je mogoče zaradi bubble-up (širjenja) dogodkov. To lahko uporabimo za rešitev naše naloge: dogodek ne dodamo vsaki li, ampak njihovemu starševskemu elementu ul:

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

Sedaj bo v obravnavavcu dogodka this kazal na element, na katerega je vezan obravnavavec, event.target pa - na element, v katerem se je dogodek zgodil:

list.addEventListener('click', function(event) {
	console.log(this);         // naš seznam
	console.log(event.target); // element seznama
});

Naredimo tako, da se li, na kateri se je zgodil klik, na konec doda klicaj:

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

Ponovite predstavljeno rešitev. Prepričajte se, da bodo na klik odgovarjale tudi nove li.