web-dev-qa-db-ja.com

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

誰かが、どのように接続されているかによってイベントハンドラーが実行される順序に違いがあるのか​​説明できますか？以下の例では、.on()メソッドと.addEventListener()メソッドを使用して、さまざまなDOM要素で特定のイベントを処理しています。

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に反してイベントを処理する方法に違いはありますか？

javascriptjqueryevent-handling
36
MonkeyCoder

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

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

したがって、.on()に登録されたハンドラー内の_return false;_は、event.stopPropagation()の呼び出しと同様、ほとんど役に立ちません。それ以上に、ネイティブイベントハンドラの登録をjQueryのようなライブラリが行う作業と混合することは、自分が何をしているのかを真剣に知らない限り、おそらく非常に悪い考えです。

この質問とほぼ同じ質問がありました 少し前の今日がありました。

22
Pointy

addEventListenerバージョンを見てください：

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

3番目の引数はuseCaptureであり、イベントのキャプチャフェーズを使用するかどうかを指定するため、これは正常に機能します。

JQueryバージョンに切り替えると：

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

起こっているのは、3番目の引数がイベントハンドラー関数を単にoverridesし、イベントハンドラーにreturn false;これは明らかに意図したものではありません。

jQuery docs （強調を追加）から：

イベントがトリガーされたときに実行する関数。 値falseは、単にfalseを返す関数の省略形としても許可されます。

false引数を削除すると、jQueryバージョンも正しく機能します。

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

alertshouldが表示されるため、addEventListenerアプローチが正しく機能していることに注意してください。その理由については、@ Pointyの回答を参照してください。

12
James Allardice