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 представлен ниже:

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

Метод	Описание	Chrome	Firefox	Opera	Safari	IExplorer	Edge
composedPath()	Возвращает путь события, представляющий собой массив объектов, на которых будут вызваны обработчики событий.	53.0	52.0	40.0	10.0	Нет	Нет
preventDefault()	Если этот метод вызывается, то действие события по умолчанию не будет срабатывать (отменяет действие события по умолчанию). Событие продолжает распространяться как обычно, только с тем исключением, что событие ничего не делает.	Да	Да	Да	Да	9.0	Да
stopImmediatePropagation()	Прекращает дальнейшую передачу текущего события (предотвращает всплытие по дереву DOM) и останавливает цепочку вызова событий для текущего элемента.	Да	Да	Да	Да	9.0	Да
stopPropagation()	Прекращает дальнейшую передачу текущего события (предотвращает всплытие по дереву DOM).	Да	Да	Да	Да	9.0	Да

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

Свойство	Описание	Chrome	Firefox	Opera	Safari	IExplorer	Edge
bubbles	Возвращает логическое значение, которое указывает на то, является ли данное событие всплывающим внутри DOM.	Да	Да	Да	Да	Да	Да
cancelable	Возвращает логическое значение, которое указывает на то, может ли событие быть отменено и предотвращено, как если бы оно никогда не происходило.	Да	Да	Да	Да	9.0	Да
cancelBubble	Установка логического значения true перед возвратом из обработчика событий прекращает дальнейшую передачу текущего события (предотвращает всплытие по дереву DOM). Свойство является алиасом метода stopPropagation().	Да	53.0*	Да	Да	Да	Да
composed	Возвращает логическое значение, которое указывает, будет ли событие распространяться через границу между теневой модели DOM в стандартную модель DOM.	53.0	52.0	40.0	?	?	?
currentTarget	Соответствует текущему элементу DOM, в котором в настоящий момент обрабатывается событие.	Да	Да	Да	Да	9.0	Да
defaultPrevented	Возвращает логическое значение, которое указывает на то вызывался ли метод preventDefault() для этого объекта событий, или нет.	Да	Да	Да	Да	9.0	Да
eventPhase	Возвращает целое число, которое соответствует текущей фазе процесса распостранения события.	Да	Да	Да	Да	9.0	Да
target	Свойство ссылается на объект, который отправил событие.	Да	Да	Да	Да	Да	Да
timeStamp	Возвращает разницу в миллисекундах между тем моментом, когда браузер создал событие и 00:00:00 1 января 1970 года (Unix-время).	Да	Да	Да	Да	Да	Да
type	Возвращает строковое значение, которое содержит тип события.	Да	Да	Да	Да	Да	Да
isTrusted	Возвращает логическое значение, которое указывает было ли событие сгенерировано действием пользователя, или создано, либо изменено сценарием, либо отправлено с использованием метода dispatchEvent().	46.0	Да	33.0	Да	9.0*	Да