тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Метод dispatchEvent

Метод dispatchEvent позволяет имитировать событие событие на элементе.

Зачем это нужно: можно имитировать нажатие пользователя на кнопку, попытку отправки формы и так далее. При этом событие не будет отличаться от настоящего ничем кроме свойства event.isTrusted.

Можно даже создавать события с нестандартными (придуманными вами) названиями и затем вызывать их в нужный момент.

Метод применяется к элементу, на котором нужно вызвать событие. В параметре метод получает событие (объект), созданное с помощью конструктора new Event.

Синтаксис

элемент.dispatchEvent(event)

Пример

Пусть у нас есть кнопка. По нажатию на эту кнопку выводится сообщение. Давайте сделаем там, чтобы при наведении мышкой на кнопку эта кнопка думала, что по ней кликнули:

<button id="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> let button = document.querySelector('#button'); button.addEventListener('showMessage', function() { alert('message'); }); button.addEventListener('mouseover', function() { let showMessageEvent = new Event('showMessage'); // создаем событие this.dispatchEvent(showMessageEvent); // вызываем срабатывание события });

: