Introduzione:
Nel Document Object Model (DOM), gli eventi sono utilizzati per comunicare le azioni dell’utente e le modifiche dello stato del documento. Quando si verifica un evento, come un clic del mouse o un movimento del mouse, viene attivato un gestore di eventi associato all’elemento DOM interessato.
Esistono due modalità di propagazione degli eventi nel DOM: bubbling e capturing.
Bubbling:
- È la modalità di propagazione predefinita.
- L’evento inizia dall’elemento target (l’elemento su cui si è verificata l’azione) e si propaga verso l’alto fino all’elemento radice del DOM.
- Lungo il percorso, l’evento viene catturato da tutti gli elementi antenati del target che hanno un gestore di eventi per quel tipo di evento.
Esempio:
Immaginiamo di avere una struttura HTML con un div che contiene un pulsante. Se si fa clic sul pulsante, l’evento click si propagherà prima al pulsante, poi al div e infine all’elemento body.
Capturing:
- È una modalità di propagazione opzionale.
- L’evento inizia dall’elemento radice del DOM e si propaga verso il basso fino all’elemento target.
- Lungo il percorso, l’evento viene catturato da tutti gli elementi discendenti del target che hanno un gestore di eventi per quel tipo di evento.
Esempio:
Utilizzando lo stesso esempio precedente, se si attiva la cattura per l’evento click, l’evento verrà catturato prima dall’elemento body, poi dal div e infine dal pulsante.
Quando utilizzare la cattura:
- La cattura è utile quando si desidera intercettare un evento prima che raggiunga il target.
- Ad esempio, si può utilizzare la cattura per impedire la propagazione di un evento a determinati elementi.
Differenze tra bubbling e capturing:
| Caratteristica | Bubbling | Capturing |
| Direzione di propagazione | Dall’elemento target all’elemento radice | Dall’elemento radice all’elemento target |
| Momento di cattura | Dopo che l’evento ha raggiunto il target | Prima che l’evento raggiunga il target |
| Ordine di cattura | I gestori degli eventi vengono attivati in ordine gerarchico, dal target verso l’alto | I gestori degli eventi vengono attivati in ordine inverso, dalla radice verso il basso |
Esempio di codice:
// Bubbling
document.getElementById("button").addEventListener("click", function() {
// Gestore di eventi per il pulsante
});
document.getElementById("div").addEventListener("click", function() {
// Gestore di eventi per il div
});
// Capturing
document.addEventListener("click", function(event) {
// Gestore di eventi per l'elemento body
if (event.target.id === "button") {
// Gestore di eventi specifico per il pulsante
}
}, true); // Attiva la cattura
Conclusione:
La comprensione del bubbling e del capturing degli eventi è fondamentale per creare interfacce utente interattive e responsive. La scelta di quale modalità utilizzare dipende dalle esigenze specifiche del tuo progetto.
