🧊

JavaScriptのカスタムイベント

JavaScriptでよくある、

  • そんなユーザーインプットが行われたわけではないが、それをエミュレートしたい時
  • 各クラス間を疎結合に保ったまま、データのやりとりに独自のイベントを使いたい時

そんな時などに使われるだろうアレです。

MDNくらいしか検索しても情報出てこないので、個人的にまとめ。

参考：Creating and triggering events - Web developer guide | MDN

キホンのやつ

// いつもどおりなんやかんや書いて
elm.addEventListener('touchstart', function() { alert('touch!'); }, false);

// イベント作って
var ev = new Event('touchstart');
// 発火！
elm.dispatchEvent(ev);

とまあこんな簡単にできちゃうもんです。
すこし(?)前までは、

// いつもどおりなんやかんや書いて
elm.addEventListener('touchstart', function() { alert('touch!'); }, false);

// イベント作って
var ev = document.createEvent('Event');
// そしたら登録して
ev.initEvent('touchstart', true, true);
// 発火！
elm.dispatchEvent(ev);

と、一手間多かったみたい。

オプション渡したりしたい

上記のキホンverだと、ほんとに発火しかできません。
発火時に引数でいろいろ触りたい・・なんてのはよくあることで、その場合はこう。

// new Event じゃなくて new customEvent
var ev = new customEvent('hoge', {
  // このdetail以下にぶらさげる
  detail: {
    some: {
      vars: 'are here',
      and: 'here too'
    },
    foo: 'bar'
  }
});

// detail以下からアクセスできる
elm.addEventListener('hoge', function(e) { console.log(e.detail.some); }, false);
elm.dispatchEvent(ev);

ちなみにすこし(?)前までは、

// イベント作って
var ev = document.createEvent('Event');
// そしたら登録して
ev.initEvent('hoge', true, true);
ev.hoge = 'fuga';

// いつもどおりなんやかんや書いて
elm.addEventListener('hoge', function(e) { console.log(e.hoge); }, false);
elm.dispatchEvent(ev);

みたくev.detail とか関係なく渡せたぽい。

参考：CustomEvent - Web API Interfaces | MDN

気になるブラウザ互換性

いわゆるPCモダンブラウザはいけるのかしら・・？
でもCustomEventはIE非対応みたいなこともMDNには書いてる・・・。

気になるモバイルさんはというと・・。

参考：javascript - android browser still uses the old way of creating events in javascritp - Stack Overflow

うーん、もしやこれはだめなやつなのでは・・・！
iPhone5s x iOS7とかでは動いてるけど。

jQueryとかBackboneとか似たようなことしてないかなーと思ったけども、
特に new Event みたいなことはしてないみたい。
というか、createEvent とかもしてない！

いったいどこでどう使うもんなんやろうね、このAPI・・。

追記：
CustomEventですが、特に問題なく動作してます・・たぶん。
というのも、検証チームから特に何も言われてないので大丈夫だったんでしょう。
ちなみに、Android2.3以上、iOS5以上しかわかんないです。