Навигация Содержание
Главная / JavaScript

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

11.4K
0
Содержание:
  1. Создание кастомных событий
  2. Комментарии

В этой статье познакомимся с событиями, а также рассмотрим какие они бывают, а также как выполнять некоторый код (сценарий) при их наступлении.

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

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

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

Синтаксис Event:

JavaScript
const event = new Event(type [, options]);

Параметры Event:

  • type – имя события;
  • options - объект, в котором можно определить некоторые важные свойства, относящиеся к событию.

В options можно настроить:

  • bubbles – определяет, должно ли событие всплывать (true/false);
  • cancelable – указывает, можно ли отменить действие по умолчанию (true/false);
  • composed – определяет, должно ли событие всплывать наружу за пределы теневого DOM (true/false).

Все эти параметры в options по умолчанию имеют значения false.

Например, создадим пользовательское событие start:

JavaScript
const event = new Event('start');

После того как событие создано его нужно вызвать. Осуществляется это посредством метода dispatchEvent.

Синтаксис метода dispatchEvent:

JavaScript
$element – объект, для которого необходимо вызвать событие event
$element.dispatchEvent(event);

Например, вызовем событие start для document:

JavaScript
// создаём событие
const event = new Event('start');
// вызываем событие
document.dispatchEvent(event);

Когда событие происходит, срабатывает соответствующий обработчик:

JavaScript
document.addEventListener('start', e => {
  console.log('Обработка события start на document!');
});

Конструктор CustomEvent

Если при создании события к нему нужно добавить некоторые данные, то в этом случае лучше воспользоваться CustomEvent.

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

Например, создадим кастомное событие start, которое будет добавлять к нему пользовательские данные:

HTML
<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:

JavaScript
box.addEventListener('changeColor', (e) => function () {
  console.log(E.detail.color);
});

Добавить к объекту события пользовательских данных можно с помощью CustomEvent.

Синтаксис CustomEvent:

JavaScript
const event = new CustomEvent(event, CustomEventInit);

Добавление данных осуществляется через дополнительное свойство detail.

Например:

JavaScript
const anotherEvent = new CustomEvent('start', {
  detail: {
    color: 'white'
  }
})

Используя CustomEvent в прослушивателе событий вы можете запросить данные для объекта события, используя event.detail (вы не можете использовать другое свойство):

JavaScript
document.addEventListener('start', event => {
  console.log('started!')
  console.log(event.detail)
});

Комментарии: 0