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