Metode dispatchEvent

Metode dispatchEvent memungkinkan untuk meniru sebuah peristiwa pada elemen. Mengapa ini diperlukan: kita dapat meniru tindakan pengguna menekan tombol, upaya pengiriman formulir, dan sebagainya. Peristiwa ini tidak akan berbeda dengan peristiwa asli kecuali pada properti event.isTrusted. Kita bahkan dapat membuat peristiwa dengan nama non-standar (yang Anda buat sendiri) dan kemudian memicunya pada momen yang tepat. Metode ini diterapkan pada elemen tempat peristiwa ingin dipicu. Sebagai parameter, metode ini menerima objek peristiwa, yang dibuat menggunakan konstruktor new Event.

Sintaks

javascriptelemen.dispatchEvent(event);

Contoh

Misalkan kita memiliki sebuah tombol. Saat tombol ini ditekan, sebuah pesan akan ditampilkan. Mari kita buat agar ketika kursor mouse diarahkan ke tombol, tombol tersebut mengira bahwa ia telah diklik:

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

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

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

button.addEventListener('mouseover', function() {
  let clickEvent = new Event('click'); // membuat peristiwa
  this.dispatchEvent(clickEvent); // meniru klik pada tombol
});

Результат:

Contoh

Kita dapat membuat peristiwa kita sendiri (dengan nama sendiri) dan kemudian memicunya pada momen yang tepat. Mari ikat sebuah peristiwa showMessage ke tombol dan picu peristiwa ini ketika kursor mouse diarahkan ke atasnya:

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

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

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

button.addEventListener('mouseover', function() {
  let showMessageEvent = new Event('showMessage'); // membuat peristiwa
  this.dispatchEvent(showMessageEvent); // memicu terjadinya peristiwa
});

Результат: