JavaScript интерфейс Event

Описание интерфейса

Интерфейс Event представляет собой любое событие, которое происходит в объектной модели документа (DOM). Некоторые события создаются непосредственно пользователем (например, события мыши, или клавиатуры), а другие генерируются программным интерфейсом приложения (API), например, такие события как завершение анимации, или приостановка видео.

Когда вызывается какой-либо обработчик события, то в этом случае ему передается объект Event, свойства этого объекта содержат дополнительную информацию о событии, например, такую как тип события и объект, который отправил событие. С помощью методов объекта Event можно управлять распространением события по дереву DOM.

Синтаксис объекта Event

Для того, чтобы создать событие, сначала необходимо создать объект события, для этого необходимо воспользоваться конструктором события Event(), он позволяет создать новое событие, со следующими аргументами:

const event = new Event( typeArg );                  // тип события
const event = new Event( typeArg, eventInit ); // тип события и настройки события

typeArg - String
eventInit - Object

Значение параметров

Создание искусственного события

Ниже представлен пример создания нового искусственного события и инициирование этого события с использованием метода dispatchEvent() объекта EventTarget, который позволяет отправить искусственно созданное событие элементу:

// создаем новое событие типа "myEvent" и инициализируем переменную этим значением
const myEvent = new Event("myEvent", {bubbles: true,         // событие всплывает по дереву DOM
                                                                              cancelable: false}); // событие не может быть отменено   

// инициируем искусственно созданное событие (событие может быть отправлено любому элементу)
document.dispatchEvent(myEvent);
document.body.dispatchEvent(myEvent);

Передача пользовательских данных

Вы можете не только создавать искусственные события, но и добавлять пользовательские данные в объект события, для этого существует интерфейс CustomEvent, а свойство detail можно использовать для передачи пользовательских данных.

// создаем новое событие типа "myEvent" и инициализируем переменную этим значением
const myEvent = new CustomEvent("myEvent", { detail: someData }
const myEvent2 = new CustomEvent("myEvent", { detail: {method: () => console.log("hello "),
                                                                                                               method2: () => console.log("hello2 ")} }

// инициируем искусственно созданные события
document.dispatchEvent(myEvent);
document.dispatchEvent(myEvent2);

Вызов встроенных событий

Обращаю Ваше внимание на то, что вы можете создавать не только пользовательские события, но и встроенные события - FocusEvent, MouseEvent, WheelEvent, KeyboardEvent и тому подобное, например:

const myEvent = new MouseEvent("click", {
    view: window,
    bubbles: true,
    cancelable: true
});

document.dispatchEvent(myEvent);

Полный перечень свойств и методов объекта Event представлен ниже:

Методы интерфейса

Свойства интерфейса