JavaScript Academy · Lezione

preventDefault e stopPropagation

Controlli il comportamento predefinito e il bubbling.

preventDefault e stopPropagation è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 3 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.

Controllare il comportamento degli eventi

Due meccanismi consentono di controllare gli eventi: interrompere l'azione predefinita del browser e impedire all'evento di propagarsi nel DOM.

Azioni predefinite

Molti elementi hanno comportamenti predefiniti integrati: i link eseguono la navigazione, l'invio di un modulo ricarica la pagina e le caselle di controllo cambiano stato. Queste azioni avvengono finché non interviene.

preventDefault

event.preventDefault annulla l'azione predefinita del browser, consentendo comunque l'esecuzione del gestore.

link.addEventListener("click", (e) => {
  e.preventDefault(); // stop navigation
  console.log("handled in JS");
});

preventDefault nei moduli

Un uso comune consiste nell'impedire al modulo di ricaricare la pagina, così da poter gestire l'invio con JavaScript.

form.addEventListener("submit", (e) => {
  e.preventDefault();
  // send data via fetch instead
});

Propagazione degli eventi

Dopo aver raggiunto la destinazione, gli eventi fanno bubble verso l'alto attraverso gli antenati, attivando i loro listener. Per questo un clic su un elemento figlio può eseguire il gestore del genitore.

stopPropagation

event.stopPropagation impedisce all'evento di proseguire verso gli antenati. Il gestore corrente completa comunque la propria esecuzione.

child.addEventListener("click", (e) => {
  e.stopPropagation(); // parent listeners will not fire
});

preventDefault e stopPropagation a confronto

Sono indipendenti. preventDefault annulla l'azione del browser, mentre stopPropagation impedisce la propagazione verso altri elementi. Può utilizzarli singolarmente, entrambi oppure nessuno dei due.

e.preventDefault();   // no default action
e.stopPropagation();  // no bubbling

Altri listener sullo stesso elemento

stopPropagation NON impedisce l'esecuzione degli altri listener sullo stesso elemento. Questi vengono comunque attivati.

el.addEventListener("click", (e) => e.stopPropagation());
el.addEventListener("click", () => console.log("still runs"));

stopImmediatePropagation

stopImmediatePropagation va oltre: interrompe il bubbling E impedisce l'esecuzione degli eventuali listener rimanenti sullo stesso elemento.

el.addEventListener("click", (e) => e.stopImmediatePropagation());
el.addEventListener("click", () => console.log("does NOT run"));

defaultPrevented

Può controllare event.defaultPrevented per verificare se un gestore precedente ha già chiamato preventDefault.

el.addEventListener("click", (e) => {
  console.log(e.defaultPrevented);
});

Da usare con parsimonia

Interrompere la propagazione può compromettere la delega degli eventi in altre parti della pagina. Lo utilizzi solo quando è realmente necessario e valuti alternative compatibili con la delega.

Verifica rapida

Scelga il metodo corretto.

Riepilogo

preventDefault annulla l'azione predefinita del browser (navigazione, invio e così via). stopPropagation impedisce all'evento di risalire verso gli antenati, mentre stopImmediatePropagation blocca anche gli altri listener sullo stesso elemento. Sono strumenti indipendenti; utilizzi con parsimonia i metodi che interrompono la propagazione per evitare di compromettere la delega.

Domande Frequenti

La lezione «preventDefault e stopPropagation» è gratuita?

Sì — il testo completo di «preventDefault e stopPropagation» è 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 «preventDefault e stopPropagation»?

Controlli il comportamento predefinito e il bubbling. 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 3 di 4.

Quanto tempo richiede la lezione «preventDefault e stopPropagation»?

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