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

HTML要素にイベントをプログラムから発火させるメソッドです。『HTML要素.dispatchEvent()』と『new CustomEvent()』を組み合わせて、カスタムイベントを作成・発火できます。

構文

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

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

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

メソッド・コンストラクタ一覧

メソッド / コンストラクタ	概要
dispatchEvent(event)	指定したイベントオブジェクトをHTML要素に対して発火します。そのHTML要素に登録されたイベントリスナーが実行されます。
new Event("イベント名")	標準のイベントオブジェクトを作成します。『click』『input』などの標準イベントを手動で発火する場合に使用します。
new CustomEvent("イベント名", options)	カスタムイベントを作成します。optionsの『detail』プロパティに任意のデータを含めることができ、リスナー側で『event.detail』として参照できます。

サンプルコード

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

概要

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

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

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