jquery - $(element).on(event) vs $(ancestor).on(event, element)

Question

追加されて以来.on()、私は以下の関数の後者を使用してきましたが、最近、非常に多くの回答が前者を使用していることに気付きました。

違いは何ですか：

$(ancestor).on(event, element, function() { ... })

と：

$(element).on(event, function() { ... })

JSFiddle の例。

Answer 1

最初の例では、イベント ハンドラーを DOM ツリーの上位に委譲します。つまり、DOM にある要素 ( ) にアタッチできますが、まだ DOM にない可能性のあるancestor子孫 ( ) に適用できます。element

2 番目の例では、イベント ハンドラを に直接アタッチしますelement。つまり、要素は、コードの実行時に DOM に存在する必要があります。

委任には、効率という追加の利点があります。li大きなリストのすべての要素にイベント ハンドラーをバインドするとします。同じ関数の多くのコピーをバインドするよりも、単一のハンドラーulを要素に委任された親にバインドする方がはるかに効率的です。li

委任が機能するのは、ほとんどの DOM イベントが発生元の要素 ( target ) からツリーをバブルアップするためです。前述の例に従って、次のコードを検討してください。li

$("#myList").on("click", "li", function () { /* Do stuff */ });

の子孫#myListがクリックclickされると、イベントが生成され、その要素からバブルアップします#myList(これは少し単純化したものです。イベントには「キャプチャ」と呼ばれる別のフェーズがありますが、ここでは重要ではありません)。バインドされたイベント ハンドラー#myListがトリガーされ、jQuery はターゲット要素がセレクターと一致するかどうかを確認します。存在する場合は、ハンドラを実行します。

Answer 2

私にとってあなたの最初のもの：

$(ancestor).on(event, element, function() { ... })

一部の要素が動的にロードまたは作成された場合に使用されます。これらのイベントの直接バインディングは機能しないため、ページの読み込み時に利用可能だった最も近い親要素へのイベント委任が必要です。これは$(document)、イベントを委任するために常に利用できる要素の 1 つです。

あなたの2番目のもの：

$(element).on(event, function() { ... })

これは要素のイベントの直接バインディングですが、これはページの読み込み時に存在していた要素で機能します。