dispatchEventメソッド

dispatchEventメソッドを使用すると、要素上のイベントをシミュレートすることができます。 これはなぜ必要か：ユーザーによるボタンクリック、フォーム送信の試みなどを模倣することができます。この場合、イベントはevent.isTrustedプロパティ以外は本物のイベントと何ら変わりません。 非標準の（自分で考え出した）名前のイベントを作成し、必要な時に呼び出すことも可能です。このメソッドは、イベントを発生させたい要素に対して適用されます。 パラメータとして、コンストラクタnew Eventで作成されたイベント（オブジェクト）を受け取ります。

構文

javascript要素.dispatchEvent(event);

例

ボタンがあるとします。このボタンをクリックするとメッセージが表示されます。 マウスがボタンの上にホバーしたときに、ボタンがクリックされたと認識されるようにしてみましょう：

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

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

button.addEventListener('click', function() {
  alert('メッセージ');
});

button.addEventListener('mouseover', function() {
  let clickEvent = new Event('click'); // イベントを作成
  this.dispatchEvent(clickEvent); // ボタンのクリックをシミュレート
});

Результат:

例

独自のイベント（独自の名前を持つ）を作成し、後で必要な時にそれを呼び出すことができます。 ボタンにshowMessageイベントをバインドし、マウスホバー時にこのイベントを発生させてみましょう：

html<button id="button">ボタン</button>

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

button.addEventListener('showMessage', function() {
  alert('メッセージ');
});

button.addEventListener('mouseover', function() {
  let showMessageEvent = new Event('showMessage'); // イベントを作成
  this.dispatchEvent(showMessageEvent); // イベントの発火をトリガー
});

Результат: