Как создать и вызвать пользовательское событие в JavaScript?

Создание и вызов пользовательского события в JavaScript

• Использование API CustomEvent для создания собственных событий
• Конструктор: new CustomEvent('eventName', { detail: {...}, bubbles: true/false, cancelable: true/false })
• Метод dispatchEvent() запускает событие на выбранном элементе
• Через detail слушателям передаются дополнительные данные
• Подходит для взаимодействия компонентов без прямого использования DOM-слушателей
• Применяется в собственной логике и при расширении стандартной событийной модели
• Поддерживается большинством актуальных браузеров

Пример кода:

const event = new CustomEvent('myEvent', { detail: { key: 'value' }, bubbles: true });
element.dispatchEvent(event);

В результате создаётся и вызывается пользовательское событие, которому передаются данные и задаётся возможность всплытия.

Подробный ответ

Основной ответ

В JavaScript пользовательское событие создают и вызывают с помощью объекта CustomEvent. Он позволяет задать собственное имя события и вложить в него дополнительные сведения. Затем созданное событие можно «вызвать», или «диспетчеризовать», на нужном DOM-элементе через метод dispatchEvent. Такой подход удобно использовать для обмена данными между компонентами и отслеживания особых действий.

Ключевые моменты

• Создание события: используется конструкция new CustomEvent(eventName, { detail: { ...data }, bubbles: true/false, cancelable: true/false }). Полезная нагрузка передаётся через параметр detail.
• Вызов события: выражение element.dispatchEvent(customEvent) активирует событие в DOM, после чего его обработчики могут выполнить нужную реакцию.
• Параметры события: свойство bubbles определяет, распространяется ли событие вверх по дереву DOM, а cancelable указывает, допускается ли отмена стандартного поведения.

Практический контекст

Распространённый вариант использования — событие user:login, содержащее сведения о пользователе и обрабатываемое UI-компонентом для обновления состояния. Например, в приложении на React при необходимости взаимодействия с нативным DOM объект CustomEvent помогает организовать нестандартный обмен данными без сторонних библиотек. При этом следует учитывать поддержку браузерами: в современных Chrome, Firefox, Edge и Safari данный API поддерживается полностью, тогда как для IE11 может потребоваться полифилл.