Comunicação com Eventos Personalizados do DOM
Aprenda a usar a API nativa CustomEvent do navegador como um canal de comunicação leve e independente de framework entre microfrontends.
Comunicação com Eventos Personalizados do DOM é uma aula grátis de Micro Frontends Architecture with Module Federation no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Micro Frontends Architecture with Module Federation, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Micro Frontends Architecture with Module Federation inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em inglês.
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.
Aprenda JavaScript com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 12
- Aulas
- 48
Perguntas Frequentes
A aula “Comunicação com Eventos Personalizados do DOM” é grátis?
Sim — o texto completo de “Comunicação com Eventos Personalizados do DOM” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Micro Frontends Architecture with Module Federation, atualize para CoddyKit PRO. O curso de Micro Frontends Architecture with Module Federation inclui 4 aulas no total.
O que vou aprender em “Comunicação com Eventos Personalizados do DOM”?
Aprenda a usar a API nativa CustomEvent do navegador como um canal de comunicação leve e independente de framework entre microfrontends. Você pratica Micro Frontends Architecture with Module Federation com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Micro Frontends Architecture with Module Federation?
Nenhuma experiência prévia é necessária. Micro Frontends Architecture with Module Federation no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Comunicação com Eventos Personalizados do DOM”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Micro Frontends Architecture with Module Federation?
Sim. Cada aula de Micro Frontends Architecture with Module Federation inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Barramento de eventos para comunicação entre aplicações
- Gerenciamento de estado compartilhado
- Soluções de comunicação personalizadas
- Comunicação com Eventos Personalizados do DOM