Metoda dispatchEvent

Metoda dispatchEvent umožňuje simulovat událost na elementu. K čemu to je: lze simulovat stisknutí uživatele na tlačítko, pokus o odeslání formuláře a tak dále. Přitom se událost nebude lišit od skutečné ničím kromě vlastnosti event.isTrusted. Lze dokonce vytvářet události s nestandardními (vámi vymyšlenými) názvy a poté je volat v potřebný moment. Metoda se aplikuje na element, na kterém je třeba vyvolat událost. Jako parametr metoda přijímá událost (objekt), vytvořenou pomocí konstruktoru new Event.

Syntaxe

javascriptelement.dispatchEvent(event);

Příklad

Předpokládejme, že máme tlačítko. Po stisknutí tohoto tlačítka se zobrazí zpráva. Udělejme to tak, aby při najetí myší na tlačítko si toto tlačítko myslelo, že na něj klikli:

html<button id="button">tlačítko</button>

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

button.addEventListener('click', function() {
  alert('zpráva');
});

button.addEventListener('mouseover', function() {
  let clickEvent = new Event('click'); // vytvoříme událost
  this.dispatchEvent(clickEvent); // simulujeme kliknutí na tlačítko
});

Результат:

Příklad

Lze vytvářet vlastní události (s vlastním názvem) a poté je v potřebný moment volat. Pojďme připojit k tlačítku událost showMessage a po najetí myší inicializovat tuto událost:

html<button id="button">tlačítko</button>

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

button.addEventListener('showMessage', function() {
  alert('zpráva');
});

button.addEventListener('mouseover', function() {
  let showMessageEvent = new Event('showMessage'); // vytvoříme událost
  this.dispatchEvent(showMessageEvent); // vyvoláme spuštění události
});

Результат: