Кастомные события

В JavaScript можно создавать собственные события. Осуществляется это с помощью конструктора Event или CustomEvent.

Отличаются данные конструкторы тем, что в CustomEvent можно указывать дополнительные данные detail для передачи их в событие.

Event

Синтаксис 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)
});