Delegarea evenimentelor în JavaScript

În lecția anterioară a fost descrisă problema, care apare la adăugarea de elemente noi, și a fost prezentată soluția ei. În această lecție vom analiza o metodă mai bună de a ocoli problema - delegarea evenimentelor. S-o analizăm.

După cum știți deja, făcând click pe un li, noi facem click simultan și pe ul. Aceasta este posibil datorită propagării (bubbling) evenimentelor. Putem folosi acest lucru pentru a ne rezolva sarcina: vom atașa evenimentul nu la fiecare li, ci la părintele lor ul:

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

Acum în gestionarul (handler-ul) de evenimente this va indica elementul căruia i-a fost atașat gestionarul, iar event.target - către elementul în care a avut loc evenimentul:

list.addEventListener('click', function(event) {
	console.log(this);         // lista noastră
	console.log(event.target); // elementul listei
});

Să facem astfel încât li pe care a avut loc click-ul, să adauge la sfârșit semnul exclamației:

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

Repetați soluția prezentată. Asigurați-vă că noile li vor reacționa de asemenea la click.