ブラウザ別 CustomEvent の発火方法

TL; DR

推奨される方法は IE が対応していないので、環境によって呼び分ける必要があります。

• Internet Explorer
  • document.createEvent + initCustomEvent
• その他のブラウザ
  • CustomEvent

概要

アプリケーションで使う目的で、任意の名前のイベントを DOM から発行できる機能として CustomEvent があります。CustomEvent を使うと、任意の名前のイベントを使ってデータの受け渡しが可能です。

CustomEvent は、ブラウザの拡張機能を作る際、ウェブページと拡張機能のサンドボックス間のデータ受け渡しなどに利用されています。

Internet Explorer 向け

IE では CustomEvent という名前はグローバルに定義されていますが、コンストラクタが未実装なため別の手法を取ります。IE では CustomEvent のコンストラクタを呼び出すと例外が発生するため、例外発生時のフォールバックとして以下の処理を用いると良いでしょう。

element は発火対象の要素に置き換えてください。

var detail = { foo: 1 }; // イベントの引数
var event  = document.createEvent('CustomEvent');
event.initCustomEvent('eventName', false, false, detail);
element.dispatchEvent(event);

参考

• https://developer.mozilla.org/ja/docs/Web/API/Document/createEvent
• https://developer.mozilla.org/ja/docs/Web/API/CustomEvent/initCustomEvent

その他のブラウザ 向け

IE 以外のブラウザは CustomEvent コンストラクタを呼び出します。IE と同じ initCustomEvent を使った方法も動作しますが、非推奨とされています (参考リンクの MDN 参照)。

var detail = { foo: 1 }; // イベントの引数
var event  = new CustomEvent('eventName', { detail: detail });
element.dispatchEvent(event);

参考

• https://developer.mozilla.org/ja/docs/Web/API/CustomEvent/CustomEvent

すべてのブラウザで動作させるように記述する場合

対応していないブラウザで失敗した場合、別の処理にフォールバックさせれば、すべてのブラウザで動作させることができます。

var detail = { foo: 1 }; // イベントの引数
var event;

try {
  event = new CustomEvent('eventName', { detail: detail });
} catch (e) {
  event = document.createEvent('CustomEvent');
  event.initCustomEvent('eventName', false, false, detail);
}

element.dispatchEvent(event);