JavaScript Academy · Lezione

Le fasi di capture e bubble

Comprenda come gli eventi attraversano il DOM.

Le fasi di capture e bubble è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

Due passaggi nel DOM

Quando si fa clic su un elemento, l'evento non si attiva soltanto su quell'elemento. Attraversa l'albero DOM in due fasi: la fase di cattura (dall'alto verso il basso, da document alla destinazione) e la fase di bubbling (dal basso verso l'alto, dalla destinazione a document).

<div id="outer">
  <button id="inner">Click</button>
</div>

Il comportamento predefinito: bubbling

Per impostazione predefinita, addEventListener ascolta durante la fase di bubbling. Un clic sul pulsante interno attiva prima il relativo gestore, poi quello sul genitore, quindi quello sul nonno e così via fino a document.

inner.addEventListener("click", () => console.log("inner"));
outer.addEventListener("click", () => console.log("outer"));
// Click inner -> logs: "inner" then "outer"

Attivare la cattura

Passi un terzo argomento true (oppure { capture: true }) per ascoltare invece durante la fase di cattura. I gestori di cattura vengono eseguiti dall'alto verso il basso, prima di qualsiasi gestore di bubbling.

outer.addEventListener("click", () => console.log("outer capture"), true);
inner.addEventListener("click", () => console.log("inner bubble"));
// Click inner -> "outer capture" then "inner bubble"

L'ordine completo

Per un clic su #inner con gestori in entrambe le fasi, l'ordine è: fase di cattura dall'alto verso il basso, quindi la destinazione e infine fase di bubbling dal basso verso l'alto.

cattura su document
cattura su outer
inner (destinazione)
bubbling su outer
bubbling su document

event.target e event.currentTarget

event.target è l'elemento che ha effettivamente attivato l'evento, cioè quello su cui si è verificato il clic. event.currentTarget è l'elemento il cui listener è attualmente in esecuzione. In un gestore su un genitore durante il bubbling, questi elementi sono diversi.

outer.addEventListener("click", (e) => {
  console.log(e.target.id);        // "inner" - where click occurred
  console.log(e.currentTarget.id); // "outer" - listener owner
});

Interrompere la propagazione

event.stopPropagation() interrompe il percorso: l'evento non proseguirà verso l'elemento successivo nella fase corrente. I gestori dei genitori più in alto nell'albero non verranno eseguiti.

inner.addEventListener("click", (e) => {
  e.stopPropagation();
  console.log("handled here only");
});
outer.addEventListener("click", () => console.log("never runs"));

stopImmediatePropagation

stopPropagation() consente comunque l'esecuzione degli altri listener sullo stesso elemento. Per bloccare anche i listener sullo stesso elemento, usi event.stopImmediatePropagation().

inner.addEventListener("click", (e) => {
  e.stopImmediatePropagation();
  console.log("first only");
});
inner.addEventListener("click", () => console.log("blocked"));

preventDefault è diverso

Non confonda preventDefault() con stopPropagation(). preventDefault() annulla l'azione predefinita del browser (seguire un link, inviare un modulo), ma NON impedisce all'evento di propagarsi verso l'alto.

link.addEventListener("click", (e) => {
  e.preventDefault();  // do not navigate
  // event still bubbles to parents
});

Perché la fase di cattura è rara

La maggior parte del codice usa il bubbling perché corrisponde all'intuizione: prima reagisce l'elemento specifico, poi i contenitori ne vengono a conoscenza. La cattura è utile quando un elemento genitore deve intercettare o annullare un evento prima che lo vedano gli elementi figli.

Verificare la fase

event.eventPhase indica quale fase è attiva: 1 cattura, 2 sul target, 3 bubbling. Raramente è necessario, ma aiuta durante il debug di catene complesse di listener.

el.addEventListener("click", (e) => {
  console.log(e.eventPhase); // 1, 2, or 3
}, true);

Non tutti gli eventi fanno bubbling

La maggior parte degli eventi dell'interfaccia utente (click, input, keydown) fa bubbling. Alcuni non lo fanno per impostazione predefinita, come focus, blur e mouseenter. Per questi, usi le varianti che supportano il bubbling (focusin, focusout) oppure la fase di cattura.

Verifica rapida

Verifichi la comprensione delle fasi degli eventi.

Riepilogo

Gli eventi attraversano la fase di cattura (verso il basso), poi quella di bubbling (verso l'alto). Per impostazione predefinita, i listener usano il bubbling; passi true per usare la cattura. e.target è l'origine, mentre e.currentTarget è l'elemento a cui appartiene il listener. Usi stopPropagation() per interrompere la propagazione e preventDefault() per annullare le azioni predefinite. Queste due fasi sono alla base della delega degli eventi.

Domande Frequenti

La lezione «Le fasi di capture e bubble» è gratuita?

Sì — il testo completo di «Le fasi di capture e bubble» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «Le fasi di capture e bubble»?

Comprenda come gli eventi attraversano il DOM. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Le fasi di capture e bubble»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a JavaScript Academy