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)
});