Метод dispatchEvent() в JavaScript

В этом руководстве вы узнаете, как программно создавать и отправлять события из кода, используя конструктор Event и метод dispatchEvent().

Как правило, события генерируются действиями пользователя, такими как щелчки мышью и нажатия клавиш. Кроме того, события можно генерировать из кода.

Чтобы сгенерировать событие программой, выполните следующие действия:

• Сначала создайте новый объект Event с помощью конструктора Event.
• Затем вызовите событие с помощью element.dispatchEvent().

Конструктор событий

Чтобы создать новое событие, используйте конструктор Event следующим образом:

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

Конструктор принимает два параметра:

type

— это строка, указывающая тип события, например 'click'.

options

это объект с двумя необязательными свойствами:

• bubbles : логическое значение, определяющее, всплывает событие или нет. Если это true, то событие всплывает, и наоборот.
• cancelable : также является логическим значением, указывающим, можно ли отменить событие, когда оно равно true.

По умолчанию объект options :

{ bubbles: false, cancelable: false}

Например, следующий код создает новое событие click с объектом options по умолчанию:

let clickEvent = new Event('click');

Пример

После создания события вы можете запустить его для целевого элемента с помощью метода dispatchEvent() следующим образом:

element.dispatchEvent(event);

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

HTML:

<button class="btn">Test</button>

JavaScript:

let btn = document.querySelector('.btn');

 btn.addEventListener('click', function() {
        alert('Mouse Clicked');
 });

let clickEvent = new Event('click');
btn.dispatchEvent(clickEvent);

В этом примере обработчик событий выполняется так, как если бы событие click было сгенерировано действиями пользователя.

Если событие исходит от действий пользователя, для свойства event.isTrusted устанавливается значение true. Если событие генерируется кодом, функция имеет значение false. Поэтому вы можете проверить значение свойства event.isTrusted, чтобы проверить «подлинность» события.

Event — это базовый тип UIEvent, который является базовым типом других конкретных типов событий, таких как MouseEvent, TouchEvent, FocusEvent и KeyboardEvent.

Рекомендуется использовать специализированный конструктор событий, такой как MouseEvent, вместо универсального типа Event, поскольку эти конструкторы предоставляют больше информации, относящейся к событиям.

Например, MouseEvent имеет много других свойств, таких как clientX и clientY, которые определяют горизонтальные и вертикальные координаты, в которых произошло событие относительно окна просмотра:

let clickEvent = new MouseEvent("click", {
    bubbles: true,
    cancelable: true,
    clientX: 150,
    clientY: 150
});

Заключение

• Используйте специальный конструктор событий, например MouseEvent, и вызовите метод dispatchEvent() для элемента, чтобы сгенерировать событие из кода.
• Используйте event.isTrusted, чтобы проверить, генерируется ли событие из кода или действий пользователя.