イベントリスナの実行順序

JavaScript

addEventListener の実行順序 より。

(function(){

  function a() {alert('a')}

  function b() {alert('b')}

  function c() {alert('c')}

  window.addEventListener('click', a, false);

  window.addEventListener('click', b, false);

  window.addEventListener('click', c, false);

  window.addEventListener('click', a, false);

})()

opera -> b, c, a;

firefox -> a, b, c;

ちょうどクロスブラウザな (IE でも Firefox でも Safari でも使える) イベントリスナ追加関数を作っていて、そういや同一の EventTarget に追加したイベントリスナの実行順序の保証ってした方がいいのかなぁ、と思って色々調べてみました。

補足) InternetExplorer の attachEvent では、登録順とイベントリスナの呼び出し順は何の関係もない模様。 Firefox 3.5 と Opera 9.6、Safari 4 では基本的に登録順に呼び出される。 が、上で引用したような差異がある。

とりあえず DOM 2 Events では、「同一 EventTarget に結び付けられた複数の EventListener の実行順に関する仕様は作られていない」 ようです。 DOM 2 Events の勧告 より。 Although all EventListeners on the EventTarget are guaranteed to be triggered by any event which is received by that EventTarget, no specification is made as to the order in which they will receive the event with regards to the other EventListeners on the EventTarget.

そして DOM 3 Events では 「登録順に実行される」 と規定されているみたいですが、DOM 3 Events の勧告 のどこに書いてあるのかイマイチわかんなかったです。 「同じ条件で同じ EventTarget に同じ EventListener を追加しようとした場合、それは何の効果ももたらさない (実行順も元のまま)」 というのは EventTarget のところ に書いてあったけど。

DOM 2 Events では実行順の保証はないみたいだし、とりあえず今作ってる関数では実行順を気にしないことにしよう。