Обмен данными с помощью пользовательских событий DOM
Научитесь использовать встроенный в браузер API CustomEvent как лёгкий, независимый от фреймворка канал связи между микрофронтендами.
«Обмен данными с помощью пользовательских событий DOM» — бесплатный урок Micro Frontends Architecture with Module Federation на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Micro Frontends Architecture with Module Federation, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Micro Frontends Architecture with Module Federation содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
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.
Изучай JavaScript с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 12
- Уроки
- 48
Часто задаваемые вопросы
Урок «Обмен данными с помощью пользовательских событий DOM» бесплатный?
Да — полный текст урока «Обмен данными с помощью пользовательских событий DOM» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Micro Frontends Architecture with Module Federation, подпишись на CoddyKit PRO. Курс Micro Frontends Architecture with Module Federation содержит 4 уроков всего.
Чему я научусь в уроке «Обмен данными с помощью пользовательских событий DOM»?
Научитесь использовать встроенный в браузер API CustomEvent как лёгкий, независимый от фреймворка канал связи между микрофронтендами. Ты практикуешь Micro Frontends Architecture with Module Federation с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Micro Frontends Architecture with Module Federation?
Предыдущий опыт не требуется. Micro Frontends Architecture with Module Federation на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Обмен данными с помощью пользовательских событий DOM»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Micro Frontends Architecture with Module Federation?
Да. Каждый урок Micro Frontends Architecture with Module Federation включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Шина событий для взаимодействия между приложениями
- Управление общим состоянием
- Пользовательские решения для взаимодействия
- Обмен данными с помощью пользовательских событий DOM