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

没有live行为.它找到#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
});

有live行为.它在文档上安装一个事件处理程序,并等待针对匹配"#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 ///////
});

这会将事件处理程序传播到不同的对象,并使它们更接近实际的对象,这意味着您不会最终得到这个巨大的事件处理程序列表,这些事件处理程序必须在每次mousemove或click事件中针对选择器进行检查.这就是为什么.live()被替换和弃用的原因.使用.delegate()或.on()指定远离文档对象的父对象要好得多.

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

所以,这就是关于它们如何工作以及为什么一个配置应该优于另一个配置的理论.如果要测试实际性能,则必须在事件处理程序传播和分发方面进行某种性能测试,可能是在有大量"实时"事件处理程序的情况下.该测试可能并不容易,因为在事件处理程序的开始/结束时可能很难获得时序信息.你不能轻易地使用像jsperf这样的工具来做这样的事情.