JavaScript интерфейс Event

Интерфейсы веб API

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

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

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

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

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

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

typeArg - String
eventInit - Object

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

ПараметрОписание
typeArgСтроковое значение, представляющее тип события (значение чувствительно к регистру). Обязательный параметр.
eventInitЭто словарь EventInit, имеющий следующие поля (является необязательным параметром):
  • bubbles - логическое значение, которое указывает на то, является ли данное событие всплывающим внутри DOM. Значение по умолчанию false - событие не всплывает.
  • cancelable - логическое значение, которое указывает на то можно ли отменить событие, или нет. Значение по умолчанию false - событие не может быть отменено.
  • composed - логическое значение, которое указывает, будет ли событие распространяться через границу между теневой модели DOM (shadow DOM) в стандартную модель DOM. Значение по умолчанию false - событие не переходит из теневого DOM в стандартный DOM.

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

Ниже представлен пример создания нового искусственного события и инициирование этого события с использованием метода 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
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
composedPath()Возвращает путь события, представляющий собой массив объектов, на которых будут вызваны обработчики событий. 53.052.040.010.0НетНет
preventDefault()Если этот метод вызывается, то действие события по умолчанию не будет срабатывать (отменяет действие события по умолчанию). Событие продолжает распространяться как обычно, только с тем исключением, что событие ничего не делает. ДаДаДаДа9.0Да
stopImmediatePropagation()Прекращает дальнейшую передачу текущего события (предотвращает всплытие по дереву DOM) и останавливает цепочку вызова событий для текущего элемента. ДаДаДаДа9.0Да
stopPropagation()Прекращает дальнейшую передачу текущего события (предотвращает всплытие по дереву DOM). ДаДаДаДа9.0Да

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

СвойствоОписаниеChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
bubblesВозвращает логическое значение, которое указывает на то, является ли данное событие всплывающим внутри DOM. ДаДаДаДаДаДа
cancelableВозвращает логическое значение, которое указывает на то, может ли событие быть отменено и предотвращено, как если бы оно никогда не происходило. ДаДаДаДа9.0Да
cancelBubbleУстановка логического значения true перед возвратом из обработчика событий прекращает дальнейшую передачу текущего события (предотвращает всплытие по дереву DOM). Свойство является алиасом метода stopPropagation(). Да53.0*ДаДаДаДа
composedВозвращает логическое значение, которое указывает, будет ли событие распространяться через границу между теневой модели DOM в стандартную модель DOM. 53.052.040.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*Да
Интерфейсы веб API
×

Кажется, вы используете блокировщик рекламы :(

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.