Delega degli eventi in JavaScript

Nella lezione precedente è stato descritto un problema che si verifica quando si aggiungono nuovi elementi, e ne è stata fornita una soluzione. In questa lezione considereremo un modo più efficace per evitare il problema - delega degli eventi. Analizziamolo.

Come già sapete, cliccando su un li, clicchiamo simultaneamente anche sul ul. Ciò è possibile grazie alla propagazione degli eventi. Possiamo utilizzare questo per risolvere il nostro compito: assegneremo l'evento non a ogni singolo li, ma al loro genitore ul:

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

Ora nel gestore dell'evento this indicherà l'elemento a cui è associato il gestore, mentre event.target - l'elemento in cui si è verificato l'evento:

list.addEventListener('click', function(event) {
	console.log(this);         // la nostra lista
	console.log(event.target); // l'elemento della lista
});

Facciamo in modo che il li su cui è avvenuto il click, aggiunga un punto esclamativo alla fine:

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

Ripetete la soluzione fornita. Assicuratevi che anche i nuovi li reagiranno al click.