Как можно создать и инициировать пользовательское событие в JavaScript?

Question

В JavaScript можно создать пользовательское событие с помощью конструктора CustomEvent. Это событие можно инициировать с помощью метода dispatchEvent(). Пользовательские события полезны, когда нужно сигнализировать о каком-то действии или изменении состояния, которое не связано с встроенными событиями браузера.

YeaHub · Accepted Answer

Пользовательские события в JavaScript создаются с помощью объекта CustomEvent. Это позволяет разработчикам создавать свои собственные события и передавать кастомные данные через них. Для инициирования события используется метод dispatchEvent(), который запускает событие на указанном элементе.Пример создания и инициирования пользовательского события:// Создаем пользовательское событие 
const myEvent = new CustomEvent('myCustomEvent', {
	detail: { message: 'Пользовательское событие запущено' } 
}); 
// Элемент, на котором будет запущено событие 
const element = document.querySelector('.myElement'); // Добавляем обработчик события 
element.addEventListener('myCustomEvent', function(event) {
	console.log(event.detail.message); // 'Пользовательское событие запущено' 
}); 
// Инициируем событие 
element.dispatchEvent(myEvent);В этом примере создается пользовательское событие с именем 'myCustomEvent', которое передает дополнительные данные через объект detail. Событие обрабатывается на указанном элементе с помощью обычного обработчика событий.Пользовательские события полезны для создания собственного взаимодействия между компонентами приложения, особенно в сложных интерфейсах, где требуется сигнализировать о действиях, которые не связаны с встроенными событиями браузера (например, переключение состояния в SPA-приложении).