Javascriptのイベントハンドラーについて調べてみた

ユーザーがクリックした時に最初に実行されるイベントはどれだろう？という疑問が浮かんだので色々調べてみました。MDN（Event - Web API interfaces | MDN）やここ（Javascript - Event order）によるとどうやらイベントの実行順番は自分でコントロールできるようです。調べてわかったことをまとめてみました。

イベントの定義方法

DOM要素のインスタンス関数である、addEventListenerを使って行います。
引数は以下の通り

• イベントタイプ（必須）
• 実行する関数（必須）
• キャプチャを使うフラグ（デフォルト: false）

例）document.body.addEventListener("onClick", function() { alert(1); });

イベントモデルの種類

W3Cのイベントモデルには最も上の要素から最も奥の要素まで順番に実行されるのをイベントキャプチャリング(event capturing)と、最も奥の階層にある要素から最も上の要素まで順番に実行される方をイベントバブリング(event bubbling)の２種類があって図にすると以下のような感じになります。

２つの種類の実行順番はキャプチャリング→バプリングとなっています。
なので、例えば以下のようにイベントを登録したとします。

要素1.addEventListener('onClick', function() { alert("A") }, false);
要素1.addEventListener('onClick', function() { alert("B") }, true);

以下を実行したあとに、ユーザーが要素１をクリックした場合、
まずBと書かれたアラートが出力され、その後にAと書かれたアラートが出力されます。

さらに詳しい情報

もっと詳しく知りたい人は以下にさらに詳しく書かれているのでどうぞ。
EventTarget.addEventListener - Web API リファレンス | MDN