Jquery live() vs committee()

我已经在这里和其他地方阅读了一些关于 live()和 delegate()之间的差异的文章。然而，我还没有找到我要找的答案(如果这是一个愚弄请告诉我)。

我知道 live和 delegate的区别在于 live不能用在链条中。我还在某些地方读到过 delegate在某些情况下更快(性能更好)。

我的问题是，是否存在使用 live而不是 delegate的情况？

更新

我设置了一个 简单的测试来观察性能上的差异。

我还添加了 jQuery 1.7 + 中提供的新 .on()

结果基本上总结了答案中提到的性能问题。

  • 除非 jQuery 版本不支持 .delegate()，否则不要使用 .live()。
  • 除非 jQuery 版本不支持 .on()，否则不要使用 .delegate()。

.live()和 .delegate()之间的差异比 delegate()和 .on()之间的差异大得多。

39737 次浏览
小开

Two situations come to mind:

  1. You would be using delegate on the body element, so then you can just use live instead as it's simpler.

  2. You need to use an older version of the jQuery library, where the delegate event is not yet implemented.

小开

They are exactly the same except:

  • .delegate() lets you narrow down the a local section of the page, while .live() must process events in the entire page.
  • .live() starts with a wasted DOM selection

When you call .delegate(), it just turns around and calls .live(), but passes the extra context parameter.

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

As such, I'd always use .delegate(). If you really need for it to process all events on the page, then just give it the body as the context.

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

Older versions of jQuery actually have delegate functionality. You just need to pass a selector or element as the context property when calling .live(). Of course, it needs to be loaded on the page.

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

And you have the same behavior as .delegate().

小开
最佳答案

I never use live; I consider the benefits of using delegate to be so substantial as to be overwhelming.

The one benefit of live is that its syntax is very close to that of bind:

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

delegate, however, uses a slightly more verbose syntax:

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

This, however, seems to me to be much more explicit about what is actually happening. You don't realise from the live example that the events are actually being captured on document; with delegate, it is clear that the event capturing happens on #containerElement. You can do the same thing with live, but the syntax becomes increasingly horrid.

Specifying a context for your events to be captured also improves performance. With the live example, every single click on the entire document has to be compared with the selector a.myClass to see if it matches. With delegate, that is only the elements within #containerElement. This will obviously improve performance.

Finally, live requires that your browser looks for a.myClass whether or not it currently exists. delegate only looks for the elements when the events are triggered, giving a further performance advantage.

NB delegate uses live behind the scenes, so you can do anything with live that you can do with delegate. My answer deals with them as they are commonly used.

Note also that neither live nor delegate is the best way to do event delegation in modern jQuery. The new syntax (as of jQuery 1.7) is with the on function. The syntax is as follows:

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

Consider this example

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


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

By passing a DOM element as the context of our selector, we can make Live() behave (almost) the same way that delegate() does. It attaches the handler to the context, not the document - which is the default context. The code below is equivalent to the delegate() version shown above.

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

Resource

But, you'd better use delegate for better performance see here


提交答案