jquery - jQuery 的新 on() 方法与 live() 方法在性能上相比如何？

Question

jQuery 有一个名为 on() 的新方法，建议替换 delegate()、live() 和 .bind().

例如，使用这两种方法:

$('#some-button').on('click', function() {
    //do something when #some-button is clicked
});
$('#some-button').live('click', function() {
    //do something when #some-button is clicked
});

哪一个表现更好？ (我确实知道这两个事件上下文都处于文档级别。)

Answer 1

据我了解 .live() 和 .on()，您所包含的两个示例并不是同一件事。

你的第一个:

$('#some-button').on('click', function() {
    //do something when #some-button is clicked
});

没有实时行为。它找到#some-button对象并直接在其上安装事件处理程序。这非常有效，但没有 .live() 行为。如果此时 #some-button 对象不存在，则不会安装任何事件处理程序。基本上是这样的:

$('#some-button').click(function() {
    //do something when #some-button is clicked
});

你的第二个:

$('#some-button').live('click', function() {
    //do something when #some-button is clicked
});

具有实时行为。它在文档上安装一个事件处理程序，并等待针对与“#some-button”匹配的对象的点击，以冒泡到文档对象。您的第二个理论上相当于:

$(document).on('click', '#some-button', function() {
    //do something when #some-button is clicked
});

我说理论上是等价的，因为它应该安装相同的事件处理程序，但我不知道处理这两个事件的 jQuery 代码是否相同。

.live() 已被弃用的原因之一是拥有大量 .live() 处理程序可能是一件坏事，因为您会得到文档对象上有很多事件处理程序。然后，每次点击甚至鼠标移动都必须针对大量选择器进行检查，这确实会减慢速度。

.live() 的另一个问题是，它在您进行调用时评估选择器“#some-button”，但实际上并不使用该结果，因此这是浪费。当您进行第一次调用时，.on() 版本不会评估作为参数传递给 .on() 的选择器，因为当时不需要它- 仅当实际点击到来时才需要与选择器进行比较。

随着 .on()(或者以前可以使用 .delegate() 做的事情)的出现，您可以更有效地定位“实时”事件处理程序不要将它们全部放在文档对象上，而是将它们放在一个不会来来去去的父对象上，并且更接近真实对象的位置，如下所示:

$('#some-button-parent').on('click', '#some-button', function() {
    //do something when #some-button is clicked ///////
});

这会将事件处理程序分散到不同的对象，并使它们更接近它们所代表的实际对象，这意味着您最终不会得到这个巨大的事件处理程序列表，每次鼠标移动或移动时都必须对照选择器进行检查单击事件。这就是 .live() 被替换和弃用的原因。最好使用 .delegate() 或 .on() 并指定一个距离文档对象不太远的父对象。

新的 .on() 语法的优点是，您现在可以使用相同的方法执行“实时”和“静态”事件处理程序，只需改变传递参数的方式即可。 jQuery 对象是事件处理程序将安装的位置，第二个参数中的可选选择器是事件目标必须匹配的选择器。如果传递该选择器，则命中 jQuery 对象中指定的对象的所有事件都将根据该选择器检查其目标。如果没有选择器，则只会匹配目标与 jQuery 对象中指定的对象相同的对象。

所以，这就是关于它们如何工作以及为什么一种配置应该比另一种配置更好的所有理论。如果您想测试现实世界的性能，您可能必须在有大量“实时”事件处理程序的情况下设计某种对事件处理程序传播和分发的性能测试。该测试可能不容易完成，因为可能很难获取事件处理程序开始/结束的计时信息。您不能轻松地使用像 jsperf 这样的工具来完成这样的事情。