Sündmuste delegeerimine JavaScriptis

Eelmises õppetükis kirjeldati probleemi, mis tekib uute elementide lisamisel, ja toodi selle lahendus. Selles õppetükis me vaatleme probleemi ületamiseks sobivamat viisi - sündmuste delegeerimine. Võtame selle lahti.

Nagu te juba teate, klõpsates li peal, me klõpsame samal ajal ka ul peal. See on võimalik tänu sündmuste pealekerkimisele. Me võime seda kasutada oma ülesande lahendamiseks: paneme sündmuse mitte iga li peale, vaid nende vanemale ul:

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

Nüüd sündmuse töötlejas this viitab elemendile, kuhu töötleja on seotud, ja event.target - elemendile, milles sündmus toimus:

list.addEventListener('click', function(event) {
	console.log(this);         // meie loend
	console.log(event.target); // loendi punkt
});

Teeme nii, et li, mille peal toimus klõps, lõppu lisatakse hüüumärk:

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

Korrake toodud lahendust. Veenduge, et ka uued li reageerivad klõpsule.