Что такое CustomEvent? Когда его используют?

Что такое CustomEvent?

CustomEvent — это стандартный интерфейс браузера, который расширяет базовый Event и позволяет разработчику создавать события с произвольным именем и передавать с ними произвольные данные через свойство detail. Это мощный инструмент для реализации паттерна «наблюдатель» (Observer) в веб-приложениях, когда один компонент хочет уведомить другие о каком-либо действии, не создавая жёсткой связанности между ними.

Как это работает?

Для создания пользовательского события используется конструктор new CustomEvent(type, options), где type — строка с именем события, а options — объект, который может содержать поля bubbles, cancelable и detail. Поле detail — это любые данные, которые вы хотите передать вместе с событием. Затем событие отправляется на целевой элемент с помощью метода dispatchEvent(). Любой слушатель, подписанный на это имя события на данном элементе или его предках (если bubbles: true), получит уведомление.

Пример кода

// Создаём пользовательское событие с данными
const event = new CustomEvent('userLogin', {
  detail: { username: 'john_doe', timestamp: Date.now() },
  bubbles: true,
  cancelable: true
});

// Отправляем событие на документ
document.dispatchEvent(event);

// Где-то в другом месте подписываемся
document.addEventListener('userLogin', (e) => {
  console.log('Пользователь вошёл:', e.detail.username);
});

Когда это применяется?

CustomEvent особенно полезен в архитектурах, где компоненты должны общаться без прямой зависимости друг от друга. Например, в микрофронтендах, когда разные части приложения работают в изолированных контейнерах, или в простых SPA без использования глобального стейт-менеджера. Также это стандартный способ для веб-компонентов (Web Components) сообщать о своих внутренних изменениях внешнему миру.

Вывод: CustomEvent — это лёгкий и нативный способ реализовать слабосвязанную коммуникацию между частями приложения. Его стоит применять, когда нужно передать событие между независимыми модулями или компонентами, избегая прямых вызовов и зависимостей, особенно в контексте веб-компонентов или микрофронтендов.