HTML要素.dispatchEvent()対応: DOM Level 2（2000）

// イベントを発火します。
element.dispatchEvent(イベントオブジェクト);

// カスタムイベントを作成します。
var event = new CustomEvent("イベント名", { detail: データ });

// 標準のイベントを作成します。
var event = new Event("イベント名");

<button id="btn">クリック</button>
<button id="autoBtn">自動クリック</button>
<div id="app"></div>
<p id="output"></p>

var btn = document.querySelector("#btn");
var autoBtn = document.querySelector("#autoBtn");
var app = document.querySelector("#app");
var output = document.querySelector("#output");

// ボタンにクリックイベントを登録します。
btn.addEventListener("click", function() {
	output.textContent = "ボタンがクリックされました";
});

// dispatchEvent() で標準イベントを手動で発火します。
autoBtn.addEventListener("click", function() {
	var clickEvent = new Event("click");
	btn.dispatchEvent(clickEvent); // btnのクリックリスナーが実行されます。
});

// カスタムイベントを作成してデータを渡します。
app.addEventListener("userLogin", function(e) {
	output.textContent = e.detail.name + "さんがログインしました";
});

// カスタムイベントを発火し、detailにデータを含めます。
var loginEvent = new CustomEvent("userLogin", {
	detail: { name: "太郎", role: "admin" }
});
app.dispatchEvent(loginEvent);

「自動クリック」ボタンを押すと、プログラムからbtnのクリックイベントが発火されます。

<p id="output">ボタンがクリックされました</p>

カスタムイベント発火後は以下のように表示されます。

<p id="output">太郎さんがログインしました</p>

『HTML要素.dispatchEvent()』はイベントをプログラムから発火するメソッドです。ユーザーの操作なしにイベントリスナーを実行できるため、テストの自動化やコンポーネント間の通信に活用できます。

『new CustomEvent()』を使うと、独自のイベント名を定義し、『detail』プロパティに任意のデータを含めることができます。リスナー側では『event.detail』でデータを参照できるため、HTML要素間でデータをやり取りする仕組みとして使えます。

『HTML要素.dispatchEvent()』で発火したイベントは、『HTML要素.addEventListener()』で登録したリスナーのみを実行します。ブラウザのデフォルト動作は発生しないため、例えばリンクに対して『click』イベントを発火してもページ遷移は起きません。バブリングを有効にしたい場合は、オプションに『{ bubbles: true }』を指定してください。