Команда new Event - конструктор событий на JavaScript
Команда new Event
- конструктор
событий, с помощью которого можно создать
объект события, а затем вызвать это событие
из JavaScript с помощью метода dispatchEvent
.
Зачем это нужно: можно имитировать нажатие
пользователя на кнопку, попытку отправки
формы и так далее. При этом событие не будет
отличаться от настоящего ничем кроме свойства
event.isTrusted
.
Можно даже создавать события с нестандартными
(придуманными вами) названиями и затем вызывать
их в нужный момент.
Синтаксис
new Event(тип события, [флаги]);
Пример
Пусть у нас есть кнопка. По нажатию на эту кнопку выводится сообщение. Давайте сделаем так, чтобы при наведении мышкой на кнопку эта кнопка думала, что по ней кликнули:
<button id="button">button</button>
let button = document.querySelector('#button');
button.addEventListener('click', function() {
alert('message');
});
button.addEventListener('mouseover', function() {
let clickEvent = new Event('click'); // создаем событие
this.dispatchEvent(clickEvent); // имитируем клик на кнопку
});
:
Пример
Можно создавать свои события (со своим названием)
и потом в нужный момент вызывать их. Давайте
привяжем к кнопке событие showMessage
и по
наведению мышкой инициализируем это событие:
<button id="button">button</button>
let button = document.querySelector('#button');
button.addEventListener('showMessage', function() {
alert('message');
});
button.addEventListener('mouseover', function() {
let showMessageEvent = new Event('showMessage'); // создаем событие
this.dispatchEvent(showMessageEvent); // вызываем срабатывание события
});
:
Смотрите также
-
свойство
addEventListener
,
которое привязывает события -
свойство
removeEventListener
,
которое отвязывает события