Jquery live() vs delegate() [重复]答案

【问题标题】：Jquery live() vs delegate() [duplicate]Jquery live() vs delegate() [重复]
【发布时间】：2011-01-02 15:45:47
【问题描述】：

我在这里和网络上的其他地方阅读了一些关于live() 和delegate() 之间区别的帖子。但是我还没有找到我正在寻找的答案（如果这是一个骗子，请告诉我）。

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

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

更新

我设置了simple test 来查看性能差异。

我还添加了新的.on()，它在 jQuery 1.7+ 中可用

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

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

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

【问题讨论】：

我冒昧地在一个地方总结了这篇优秀的帖子和其他有用的 cmets，以供我自己记录，以防其他人发现它有用。 JQuery live vs delegate vs bind
从 1.7 版开始，.live() 消失了。您将找到新的 .on() 方法。

标签： jquery live

【解决方案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 仅在事件触发时查找元素，从而提供进一步的性能优势。

注意delegate 在幕后使用live，所以你可以用live 做任何你可以用delegate 做的事情。我的回答涉及它们，因为它们是常用的。

还要注意，live 和 delegate 都不是在现代 jQuery 中进行事件委托的最佳方式。新语法（从 jQuery 1.7 开始）使用 on 函数。语法如下：

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

【讨论】：

+1。在live() 中重复使用前面的选择器是令人困惑的，导致用户误解它实际上在做什么。 delegate() 更清晰。此外，虽然delegate()（当前）是使用live() 实现的，但它使用的live() 的四参数版本没有记录，因此可能仅供内部使用。就我个人而言，我总是避免使用live()，除非我出于某种原因需要在 jQuery 1.3 上运行（希望不是）。
@all：来自 jQuery 文档：As of jQuery 1.4, live events can be bound to a DOM element "context" rather than to the default document root. 现在使用 live() 会更好，因为我们可以添加事件上下文。由于delegate() 在内部调用live()。所以我认为少打1个电话。还是我错了？
很好的答案。非常好。不过，我还是更喜欢直播。除非我的应用程序是一个巨大的 js 应用程序，否则 live 的简单性大于性能增益。此外，由于我通常会使用 bind（或其中一个较短的版本），因此非常接近。仍然是一个非常好的答案。让我真正了解了差异。 +1。
@PeeHaa 我认为你是对的，但正如你之前提到的，使用委托使事情更容易阅读。
@trusktr 实际上我大错特错了。请参阅我更新的问题以进行性能测试。

【解决方案2】：

它们完全一样，除了：

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

当你调用.delegate()时，它只是转身调用.live()，但是传递了额外的context参数。

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()一样。

【讨论】：

我不知道为什么这个答案没有更多的选票。 .delegate() 使用 .live()。性能方面，.delegate() 明显优于 .live()：stackoverflow.com/questions/2690370/live-vs-bind/…
同意 .live 慢得多。

【解决方案3】：

想到两种情况：

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

【讨论】：

【解决方案4】：

考虑这个例子

<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>");  
});

Resource

但是，您最好使用委托以获得更好的性能see here

【讨论】：