3

イベントトリガーでこれら2つのjqueryが与えられた場合

$(document).on("click", "a[data-trigger='colorbox']",function(e){

$("a[data-trigger='colorbox']").on("click",function(e){

最初のアンカー タグを使用したときにカラーボックスがトリガーされる前に、アンカー タグを 2 回クリックする必要がありました。その後のクリックでは、トリガーするために 2 回目のクリックは必要ありません。しかし、2 番目の場合、カラーボックスは最初のクリックでトリガーされます。両者に違いはありますか？

関数の私の内容は以下の通りです

e.preventDefault();
var currentTarget = $(e.currentTarget);
currentTarget.colorbox({inline : true, href : currentTarget.data("href")});
4

2 に答える 2

2 
$(document).on("click", "a[data-trigger='colorbox']",function(e){

これにより、クリック イベントがドキュメントとその中のすべての子要素にバインドされます。このクリック イベントは、クリックされた要素がフィルターに一致するかどうかを確認します。a[data-trigger='colorbox']

後で：

$("a[data-trigger='colorbox']").on("click",function(e){

a[data-trigger='colorbox']クリック イベントを直接バインドします。

要素が動的な場合は、最初の要素を使用する必要があります。これは、クリック イベントを再バインドし続ける必要がないことを意味します。要素が静的な場合は、より効率的な後者を使用する必要があります。

3 番目の方法 (または最初のオプションを実行するより効率的な方法) は、これを静的な親document要素にバインドし、クリックされている要素でフィルター処理することです。つまり、

$(parent).on("click", "a[data-trigger='colorbox']",function(e){

ドキュメント全体でクリック イベントをキャプチャする必要がないため、これはより効率的です。

于 2013-04-29T14:53:08.577 に答える
1

1 番目のメソッドは、要素からその親を経由してドキュメントまでバブル アップしたイベントをキャプチャします。このメソッドは、委任されたイベント処理と呼ばれます

2 つ目: 要素で直接イベントをキャプチャします。

バックグラウンドで何が起こっているか:

文書構造:

  • 資料
    • 祖父母
      • 親
        • エレメント
      • 親2
    • ...

イベント: ユーザーが要素をクリックする

結果：

  1. 要素のすべてのクリック リスナーが実行されます * (あなたの 2 番目のケース)
  2. イベントが泡立ち始める
  3. 親のすべてのクリック リスナーが実行されます *
  4. 親の親のすべてのクリック リスナーが実行されます *
  5. ドキュメントのすべてのクリック リスナーが実行されます * (最初のケース)

*リスナーはイベント オブジェクトを取得し、以下を呼び出してバブリングをキャンセルできます。

  • event.stopPropagation(): イベントを親に伝播させませんが、現在のレベルですべてのリスナーを実行します。
  • event.stopImmediatePropagation(): イベントを親に伝播させず、他のリスナーも同じレベルで呼び出されません

JQuery は、ドキュメントにバインドされているリスナー内の要素のクリック イベントを処理できます。これは、すべてのレイヤーでクリック イベント オブジェクトの情報を確認できるためです。

  • 現在取り扱っているイベントevent.currentTarget
  • 最初にクリックされた要素event.target

jQueryドキュメントの詳細

あなたの状況に戻る

ケース 2

非常に簡単です：

  1. 要素がクリックされた
  2. そのハンドラが実行されます

要素が動的に追加/削除された場合など、そのハンドラーを処理する必要があります (割り当て/割り当て解除など)。

ケース1

要素がクリックされます:

  1. イベントはドキュメントまでバブルアップします
  2. ドキュメントのハンドラが呼び出されます
  3. ハンドラーは、イベントが要素で行われたクリックによるものであることを確認します

要素が動的に追加/削除され、要素のクリック ハンドラーを管理したくない場合は、このソリューションを選択する必要があります。ただし、ページ上でクリックするたびに基本的なリスナーが呼び出されるため、ドキュメントに割り当てる必要はありません。jQuerytargetは、関心のある要素であるかどうかを確認し、該当する場合は指定されたハンドラーを呼び出します。全体として、これを使いすぎるとパフォーマンスが低下する可能性があります。

これらすべてを知ることは、あなたの状況における行動の違いが何であるかを見つけるのに役立つはずです.

于 2013-04-29T14:50:32.360 に答える