JavaScript - Создание кастомных событий

В этой статье познакомимся с событиями, а также рассмотрим какие они бывают, а также как выполнять некоторый код (сценарий) при их наступлении.
Создание кастомных событий
В JavaScript можно создавать собственные события. Осуществляется это с помощью конструктора Event
или CustomEvent
.
Отличаются данные конструкторы тем, что в последнем (CustomEvent
) можно указывать дополнительные данные (detail
) для передачи их в событие.
Синтаксис Event
:
const event = new Event(type [, options]);
Параметры Event
:
type
– имя события;options
- объект, в котором можно определить некоторые важные свойства, относящиеся к событию.
В options
можно настроить:
bubbles
– определяет, должно ли событие всплывать (true/false);cancelable
– указывает, можно ли отменить действие по умолчанию (true/false);composed
– определяет, должно ли событие всплывать наружу за пределы теневого DOM (true/false).
Все эти параметры в options
по умолчанию имеют значения false
.
Например, создадим пользовательское событие start
:
const event = new Event('start');
После того как событие создано его нужно вызвать. Осуществляется это посредством метода dispatchEvent
.
Синтаксис метода dispatchEvent
:
$element – объект, для которого необходимо вызвать событие event $element.dispatchEvent(event);
Например, вызовем событие start
для document
:
// создаём событие const event = new Event('start'); // вызываем событие document.dispatchEvent(event);
Когда событие происходит срабатывает соответствующий обработчик:
document.addEventListener('start', e => { console.log('Обработка события start на document!'); });
Конструктор CustomEvent
Если при создании события к нему нужно добавить некоторые данные, то в этом случае лучше воспользоваться CustomEvent
.
По сути, CustomEvent отличается от Event
только тем, что в нём во втором аргументе имеется дополнительное поле detail
. Оно предназначено для передачи в событие любых данных.
Например, создадим кастомное событие start
, которое будет добавлять к нему пользовательские данные:
<div id="box"></div> <script> const box = document.querySelector('#box'); window.setInterval(function() { const event = new CustomEvent('changeColor', { detail: { color: 'white' } }); box.dispatchEvent(event); }, 5000); </script>
Добавим обработчик события changeColor в котором пользовательские данные будем получать, используя e.detail:
box.addEventListener('changeColor', (e) => function () { console.log(E.detail.color); });
Добавить к объекту события пользовательских данных можно с помощью CustomEvent
.
Синтаксис CustomEvent
:
const event = new CustomEvent(event, CustomEventInit);
Добавление данных осуществляется через дополнительное свойство detail
.
Например:
const anotherEvent = new CustomEvent('start', { detail: { color: 'white' } })
Используя CustomEvent в прослушивателе событий вы можете запросить данные для объекта события, используя event.detail (вы не можете использовать другое свойство):
document.addEventListener('start', event => { console.log('started!') console.log(event.detail) });
Комментарии: 0