jQuery 1.7+ .on（）vs .live（）评价

原帖地址：https://www.sitepoint.com/on-vs-live-review/

我最近看了一个jQuery峰会2011的录音，我想是Adam Sontag建议使用叫做.on（）和.off（）事件处理程序的新函数，而不是.live（）。在过去的几年中，经常使用.live（）之后，我希望看到主要的区别，并考虑使用最近在jQuery 1.7中添加的新函数.on（）和.off（）。

让我们看看这些功能以及它们是如何工作的。

jQuery .live（）

为现在和将来匹配当前选择器的所有元素附加一个事件处理程序。

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

几年前.live（）诞生的时候，就是“狗球！”。最后，我们可以将事件附加到动态插入到DOM中的元素。.live（）在提供这个功能方面做得很好。然而，事实上，jQuery不断发展，现在我们正在看到一些新的孩子。查看.live（）函数的演示。

jQuery .on（）

将一个或多个事件的事件处理函数附加到所选元素。

来源：http：//api.jquery.com/on/

这给我们带来了几个问题。

.live（）有什么问题

不再推荐使用.live（）方法，因为更高版本的jQuery提供了没有缺点的更好的方法。尤其是，使用.live（）会出现以下问题：

1. jQuery尝试在调用.live（）方法之前检索由选择器指定的元素，这在大型文档上可能非常耗时。
2. 链接方法不受支持。例如，$（“a”）。find（“。offsite，.external”）。live（...）; 无效并且不能按预期工作。
3. 由于所有.live（）事件都附加在文档元素处，因此事件在处理之前会采用最长和最慢的路径。
4. 在事件处理程序中调用event.stopPropagation（）在停止附加在文档中较低位置的事件处理程序时无效; 该事件已经传播到文件。
5. .live（）方法与其他事件方法以令人惊讶的方式交互，例如，$（document）.unbind（“click”）将删除所有对.live（）的调用附加的点击处理程序！

.live（）和.on（）函数的主要区别是什么？

功能性：不是冒泡身体和文档级别，而是直接对文档进行注册。

用法：
如果我们看3个主要事件附件的方法，我们可以看到它们非常相似。.live（）没有选择器参数。

$（selector）.live（events，data，handler）; // jQuery 1.3+$（document）.delegate（selector，events，data，handler）; // jQuery 1.4.3+$（document）.on（events，selector，data，handler）; // jQuery 1.7+

性能：我打算创建一个jsPerf测试，但发现有人已经做了很多工作！以下是.live（）和.on（）的性能结果。正如你所看到的，.on（）胜过它的前身.live（），差不多快了3到4倍！

.on（）在早期版本的jQuery中工作吗？

据我所知，.on（）函数只包含在jQuery 1.7中，它不适用于早期版本。

.off（）

删除事件处理程序。

这个很简单，基本上可以用来删除事件处理程序。有点像.unbind（）事件，它删除以前附加到元素的事件处理程序。

bind（）和on（）之间有什么区别？

如果我们看一下jQuery 1.7源代码，我们可以看到bind（）使用on（）和unbind（）使用off（）。所以，基本上没有区别，并维护jQuery早期版本的向后兼容性。

//http://code.jquery.com/jquery-1.7.1.js//line 3755    bind: function( types, data, fn ) {        return this.on( types, null, data, fn );    },    unbind: function( types, fn ) {        return this.off( types, null, fn );    },

总之，正如jQuery专家所建议的那样，您应该开始使用.on（）和.off（）而不是.live（）来进行下一个项目的开发。

2012年4月6日更新

从jQuery 1.7开始，.bind（）和.live（）函数实际上是.on（）函数的别名。当你输入console：“jQuery.fn.bind.toString（）”时，它会返回：“function（a，b，c）{return this.on（a，null，b，c）; }“。

2012年6月20日更新

$('selector').live(event, function(){ //do stuff here })

就是现在

$(document).on(event, selector, function(){ //do stuff here })