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ă

javascriptelement.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:

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

javascriptlet 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:

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

javascriptlet 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
});

Результат: