Метод dispatchEvent

Методът dispatchEvent позволява симулиране на събитие върху елемент. Защо е нужно: може да се симулира натискане от потребителя върху бутон, опит за изпращане на форма и така нататък. При това събитието няма да се различава от истинското с нищо освен със свойството event.isTrusted. Може дори да се създават събития с нестандартни (измислени от вас) имена и след това да се извикват в нужния момент. Методът се прилага върху елемента, върху който трябва да се извика събитието. В параметъра методът получава събитие (обект), създадено с помощта на конструктора new Event.

Синтаксис

елемент.dispatchEvent(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>

let button = document.querySelector('#button');

button.addEventListener('showMessage', function() {
	alert('message');
});

button.addEventListener('mouseover', function() {
	let showMessageEvent = new Event('showMessage'); // създаваме събитие
	this.dispatchEvent(showMessageEvent); // извикваме задействане на събитието
});