web-dev-qa-db-ja.com

JQuery live（）vs delegate（）

live()とdelegate()の違いについて、ここや他のWeb上のいくつかの投稿を読みました。しかし、探している答えが見つかりません（これがだまされている場合は教えてください）。

liveとdelegateの違いは、liveをチェーンで使用できないことです。私はどこかでdelegateがより高速である（パフォーマンスが向上する）と読みました。

私の質問は、liveの代わりにdelegateを使用すべき状況はありますか？

[〜＃〜] update [〜＃〜]

簡易テスト を設定して、パフォーマンスの違いを確認しました。

JQuery 1.7以降で利用可能な新しい.on()も追加しました

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

  • JQueryバージョンが.live()をサポートしていない限り、.delegate()を使用しないでください。
  • JQueryバージョンが.delegate()をサポートしていない限り、.on()を使用しないでください。

.live()と.delegate()の違いは、delegate()と.on()の間のA LOTよりも大きいことです。

jquerylive
102
PeeHaa

live;は使用しません。 delegateを使用することの利点は、圧倒的すぎるほど大きいと考えています。

liveの利点の1つは、その構文がbindの構文に非常に近いことです。

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

ただし、delegateは、もう少し冗長な構文を使用します。

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

しかし、これは実際に何が起こっているのかについて、もっとはっきりしているように思えます。 liveの例からは、イベントが実際にdocumentでキャプチャされていることに気付きません。 delegateを使用すると、#containerElementでイベントキャプチャが発生することは明らかです。 liveでも同じことができますが、構文はますます恐ろしくなります。

キャプチャするイベントのコンテキストを指定すると、パフォーマンスも向上します。 liveの例では、ドキュメント全体を1回クリックするたびにセレクタ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() { ... });
147
lonesomeday

以下を除いて、まったく同じです。

  • .delegate()を使用すると、ページのローカルセクションを絞り込むことができますが、.live()はページ全体でイベントを処理する必要があります。
  • .live()は、無駄なDOM選択で始まります

.delegate()を呼び出すと、向きを変えて.live()を呼び出しますが、余分なcontextパラメーターを渡します。

https://github.com/jquery/jquery/blob/master/src/event.js#L948-95

そのため、常に.delegate()を使用します。ページ上のすべてのイベントを本当に処理する必要がある場合は、コンテキストとしてbodyを指定してください。

_$(document.body).delegate('.someClass', 'click', function() {
    // run handler
});
_

JQueryの古いバージョンには、実際にdelegate機能があります。 .live()を呼び出すときに、コンテキストプロパティとしてセレクターまたは要素を渡すだけです。もちろん、ページにロードする必要があります。

_$('.someClass', '#someContainer').live('click',function() {
    // run handler
});
_

また、.delegate()と同じ動作をします。

24
user113716

2つの状況が思い浮かびます。

  1. delegate要素でbodyを使用するので、より単純なため、代わりにliveを使用できます。

  2. delegateイベントがまだ実装されていないjQueryライブラリの古いバージョンを使用する必要があります。

3
Guffa

この例を考えてください

<ul id="items">  
   <li> Click Me </li>  
</ul>

$('#items').delegate('li', 'click', function() {  
    $(this).parent().append('<li>New Element</li>');  
});

セレクターのコンテキストとしてDOM要素を渡すことにより、Live（）をdelegate（）と同じように（ほぼ）動作させることができます。デフォルトのコンテキストであるドキュメントではなく、コンテキストにハンドラーをアタッチします。以下のコードは、上記のdelegate（）バージョンと同等です。

$("li", $("#items")[0]).live("click", function() {  
    $(this).parent().append("<li>New Element</li>");  
});

リソース

しかし、パフォーマンスを向上させるためにデリゲートを使用する方がよいでしょう こちらを参照

2
Misagh Aghakhani