7.1 Event Bubbling (Propagazione degli eventi)
In JavaScript, gli eventi che si verificano in un elemento possono propagarsi nel DOM. Questo processo si chiama propagazione degli eventi e include due meccanismi principali: event bubbling e event capturing.
Meccanismi di propagazione degli eventi:
- Event Bubbling (Propagazione degli eventi).
- Event Capturing (Cattura degli eventi).
La propagazione degli eventi è un processo in cui l'evento che si verifica in un elemento figlio si propaga verso l'alto nella catena dei genitori fino all'elemento radice (di solito document).
Spiegazione:
- Quando si preme il pulsante
child, per primo viene attivato l'handler sull'elementochild(Child clicked) - Poi l'evento si propaga all'elemento
parente viene attivato il suo handler (Parent clicked)
Esempio:
<!DOCTYPE html>
<html>
<head>
<title>Event Bubbling Example</title>
</head>
<body>
<div id="parent">
<button id="child">Click Me</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', function(event) {
console.log('Parent clicked');
});
child.addEventListener('click', function(event) {
console.log('Child clicked');
});
</script>
</body>
</html>
7.2 Event Capturing (Cattura degli eventi)
La cattura degli eventi è il processo in cui un evento si propaga dal nodo radice verso il basso nella catena dei genitori fino al target dell'evento.
Per utilizzare la cattura degli eventi, occorre impostare il parametro capture a true quando si aggiunge un event listener.
Spiegazione:
- Quando si preme il pulsante
child, per primo viene attivato l'handler sull'elemento parent (Parent clicked) grazie all'impostazione del parametrocaptureatrue - Poi l'evento raggiunge l'elemento target
childe viene attivato il suo handler (Child clicked)
Esempio:
<!DOCTYPE html>
<html>
<head>
<title>Event Capturing Example</title>
</head>
<body>
<div id="parent">
<button id="child">Click Me</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', function(event) {
console.log('Parent clicked');
}, true);
child.addEventListener('click', function(event) {
console.log('Child clicked');
});
</script>
</body>
</html>
7.3 Modello a tre fasi della propagazione degli eventi
Nel processo di gestione degli eventi nel DOM partecipano tre fasi:
1. Capturing Phase (Fase di cattura). L'evento si propaga dal nodo radice (di solito document) verso il basso nella catena dei genitori fino al target.
2. Target Phase (Fase del target). L'evento raggiunge l'elemento target, dove si è verificato l'evento.
3. Bubbling Phase (Fase di propagazione). L'evento si propaga dall'elemento target verso l'alto nella catena dei genitori fino al nodo radice.
Controllo della propagazione degli eventi
Esistono metodi per controllare la propagazione degli eventi:
stopPropagation(). Ferma la propagazione ulteriore dell'evento sia durante la fase di propagazione che di cattura.stopImmediatePropagation(). Ferma la propagazione ulteriore dell'evento e impedisce l'esecuzione di altri event handler sull'elemento corrente.preventDefault(). Annulla l'azione predefinita associata all'evento (ad esempio, l'invio di un modulo quando si preme un pulsante).
7.4 Esempio di utilizzo di stopPropagation
Spiegazione:
- Quando si preme il pulsante
child, viene attivato l'handler sull'elementochild(Child clicked) - La propagazione dell'evento viene fermata con
event.stopPropagation(), e l'handler sull'elemento parent non viene attivato
<!DOCTYPE html>
<html>
<head>
<title>Stop Propagation Example</title>
</head>
<body>
<div id="parent">
<button id="child">Click Me</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', function(event) {
console.log('Parent clicked');
});
child.addEventListener('click', function(event) {
console.log('Child clicked');
event.stopPropagation(); // Ferma la propagazione dell'evento
});
</script>
</body>
</html>
GO TO FULL VERSION