Comunicare con eventi DOM personalizzati
Impari a usare l’API nativa del browser CustomEvent come canale di comunicazione leggero e indipendente dal framework tra micro frontend.
Comunicare con eventi DOM personalizzati è una lezione Micro Frontends Architecture with Module Federation 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 Micro Frontends Architecture with Module Federation, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Micro Frontends Architecture with Module Federation include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
Why Native Events?
The browser already has a built-in pub/sub system: the DOM event model. Using it for MFE communication needs no library and works across any framework.
The CustomEvent API
CustomEvent lets you create your own named events carrying a detail payload, dispatched on any DOM element including window.
const evt = new CustomEvent("cart:add", {
detail: { productId: 42, qty: 1 }
});Dispatching an Event
Any micro frontend can broadcast an event on a shared target such as window. Others do not need a direct reference to the sender.
window.dispatchEvent(new CustomEvent("cart:add", {
detail: { productId: 42 }
}));Listening for Events
A consuming MFE subscribes with addEventListener and reads the payload from event.detail.
window.addEventListener("cart:add", (e) => {
updateCart(e.detail.productId);
});Naming Conventions
Namespace event names to avoid collisions, for example cart:add or auth:login. A shared naming convention is part of your communication contract.
Cleaning Up Listeners
When a micro frontend unmounts, remove its listeners to prevent memory leaks and duplicate handling.
const handler = (e) => updateCart(e.detail);
window.addEventListener("cart:add", handler);
// on unmount:
window.removeEventListener("cart:add", handler);Two-Way Communication
For request/response style flows, one MFE dispatches a request event and another replies with a separate response event, keeping each direction explicit.
window.dispatchEvent(new CustomEvent("user:request"));
window.addEventListener("user:response", e => show(e.detail));Strengths of DOM Events
Native events are appealing because they are:
- Framework-agnostic
- Zero-dependency
- Familiar to all web developers
- Naturally decoupled (no shared references)
Limitations to Know
They also have downsides:
- No type safety on
detail - Easy to misspell event names
- Hard to trace who listens to what
- Not ideal for large or frequent payloads
Wrapping Events in a Typed Helper
To reduce mistakes, wrap dispatch and listen in a small typed module shared across MFEs, centralizing event names and payload shapes.
export function emit(name, detail) {
window.dispatchEvent(new CustomEvent(name, { detail }));
}When to Choose This Pattern
Custom DOM events shine for simple, occasional notifications between loosely coupled MFEs. For complex shared data, prefer a dedicated event bus or shared store.
Quick Check
Test your custom-event knowledge.
Recap
You learned native event communication:
CustomEventcarries data indetail- Dispatch on
window; listen withaddEventListener - Namespace names and clean up listeners
- Great for simple, decoupled notifications
- Wrap in a typed helper to avoid mistakes
DOM events are a zero-dependency MFE channel.
Impara JavaScript con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 12
- Lezioni
- 48
Domande Frequenti
La lezione «Comunicare con eventi DOM personalizzati» è gratuita?
Sì — il testo completo di «Comunicare con eventi DOM 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 Micro Frontends Architecture with Module Federation, passa a CoddyKit PRO. Il corso Micro Frontends Architecture with Module Federation include 4 lezioni in totale.
Cosa imparerò in «Comunicare con eventi DOM personalizzati»?
Impari a usare l’API nativa del browser CustomEvent come canale di comunicazione leggero e indipendente dal framework tra micro frontend. Eserciti Micro Frontends Architecture with Module Federation 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 Micro Frontends Architecture with Module Federation?
Non è richiesta alcuna esperienza precedente. Micro Frontends Architecture with Module Federation 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 «Comunicare con eventi DOM 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 Micro Frontends Architecture with Module Federation?
Sì. Ogni lezione Micro Frontends Architecture with Module Federation 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
- Event bus per la comunicazione tra app
- Gestione dello stato condiviso
- Soluzioni di comunicazione personalizzate
- Comunicare con eventi DOM personalizzati