jQuery .on（）; vs JavaScript .addEventListener（）;

Question

イベントハンドラがどのようにアタッチされているかによって、イベントハンドラの実行順序が異なるのはなぜですか？下の例では、DOM要素の特定のイベントを処理するために.on()と.addEventListener()メソッドを使用しています。

jsfiddle：http://jsfiddle.net/etsS2/

私は、この特定の例では、イベントハンドラが実行されようとしている順序はevent-bubblingに依存することは考えて - ので、元のイベントtargetから開始してまで移動しますdocument要素。

document.getElementById('outer').addEventListener('mouseup', function (event) { 
//$('#outer').on('mouseup', function (event) { 
    alert('This alert should not show up!'); 
}, false); 

私はon();バージョンのコメントを解除した場合すべてが期待どおりに動作します - jQueryは無地JavaScriptに反して、イベントをどのように処理するかの違いがありますか？

Answer 1

文書レベルで.on()を使用すると、その時点までイベントが完全にバブルするのを待っています。すべての中間コンテナのイベントハンドラは既に呼び出されています。

イベント「バブリング」は、イベントの実際の元の受信者であった要素の親に登録されたイベントハンドラをブラウザが検索するプロセスです。これは、DOMツリーで上向きに動作します。ドキュメントレベルは、の最後のレベルです。したがって、.on()で登録されたハンドラは、そのレベルに達するまで実行されません。その間、「外側」レベルの他のイベントハンドラに最初に到達し、ブラウザによって実行されます。

.on()に登録されたハンドラのreturn false;は、event.stopPropagation()の呼び出しと同様に、ほとんど役に立ちません。それ以外に、jQueryのようなライブラリが行う作業にネイティブイベントハンドラの登録を混ぜることは、あなたがしていることを真剣に知らない限り、おそらく本当に悪い考えです。

ちょうど少し前の今日、a question asked almost exactly like this oneがありました。 addEventListenerバージョンで

Answer 2

ルック：3番目の引数は、イベントのキャプチャ段階を使用するかどうかを指定する、useCaptureであるため、正常に動作し

document.getElementById('outer').addEventListener('mouseup', function (event) { 
    alert('This alert should not show up!'); 
}, false); 

。

あなたはjQueryのバージョンに切り替えるとき：

$('#outer').on('mouseup', function (event) { 
    alert('This alert should not show up!'); 
}, false); 

私は何が起こっているかと思われている第三引数単に上書きあなたのイベントハンドラ関数と明確ではありませんreturn false;が、何もしないようにイベントハンドラを引き起こし何が起こるのか。

jQuery docs（強調追加）より：

イベントがトリガされたときに実行する機能。 falseの値は で、単に falseを返す関数の省略形として使用することもできます。

false引数を削除し、jQueryのバージョンがあまりにも正常に動作します：addEventListenerアプローチが正しく動作しているようalertはは、表示する必要があること

$('#outer').on('mouseup', function (event) { 
    alert('This alert should not show up!'); 
}); 

注意を。それがなぜであるか@Packyの答えを見てください。