jQuery の .bind()、.live()、および .delegate() の違いの分析

jqueryを学ぶ友人は、

jQueryの.bind()、.live()、.delegate()の違いの分析を参照できます。

DOM ツリー

まず、HMTL ドキュメントの DOM ツリーを視覚化すると便利です。単純な HTML ページは次のようになります。

イベント バブリング (イベント伝播とも呼ばれます)

リンクをクリックすると、リンク要素のクリック イベントがトリガーされ、このイベントが実行をトリガーします。その要素にバインドしたクリック イベントの 関数。

コードは次のとおりです:

$('a').bind('click',function(){alert('that ticketles!')})

したがって、クリック操作は、アラート機能。

その後、クリック イベントはツリーのルートに向かって伝播し、親要素にブロードキャストされ、その子孫要素のいずれかでクリック イベントがトリガーされる限り、イベントは次のようになります。それに渡されました。

DOM の操作のコンテキストでは、document がルート ノードです。

これで、.bind()、.live()、.delegate() の違いをより簡単に説明できるようになりました。
.bind()

コードは次のとおりです:

$('a').bind('click',function(){alert('That ticketles!');})

これが最も単純ですバインド方法。 JQuery はドキュメントをスキャンしてすべての $('a') 要素を検索し、アラート関数を各要素のクリック イベントにバインドします。
.live()

コードは次のとおりです:

$('a').live('click',function(){alert('That ticketles!')})

JQueryはアラート関数をバインドします$ (ドキュメント) 要素に追加し、パラメータとして「click」と「a」を使用します。イベントがドキュメント ノードに到達するたびに、イベントがクリック イベントであるかどうかを確認し、イベントのターゲット要素が CSS セレクター'a' と一致するかどうかを確認し、一致する場合は関数を実行します。
ライブ メソッドは、次のようにドキュメントの代わりに特定の要素 (または「コンテキスト」) にバインドすることもできます:

コードは次のとおりです:

$('a',$('#container') [0] ).live('click',function(){alert('くすぐったい!')})

.delegate()

コードは次のとおりです:

$('#container')。 delegate('a', 'click',function(){alert('くすぐったい!')})

JQuery はドキュメントをスキャンして $('#container') を見つけ、click イベントと 'a ' アラートするパラメーターとしての CSS セレクター この関数は $('#container') にバインドされています。イベントが $('#container') までバブルするたびに、イベントがクリック イベントであるかどうか、およびイベントのターゲット要素が CSS セレクターと一致するかどうかがチェックされます。両方のチェックの結果が true の場合、関数が実行されます。
このプロセスは .live() に似ていますが、ドキュメントではなく特定の要素にハンドラーをバインドしていることがわかります。精通した JS なら、 $('a').live() == $(document).delegate('a') と結論付けるかもしれませんね。
.delegate() が .live() よりも使いやすい理由
いくつかの理由により、人々は通常、ライブ メソッドではなく jQuery のデリゲート メソッドを使用することを好みます。次の例を考えてみましょう:

コードは次のとおりです:

$('a').live('click', function() { blah() });

または
$(document).delegate( 'a' , 'click', function() { blah() });
後者は、最初にドキュメント全体をスキャンしてすべての $('a') 要素を見つけて保存する必要があるため、実際には前者よりも高速です。 jQueryオブジェクトとして。 live 関数は、後の判断のために文字列パラメーターとして 'a' を渡すだけで済みますが、$() 関数は、リンクされたメソッドが .live() になることを「認識」しません。
一方、デリゲート メソッドは $(document) 要素を検索して保存するだけで済みます。
この問題を回避する 1 つの方法は、$(document).ready() の外側でライブ バインドを呼び出し、すぐに実行されるようにすることです。この方法では、DOM が設定される前に実行されるため、要素が検出されたり、jQuery オブジェクトが作成されたりすることはありません。

柔軟性とチェーン機能

ライブ機能も非常にわかりにくいです。考えてみてください。これは $('a') オブジェクトのセットにリンクされていますが、実際には $(document) オブジェクトに対して動作します。このため、恐ろしい方法でメソッドを自分自身に連鎖させようとする可能性があります。実際、私が言いたいのは、live メソッドは $.live('a',...) の形式のグローバル jQuery メソッドとしてより意味があるということです。

CSS セレクターのみをサポートします

最後の点ですが、ライブ メソッドには非常に大きな欠点があります。つまり、直接 CSS セレクターでしか動作できないため、柔軟性が非常に低くなります。

CSS セレクターの欠点について詳しくは、「jQuery .live() および .die() の探索」の記事を参照してください。

アップデート: この次のセクションを含めるように思い出させてくれた、Hacker News の Pedalpete と以下のコメントの Ellsass に感謝します。

.bind() の代わりに .live() または .delegate() を選択する理由

結局のところ、bind のほうがより明確で直接的だと思われますね。バインドの代わりにデリゲートまたはライブを選択します:

1. DOM にまだ存在しない可能性のある DOM 要素にハンドラーをアタッチします。バインドはハンドラーを個々の要素に直接バインドするため、ページ上にまだ存在しない要素にハンドラーをバインドすることはできません。

2. $('a').bind(…) を実行し、AJAX 経由でページに新しいリンクが追加された場合、バインド ハンドラーはこれらの新しく追加されたリンクに対して無効になります。一方、Live と delegate は別の祖先ノードにバインドされているため、その祖先要素内に現在または今後存在するすべての要素に対して有効です。

3. または、単一の要素または要素の小さなグループにハンドラーをアタッチするには、ループして同じ関数を DOM 内の 100 個の要素に 1 つずつアタッチする代わりに、子孫要素のイベントをリッスンします。ページ内のすべての要素にハンドラーを直接アタッチするよりも、ハンドラーを 1 つ (または少数の) 祖先要素にアタッチするとパフォーマンス上の利点があります。

拡散をやめてください

私が最後に言いたいのは、イベントの拡散に関するものです。通常、このようなイベント メソッドを使用してハンドラー関数の実行を終了できます:

コードは次のとおりです:

$('a').bind('click',function(e){ 
e.preventDefault() 
e.stopPropagation()} 
)

ただし、ライブ メソッドまたはデリゲート メソッドを使用する場合、ハンドラー関数は実際には実行されていません。 、ハンドラーが実際にバインドされている要素にイベントがバブルアップするまで、関数は実行されません。この時点で、.bind() の他のハンドラー関数はすでに実行されています。

以上がjQuery の .bind()、.live()、および .delegate() の違いの分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。