Question

我已在此处和网络上的其他位置阅读了有关live()和delegate()之间差异的一些帖子。但是我没有找到我正在寻找的答案（如果这是一个骗局请告诉我）。

我知道live和delegate之间的区别在于live不能在链中使用。我还在某处读过delegate在某些情况下更快（性能更好）。

我的问题是，您是否应该使用live代替delegate？

更新

我已设置simple test以查看效果差异。

我还添加了jQuery 1.7 +

中提供的新.on()

结果几乎总结了答案中所述的性能问题。

除非您的jQuery版本不支持.live()，否则请勿使用.delegate()。
除非您的jQuery版本不支持.delegate()。

.on()

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

Answer 1

我从不使用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() { ... });

Answer 2

它们完全相同，除了：

.delegate()可让您缩小页面的本地部分，而.live()则必须处理整个页面中的事件。
.live()以浪费的DOM选择开始

当您致电.delegate()时，它只是转身并调用.live()，但会传递额外的上下文参数。

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

因此，我总是使用.delegate()。如果您真的需要它来处理页面上的所有事件，那么只需将body作为上下文。

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

~~旧版本的jQuery实际上具有delegate功能。您只需在调用.live()时将选择器或元素作为上下文属性传递。当然，它需要加载到页面上。~~

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

~~您的行为与.delegate()相同。~~

Answer 3

有两种情况浮现在脑海中：

您将在delegate元素上使用body，因此您可以使用live代替它，因为它更简单。
您需要使用旧版本的jQuery库，其中delegate事件尚未实现。

Answer 4

考虑这个例子

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

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

通过传递DOM元素作为我们的选择器的上下文，我们可以使Live（）的行为（几乎）与委托（）的行为相同。它将处理程序附加到上下文，而不是文档 - 这是默认上下文。下面的代码等同于上面显示的delegate（）版本。

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

Resource

但是，您最好使用委托来获得更好的效果see here

Jquery live（）vs delegate（）

4 个答案: