もずはっく日記(2012年2月)

イベントリスナの優先順位
初回投稿日時: 2012年02月11日10時44分01秒
最終更新日時: 2012年02月11日10時44分35秒
カテゴリ: Firefox Google Chrome IE Javascript Mozilla Core Opera
SNS: Tweet (list)

ふと、イベントリスナを同じ要素に同じ条件で追加するとどういった優先順位になるのか気になったのでテストしてみました。

このテストケースでは、エディタ上でのkeydownイベントを各ハンドラが呼び出された順序でリストに追記していきます。その結果はFirefox、IE、Chrome、Operaで以下のようになりました。

1. 親要素のcaptureフェイズに最初に登録されたハンドラ
2. 親要素のcaptureフェイズに二番目に登録されたハンドラ
3. イベントターゲットのbubbleフェイズに最初に登録されたハンドラ (captureへの登録よりも前)
4. イベントターゲットのbubbleフェイズに二番目に登録されたハンドラ (captureへの登録よりも前)
5. イベントターゲットのcaptureフェイズに最初に登録されたハンドラ
6. イベントターゲットのcaptureフェイズに二番目に登録されたハンドラ
7. イベントターゲットのbubbleフェイズに三番目に登録されたハンドラ (captureへの登録より後)
8. イベントターゲットのbubbleフェイズに四番目に登録されたハンドラ (captureへの登録より後)
9. 親要素のbubbleフェイズに最初に登録されたハンドラ
10. 親要素のbubbleフェイズに二番目に登録されたハンドラ

親要素に仕掛けたハンドラでは、captureフェイズと、bubbleフェイズが順番逆でも大丈夫なのは当たり前として、イベントのターゲットではフェイズの指定は無視されています。そして、ハンドラは先に登録したものに優先権があるようです(これに関して明言している仕様がどこにあるのか知りません)。Webアプリ作る上では複数のハンドラでひとつのイベントを聞くようなことをすると、スパゲッティになるでしょうからやらない方が良いと思いますが、まあ、ちょっとした豆知識として。