0Pricing
Micro Frontends Architecture with Module Federation · Lektion

Mit benutzerdefinierten DOM-Events kommunizieren

Lernen Sie, die native CustomEvent-API des Browsers als leichtgewichtigen, frameworkunabhängigen Kommunikationskanal zwischen Micro Frontends einzusetzen.

Mit benutzerdefinierten DOM-Events kommunizieren ist eine kostenlose Micro Frontends Architecture with Module Federation-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Micro Frontends Architecture with Module Federation-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Micro Frontends Architecture with Module Federation-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

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:

  • CustomEvent carries data in detail
  • Dispatch on window; listen with addEventListener
  • 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.

Häufig gestellte Fragen

Ist die Lektion „Mit benutzerdefinierten DOM-Events kommunizieren“ kostenlos?

Ja — der vollständige Text von „Mit benutzerdefinierten DOM-Events kommunizieren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Micro Frontends Architecture with Module Federation-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Micro Frontends Architecture with Module Federation-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Mit benutzerdefinierten DOM-Events kommunizieren“?

Lernen Sie, die native CustomEvent-API des Browsers als leichtgewichtigen, frameworkunabhängigen Kommunikationskanal zwischen Micro Frontends einzusetzen. Du übst Micro Frontends Architecture with Module Federation mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Micro Frontends Architecture with Module Federation zu starten?

Keine Vorkenntnisse erforderlich. Micro Frontends Architecture with Module Federation auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Mit benutzerdefinierten DOM-Events kommunizieren“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Micro Frontends Architecture with Module Federation-Lektion Code schreiben und ausführen?

Ja. Jede Micro Frontends Architecture with Module Federation-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Event Bus für anwendungsübergreifende Kommunikation
  2. Verwaltung des gemeinsamen Zustands
  3. Individuelle Kommunikationslösungen
  4. Mit benutzerdefinierten DOM-Events kommunizieren
← Zurück zu Micro Frontends Architecture with Module Federation