Метод dispatchEvent

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

Синтаксис

javascriptелемент.dispatchEvent(event);

Пример

Да предположим, че имаме бутон. При натискане на този бутон се извежда съобщение. Нека направим така, че при посочване с мишката върху бутона този бутон да си помисли, че е бил кликнат:

html<button id="button">button</button>

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

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

button.addEventListener('mouseover', function() {
  let clickEvent = new Event('click'); // създаваме събитие
  this.dispatchEvent(clickEvent); // симулираме кликване върху бутона
});

Результат:

Пример

Може да се създават собствени събития (със собствено име) и след това в нужния момент да се извикват. Нека свържем към бутона събитие showMessage и при посочване с мишката да инициираме това събитие:

html<button id="button">бутон</button>

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

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

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

Результат: