1. ホーム
  2. jquery

[解決済み] Jquery live()とdelegate()の比較 [重複] [重複

2022-12-08 13:25:56

質問

との違いについて、ここやウェブ上の他の場所でいくつかの投稿を読みました。 live()delegate() . しかし、私は探している答えを見つけることができませんでした(これが重複している場合は教えてください)。

の違いがあることは知っています。 livedelegate は、その live をチェーンで使用することができないということです。また、どこかで読んだのですが delegate の方が速い(パフォーマンスが良い)場合があるとも書いてありました。

私の質問は、あなたが live の代わりに delegate ?

アップデイト

を設定したのですが 簡易テスト を設定して、パフォーマンスの違いを見てみます。

また、新しい .on() を追加しました。これは jQuery 1.7+ で利用可能です。

この結果は、回答で述べられているように、パフォーマンスの問題をかなり要約しています。

  • を使用しないでください。 .live() を使わないでください。 .delegate() .
  • を使用しないでください。 .delegate() を使わないでください。 .on() .

との違いは .live().delegate() の間よりずっと大きいです。 delegate().on() .

どのように解決するのですか?

私は live を使うことの利点を考えています。 delegate を使用することの利点は、圧倒的に大きいと考えています。

の一つの利点は live の構文に非常に近いということです。 bind :

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

delegate のように、少し冗長な構文が使われます。

$('#containerElement').delegate('a.myClass', 'click', function() { ... });

しかし、この方が実際に起こっていることをより明確に表現しているように思えます。 あなたは live の例では、イベントが実際に捕捉されるのは document であり delegate であることから、イベントキャプチャは #containerElement . 同じことを live でも同じことができますが、構文がどんどんひどくなっていきます。

イベントをキャプチャするためのコンテキストを指定することで、パフォーマンスも向上します。 このため live の例では、ドキュメント全体をクリックするたびに、セレクタの a.myClass と比較しなければなりません。 とは delegate の中にある要素だけです。 #containerElement . これは明らかにパフォーマンスを向上させます。

最後に live は、ブラウザが a.myClass 現在存在するかどうか . delegate はイベントが発生したときだけ要素を探すので、さらなるパフォーマンス上の利点があります。


NB delegate 用途 live を裏で使っているので live でできることは delegate . 私の答えは、それらが一般的に使用されているように、それらを扱っています。

また、どちらも live でも delegate は、最新のjQueryでイベントデリゲーションを行うための最良の方法です。新しい構文(jQuery 1.7時点)では、イベント委譲のために on 関数です。構文は以下の通りです。

$('#containerElement').on('click', 'a.myClass', function() { ... });