dispatchEventメソッド

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

構文

要素.dispatchEvent(event);

例

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

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

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

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

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

例

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

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

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

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

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