JavaScript Academy · Lezione

Eventi personalizzati

Crei e distribuisca i propri eventi.

Eventi personalizzati è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 4 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.

Oltre gli eventi integrati

Il DOM consente di creare e inviare eventi personalizzati con CustomEvent. Questo disaccoppia le parti dell'app: un componente annuncia che è accaduto qualcosa e gli altri ascoltano senza un riferimento diretto.

Creare un CustomEvent

Ne costruisca uno con new CustomEvent(name, options). Il nome può essere una stringa qualsiasi scelta da Lei.

const evt = new CustomEvent("cart:add");
console.log(evt.type); // "cart:add"

Inviare l'evento

Invii l'evento a un target con dispatchEvent. Viene eseguito qualsiasi listener registrato per quel nome sul target o su un antenato, se l'evento fa bubbling.

element.dispatchEvent(new CustomEvent("cart:add"));

Ascoltare l'evento

Ascolti l'evento esattamente come un evento nativo, usando addEventListener con il nome personalizzato.

element.addEventListener("cart:add", () => {
  console.log("Something was added to the cart");
});

Passare dati con detail

Alleghi un payload tramite la proprietà detail. I listener lo leggono da event.detail.

const evt = new CustomEvent("cart:add", {
  detail: { id: 42, qty: 2 }
});
element.dispatchEvent(evt);

Leggere il payload

All'interno del listener, event.detail contiene tutto ciò che è stato passato. Può essere qualsiasi valore: un oggetto, un array, una stringa o un numero.

element.addEventListener("cart:add", (e) => {
  console.log(e.detail.id, e.detail.qty); // 42 2
});

Far fare bubbling all'evento

Per impostazione predefinita, gli eventi personalizzati NON fanno bubbling. Imposti bubbles: true affinché gli antenati e i listener delegati possano intercettarli.

const evt = new CustomEvent("cart:add", {
  bubbles: true,
  detail: { id: 42 }
});
child.dispatchEvent(evt); // parents can now listen

L'opzione cancelable

Imposti cancelable: true per consentire ai listener di chiamare preventDefault(). Il dispatcher controlla il valore restituito da dispatchEvent per verificare se l'evento è stato annullato.

const evt = new CustomEvent("form:submit", { cancelable: true });
const proceed = form.dispatchEvent(evt);
if (proceed) actuallySubmit();

Un modello di disaccoppiamento

Gli eventi personalizzati consentono ai moduli di comunicare senza importarsi a vicenda. Un logger o un livello di analisi può ascoltare su document gli eventi dell'applicazione.

document.addEventListener("user:login", (e) => {
  analytics.track("login", e.detail.userId);
});
document.dispatchEvent(
  new CustomEvent("user:login", { detail: { userId: 7 } })
);

Convenzioni per i nomi

Usi uno spazio dei nomi per i nomi degli eventi, come cart:add e user:login, per evitare conflitti con gli eventi nativi e raggruppare chiaramente gli eventi correlati.

Sintassi vecchia e nuova

Nel codice meno recente potrebbe vedere l'API legacy document.createEvent. Preferisca il costruttore moderno new CustomEvent(...): è più semplice ed è l'unica forma che dovrebbe scrivere oggi.

const evt = new CustomEvent("ready", { detail: 1 });

Verifica rapida

Verifica delle conoscenze sugli eventi personalizzati.

Riepilogo

Usi new CustomEvent(name, { detail, bubbles, cancelable }) e dispatchEvent per creare i propri eventi. Legga il payload tramite event.detail, attivi il bubbling per la delega e usi cancelable per le azioni annullabili. Gli eventi personalizzati disaccoppiano i componenti secondo un modello pulito di pubblicazione e sottoscrizione.

Domande Frequenti

La lezione «Eventi personalizzati» è gratuita?

Sì — il testo completo di «Eventi personalizzati» è 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 «Eventi personalizzati»?

Crei e distribuisca i propri eventi. 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 4 di 4.

Quanto tempo richiede la lezione «Eventi personalizzati»?

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