Propagazione degli Eventi

Propagazione degli eventi descrive come un evento si muove attraverso il DOM dopo essere stato attivato, e si suddivide in tre fasi distinte: Fase di Cattura, Fase Target e Fase di Bubbling.

Fase di Cattura (Capture)

L'evento parte dalla radice dell'albero DOM (window) e si sposta verso l'elemento target. I listener di eventi in questa fase intercettano l'evento mentre si propaga verso il basso.

Fase Target

L'evento raggiunge l'elemento target (l'elemento che ha attivato l'evento). Qui vengono eseguiti i listener di eventi associati direttamente all'elemento target.

Fase di Bubbling (Bubble)

Dopo aver raggiunto l'elemento target, l'evento inizia a risalire l'albero DOM verso la radice (window), propagandosi attraverso gli elementi genitori. Questa è la fase più comunemente utilizzata, che consente agli elementi genitori di reagire agli eventi attivati dai figli.

L'evento si propaga attraverso il DOM quando si fa clic sul button. Prima, l'evento viene attivato sul button (fase di target), poi risale verso l'div e infine verso l'div (fase di bubbling).

Delegazione degli Eventi

La delegazione degli eventi è una tecnica che sfrutta la propagazione degli eventi per gestire gli eventi degli elementi figli utilizzando un unico event listener sull'elemento genitore. Invece di associare listener individuali a ciascun figlio, un elemento genitore ascolta gli eventi che risalgono dai suoi figli. Questo approccio presenta due principali vantaggi:

1. Prestazioni: Ridurre il numero di event listener migliora le prestazioni, soprattutto in situazioni in cui gli elementi vengono creati dinamicamente (ad esempio, una lista che cresce con l'aggiunta di nuovi elementi);
2. Manutenibilità: La delegazione degli eventi semplifica il codice, in particolare quando si lavora con strutture DOM di grandi dimensioni o contenuti dinamici.

Invece di aggiungere i listener di click a ciascun elemento button individualmente, un unico listener viene aggiunto all'elemento genitore div. L'evento si propaga dai button al div, dove viene gestito.

Approccio errato

Approccio corretto

Esempio pratico: Gestione di una lista dinamica

La delega degli eventi è ideale per gestire le interazioni in elenchi o tabelle che possono crescere nel tempo (ad esempio, aggiunta di attività a una lista di cose da fare o prodotti a un carrello). Man mano che gli elementi vengono aggiunti o rimossi, il contenitore genitore (come ul o table) gestisce tutte le interazioni, evitando la necessità di aggiungere o rimuovere listener per ogni elemento figlio.