Metoda dispatchEvent

Metoda dispatchEvent permite simularea unui eveniment pe un element. De ce este necesar acest lucru: se poate simula apăsarea utilizatorului pe un buton, încercarea de trimitere a unui formular și așa mai departe. În acest caz, evenimentul nu va diferi de cel real cu nimic, în afară de proprietatea event.isTrusted. Se pot crea chiar evenimente cu nume non-standard (create de dvs.) și apoi să le declanșați în momentul potrivit. Metoda este aplicată elementului pe care trebuie să fie apelat evenimentul. Ca parametru, metoda primește evenimentul (obiectul), creat cu constructorul new Event.

Sintaxă

element.dispatchEvent(event);

Exemplu

Să presupunem că avem un buton. La apăsarea acestui buton se afișează un mesaj. Să facem astfel încât la trecerea mouse-ului peste buton acest buton să creadă că a fost apăsat:

<button id="button">buton</button>

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

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

button.addEventListener('mouseover', function() {
	let clickEvent = new Event('click'); // creăm evenimentul
	this.dispatchEvent(clickEvent); // simulăm clic pe buton
});

Exemplu

Puteți crea propriile evenimente (cu propriile nume) și apoi să le declanșați în momentul potrivit. Să atașăm butonului evenimentul showMessage și la trecerea mouse-ului peste el să inițiem acest eveniment:

<button id="button">buton</button>

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

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

button.addEventListener('mouseover', function() {
	let showMessageEvent = new Event('showMessage'); // creăm evenimentul
	this.dispatchEvent(showMessageEvent); // declanșăm evenimentul
});