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:

javascriptlist.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:

javascriptlist.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:

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