jquery - .live() と比較して .on() をより効率的に使用する理由は何ですか?

Question

私は自分のサイトで作業をしていて、jQuery を学んでいるときから .live() が非常に役立つという印象を受けていましたが、最近、ここにいる多くの人が .on() の使用を推奨しています。そうですか？.on() が .live() よりも優れている理由は何ですか? ありがとう。

Answer 1

.live()イベントが委譲されるコンテナとしてドキュメントを使用します。.delegate()に置き換えられ.on(),、委譲先のコンテナーを選択できるようになりました。ツリーの下の方にあるコンテナーを選択することで、委任された処理の基準を満たしているかどうかをテストする必要があるバブル イベントの量を減らすことができます。

Answer 2

にはいくつかの問題があります.live()：

まず、使用する構文そのもの.live()：

$(".whatever").live("click", fn);

すぐに評価するので無駄です$(".whatever")が、実際にはその初期評価では何もしません。

次に、.live()柔軟性がなく、すべての委任されたイベントハンドラーをdocumentオブジェクトにアタッチします。実際、これらの2行のコードは基本的に同じものです。

$(".whatever").live("click", fn);
$(document).on("click", ".whatever", fn);

すべての委任されたイベントハンドラーをドキュメントオブジェクトにアタッチする際の問題は、イベントがドキュメントにバブルするたびに、すべての.live（）イベントハンドラーと比較する必要があり、比較の一部は安価ではないためです。セレクター操作。イベントハンドラーがたくさんある.live()場合やセレクターの評価が遅い場合は、イベント処理が実際に停止する可能性があります。

ただし、を使用.on()すると、イベントを処理している動的オブジェクトに非常に近い静的な親オブジェクトを選択できます。これにより、イベントハンドラリストがはるかに小さなリストに分割され、より小さなリストでチェックする必要があるのは、はるかに少数のイベントだけです。したがって、これらのほぼ同等のコード行の代わりに、次のようにします。

$(".whatever").live("click", fn);
$(document).on("click", ".whatever", fn);

あなたはこのようなものを次のように使うことができます.on()：

$("immediate parent selector").on("click", ".whatever", fn);

これにより、実際の委任されたイベントハンドラーが動的オブジェクトの近い祖先にアタッチされ、イベント処理がはるかに効率的になります。イベントがドキュメントオブジェクトまでバブルする必要がないだけでなく、各イベントが発生したときに比較するセレクター/オブジェクトのリストがはるかに少なくなります。

.on()これは基本的に。と同じであることに注意してください.delegate()。唯一の違いは、引数の順序です。実際、jQueryの内部実装では、それらはすべて同じ関数を呼び出し、すべて同じコア実装を持っています。

Answer 3

すべてのイベントハンドラーをドキュメントオブジェクトに.live配置するのは悪いので、使用するのは悪いことです。.live物事は本当に、本当に遅くなる可能性があります。イベントはドキュメントまでバブルする必要があるだけでなく、ドキュメントオブジェクトを調べるためのイベントハンドラーが多数ある場合があります。の主な利点は.on()、実際のオブジェクトに非常に近い親オブジェクトにアタッチして、パフォーマンスを大幅に向上させることができることです。

参考文献