jQueryのtriggerはcreateEventで代用

jQueryのtriggerを使うと、すでに付与されているイベントを呼び出して実行できて便利なのですが
プラグインが使えないときもあるため、代用方法を紹介します。

jQueryを使えないときは
createEventでイベントを作成し、initEventで初期化し、dispatchEventで付与しすると
イベントを発火させられます。

この方法は
clickなどの基本的なイベントはIE8以上から対応しており
独自に作成したカスタムイベントは、IE9以上からの対応しています。

なお、triggerがIEのバーションに縛られず実行できるのは
ここで紹介するcreateEventを単純に使っているのではなくjQuery内で独自にオブジェクトを組んで作りこんであるためです。
古いブラウザへの対応が必須だったり、急遽サポート範囲が広がったり、納期がいきなりタイトになるなど心配事があるなら
安定性を考慮して、jQueryが使えるよう働きかけるほうが賢明だと個人的には思います…

createEventを設定してみる

例えば、buttonというIDの要素のクリックイベントをtriggerしたい場合はこのようになります。

// jQuery
$('#button').trigger('click');

// Javascriptのみ ※IE8以上
var e = document.createEvent('HTMLEvents');
e.initEvent('change', true, false);
documwnt.getElementById('button').dispatchEvent(e);

initEventの引数は3つあり、3つとも指定しないとIEで省略不可のエラーがでます。

  • イベント名
  • イベントの伝播(true/false)
  • イベントのキャンセル(true/false)

clickなどとは違い、独自に作成したカスタムイベントは
イベントオブジェクトの初期化はinitEventではなくinitCustomEventで行います。
IE9以上でないと対応していません。

例えば、windowに対してcustomEventNameという独自イベントを付与している場合
このように設定します。

// jQuery
$(window).trigger('customEventName', {parameter: value});

// Javascriptのみ ※IE9以上
var e = document.createEvent('customEventName', {parameter: value});
e.initCustomEvent('customEventName', false, false, {parameter: value});
window.dispatchEvent(e);

initCustomEventには4つめの引数があり、こちらも省略するとIEでエラーになってしまいます。
もし渡したい引数がないなら、4つめの引数にはnullを指定します。

  • イベント名
  • イベントの伝播(true/false)
  • イベントのキャンセル(true/false)
  • triggerしたときの引数
var e = document.createEvent('customEventName');
e.initCustomEvent('customEventName', false, false, null);
window.dispatchEvent(e);

参考：
document.createEvent – DOM | MDN
event.initEvent – Web API インターフェイス | MDN
EventTarget.dispatchEvent – Web API インターフェイス | MDN
jQueryでtriggerされたイベントをjQueryを使わずに取得するための条件

関連記事

Pocket
Share on Tumblr