jQuery的新on（）方法如何与性能中的live（）方法进行比较？

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这样的工具来做这样的事情。

Answer 2

这是一个性能测试，您可以在自己的浏览器中运行，看看哪个更快： http ： //jsperf.com/jquery-live-vs-on

您与.on()和.live()一起使用的示例在function上并不相同，下面列出了.on() .delegate()和.live()工作原理：

$().on(, )在function上与： $().bind(, ) 。

$().on(, , )在function上与： $().delegate(, , ) 。

$().live(, )在function上与$(document).delegate(, , )function相同，其function与： $(document).on(, , ) 。

正如您所看到的.live()与.delegate()基本相同，但.delegate()提供了将更改为document以外的function。

这在jQuery文档中都有解释：

• .on() ： http ： .on()
• .delegate() ： http ： .delegate()
• .live() ： http ： //api.jquery.com/live

从jQuery 1.7开始，不推荐使用.live（）方法。 使用.on（）附加事件处理程序。 旧版jQuery的用户应该使用.delegate（）而不是.live（）。

资料来源： http ： //api.jquery.com/live