Metoda dispatchEvent

Metoda dispatchEvent pozwala symulować zdarzenie na elemencie. Po co to jest potrzebne: można symulować naciśnięcie przycisku przez użytkownika, próbę wysłania formularza i tak dalej. Jednocześnie zdarzenie nie będzie różnić się od prawdziwego niczym poza właściwością event.isTrusted. Można nawet tworzyć zdarzenia z niestandardowymi (wymyślonymi przez ciebie) nazwami, a następnie wywoływać je w odpowiednim momencie. Metoda jest stosowana do elementu, na którym trzeba wywołać zdarzenie. W parametrze metoda otrzymuje zdarzenie (obiekt), utworzone za pomocą konstruktora new Event.

Składnia

element.dispatchEvent(event);

Przykład

Załóżmy, że mamy przycisk. Po naciśnięciu tego przycisku wyświetlany jest komunikat. Sprawmy, tak, aby po najechaniu myszką na przycisk ten przycisk myślał, że został kliknięty:

<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'); // tworzymy zdarzenie
	this.dispatchEvent(clickEvent); // symulujemy kliknięcie na przycisk
});

Przykład

Można tworzyć własne zdarzenia (z własną nazwą) i potem w odpowiednim momencie je wywoływać. Przywiążmy do przycisku zdarzenie showMessage i po najechaniu myszką zainicjujmy to zdarzenie:

<button id="button">przycisk</button>

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

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

button.addEventListener('mouseover', function() {
	let showMessageEvent = new Event('showMessage'); // tworzymy zdarzenie
	this.dispatchEvent(showMessageEvent); // wywołujemy uruchomienie zdarzenia
});