0

HTML

<div>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>

Jクエリ

$('div span').on('click', function(){
  //direct - 1st method
});

$('div').on('click','span', function(){
  //delegation - 2nd method
});

コードで上記の両方の方法を使用しました。ハンドラーが1つしかないため、2番目の方法の方が優れていることはわかっています。私の問題は、

  1. 1つ目の方法(ダイレクト)はイベントキャプチャーという概念のことですか? イベントキャプチャの例ですか？
  2. 2番目の方法（委任）は、イベントバブリングと呼ばれる概念を指していますか？イベントバブリングの例ですか？

ありがとう

4

3 に答える 3

1

すべての jQuery イベント メソッドは、イベント キャプチャではなく、イベント バブリングを使用しているように見えます。

したがって、両方の例でイベント バブリングを使用します。

一部のブラウザーでフォーカス イベントとブラー イベントがバブリングしないエ​​ッジ ケースがあります。影響を受けるブラウザでは、イベント キャプチャがフォーカス イベントとブラー イベントに使用されます。

参考までに、ソースを表示するだけです。http://code.jquery.com/jquery.js

于 2012-10-02T18:03:19.343 に答える
0 
$('div span').on('click', function(){
  //direct - 1st method
});

このイベントは、DOM に現在存在する Div 内のスパンにのみイベント ハンドラーをアタッチしました。新しいスパン要素が div に追加された場合、そのスパンにはクリック イベントが関連付けられません。

1 つ目と2 つ目は、イベント バブリングの例です。

先祖にイベントハンドラーが与えられ、それが子に委任されるイベント委任の概念があります..

2 番目の例は、イベント委任の例です。ここで、イベントは親要素に添付されます..したがって、divクラス内のすべてのスパン要素はイベントハンドラに添付されます..

したがって、新しいスパン要素が div に追加された場合、イベントがスパンの祖先に関連付けられているため、この場合、イベントが発生します

これは、場合に役立ちます

$('div').on('click','span', function(){
  //delegation - 2nd method
});

jQuery ライブラリのどこでイベント キャプチャが使用されているかわかりません

于 2012-10-02T18:01:25.477 に答える
0

質問への回答:

  1. これは、バブリング、キャプチャ、または委任ではありません。イベントリスナーを要素に直接追加するだけです。

  2. ええ、これはボンネットの下でバブルアップするクリックに依存する委任です.

イベントのバブリングとキャプチャは、Microsoft と Netscape によってそれぞれ提供された、同じ概念の異なる実装です。どちらも親要素のイベントをリッスンします。それらは異なる順序で発生することに注意してください。キャプチャは親から子孫に向かって発生しますが、バブリングは逆に発生します。

詳細とその歴史については、PPK の Web サイト ( http://www.quirksmode.org/js/events_order.html ) を参照してください。

最新のブラウザーはキャプチャとバブリングの両方をサポートしており (現在はバブリングがデフォルトです)、ネイティブの addEventListener を使用するときにどちらを使用するかを指定できます。

element.addEventListener('クリック', function(){}, false); // バブル element.addEventListener('click', function(){}, true); // 捕獲

ただし、フォーカス、ブラー、スクロール、マウスオーバーなどの一部のイベントはキャプチャ フェーズ イベントでのみサポートされるため、addEventListener を使用する場合は「true」を指定する必要があります。

残念ながら、jQuery はすべてのキャプチャ フェーズ イベントの委任をサポートしていないようです。

簡単に言えば、フォーカスとブラー以外のキャプチャ フェーズのイベントを委任するには、jQuery ではなく、ネイティブの addEventListener を使用する必要があります。

于 2014-04-09T02:13:21.390 に答える