Método dispatchEvent

O método dispatchEvent permite simular um evento em um elemento. Por que isso é útil: é possível simular o pressionamento de um usuário em um botão, a tentativa de envio de um formulário e assim por diante. Nesse caso, o evento não será diferente de um real em nada, exceto pela propriedade event.isTrusted. É possível até criar eventos com nomes não padronizados (inventados por você) e depois acioná-los no momento desejado. O método é aplicado ao elemento no qual o evento precisa ser acionado. No parâmetro, o método recebe o evento (objeto), criado usando o construtor new Event.

Sintaxe

elemento.dispatchEvent(evento);

Exemplo

Suponha que temos um botão. Ao clicar neste botão, uma mensagem é exibida. Vamos fazer com que ao passar o mouse sobre o botão, este botão pense que foi clicado:

<button id="button">botão</button>

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

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

button.addEventListener('mouseover', function() {
	let clickEvent = new Event('click'); // cria o evento
	this.dispatchEvent(clickEvent); // simula o clique no botão
});

Exemplo

É possível criar seus próprios eventos (com seu próprio nome) e depois acioná-los no momento desejado. Vamos vincular ao botão o evento showMessage e, Ao passar o mouse sobre ele, inicializar este evento:

<button id="button">botão</button>

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

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

button.addEventListener('mouseover', function() {
	let showMessageEvent = new Event('showMessage'); // cria o evento
	this.dispatchEvent(showMessageEvent); // aciona a ocorrência do evento
});