JavaScriptでは addEventListener を使ってイベントリスナを登録できます。(ただしIEは除く)
通常 addEventListener で登録されたイベントリスナは登録された順番に実行されていきます。たとえば
document.addEventListener('click', function() { alert('1回目'); });
document.addEventListener('click', function() { alert('2回目'); });
document.addEventListener('click', function() { alert('3回目'); });
という風にイベントが登録されていれば 1回目 2回目 3回目 と順番に実行されます。
useCapture
addEventListener は以下のような3つの引数を受け取ります。
※参考 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener
target.addEventListener(type, listener[, useCapture]);
type と listener はよく使うのでわかりますね。 useCapture というものがありますが、これを true にすることで、最初にイベントを実行することができます。
さっきのコードをちょっと書き換えて
document.addEventListener('click', function() { alert('1回目'); });
document.addEventListener('click', function() { alert('2回目'); }, true);
document.addEventListener('click', function() { alert('3回目'); });
とすると 2回目 1回目 3回目 と順番に実行されます。
たとえばwebアプリにキーボードショートカットを実装しようとしていて、他のターゲットよりもいち早く keydown を捕捉したい場合なんかに使えそうです。
詳しくは
ここに記すには余白がせますぎｔ・・
要するに useCapture を true にするとイベントリスナの実行位置が変わります。
デフォルトではイベントのバブリング時にターゲット要素までたどり着いた時にイベントリスナが実行されますが useCapture を true にすると、イベントのキャプチャ時にイベントリスナが実行されます。
イベントのバブリングやキャプチャについては詳しい解説ページがたくさんあると思うのでここでは割愛。
ただしIE以外に限る
冒頭にも(ただしIEは除く)と書きました。
IEは addEventListener が無くて、代わりに attatchEvent を使うのですが、これで登録されたイベントリスナは登録された順序で実行されないこともあるようです。実行順序が保証されていません。
残念。