Berkomunikasi dengan Peristiwa DOM Khusus
Pelajari cara menggunakan API CustomEvent bawaan peramban sebagai saluran komunikasi ringan yang independen dari kerangka kerja antarmicro frontend.
Berkomunikasi dengan Peristiwa DOM Khusus adalah pelajaran Micro Frontends Architecture with Module Federation gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Micro Frontends Architecture with Module Federation, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Micro Frontends Architecture with Module Federation mencakup 4 pelajaran total.
Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.
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.
Belajar JavaScript dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 12
- Pelajaran
- 48
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Berkomunikasi dengan Peristiwa DOM Khusus” gratis?
Ya — teks lengkap “Berkomunikasi dengan Peristiwa DOM Khusus” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Micro Frontends Architecture with Module Federation, upgrade ke CoddyKit PRO. Kursus Micro Frontends Architecture with Module Federation mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Berkomunikasi dengan Peristiwa DOM Khusus”?
Pelajari cara menggunakan API CustomEvent bawaan peramban sebagai saluran komunikasi ringan yang independen dari kerangka kerja antarmicro frontend. Kamu berlatih Micro Frontends Architecture with Module Federation dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Micro Frontends Architecture with Module Federation?
Tidak diperlukan pengalaman sebelumnya. Micro Frontends Architecture with Module Federation di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Berkomunikasi dengan Peristiwa DOM Khusus” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Micro Frontends Architecture with Module Federation ini?
Ya. Setiap pelajaran Micro Frontends Architecture with Module Federation menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Bus Peristiwa untuk Komunikasi Antar-Aplikasi
- Pengelolaan Status Bersama
- Solusi Komunikasi Khusus
- Berkomunikasi dengan Peristiwa DOM Khusus