.live() vs .bind()

Question

我想知道它们之间的主要区别

.live()与.bind()

jQuery中的方法。

Answer 1

主要区别在于，live还将适用于加载页面(即通过javascript代码)后创建的元素，而bind将仅为当前已存在的项绑定事件处理程序。

// BIND example
$('div').bind('mouseover', doSomething);
// this new div WILL NOT HAVE mouseover event handler registered
$('<div/>').appendTo('div:last');

// LIVE example
$('div').live('mouseover', doSomething);
// this new appended div WILL HAVE mouseover event handler registered
$('<div/>').appendTo('div:last');

更新：

jQuery 1.7已弃用live()方法，1.9已将其删除。如果您希望使用1.9+实现相同的功能，则需要使用一个新方法on()，该方法的语法与在document对象上调用时的语法略有不同，并且选择器作为参数传递。因此，上面转换为绑定事件的新方法的代码将如下所示：

// ON example
$(document).on('mouseover', 'div', doSomething);
// this new appended div WILL HAVE mouseover event handler registered
$('<div/>').appendTo('div:last');

Answer 2

我使用FF分析器对.bind()、.live()和.delegate()进行了统计分析。我每轮都做了10轮(不是一个足够的样本来确定，但说明了这一点)。这就是结果。

1)使用click事件的具有id的单个静态元素：

.bind():     Mean = 1.139ms, Variance = 0.1276ms
.live():     Mean = 1.344ms, Variance = 0.2403ms
.delegate(): Mean = 1.290ms, Variance = 0.4417ms

2)使用click事件使用公共类的多个静态元素：

.bind():     Mean = 1.089ms, Variance = 0.1202ms
.live():     Mean = 1.559ms, Variance = 0.1777ms
.delegate(): Mean = 1.397ms, Variance = 0.3146ms

3)多个动态元素(第一个按钮创建第二个...)使用click事件：

.bind():     Mean = 2.4205ms, Variance = 0.7736ms
.live():     Mean = 2.3667ms, Variance = 0.7667ms
.delegate(): Mean = 2.1901ms, Variance = 0.2838ms

解释您所希望的，但在我看来，随着页面上动态元素的增加，.delegate()似乎具有最好的性能，而静态元素使用.bind()性能最好。

请记住，我使用的是一个触发警报的非常简单的单击事件。不同的页面，具有不同的环境(例如，CPU、多选项卡浏览、运行线程等)将呈现不同的结果。我将此作为我决定使用其中一个的基本准则。如果你得到了不同的结果，请告知。

谢谢!

Answer 3

只要有可能，您就应该考虑使用.delegate()而不是.live()。因为.live()的事件委派总是以正文/文档为目标，并且您能够使用.delegate()限制“冒泡”。

请参阅http://api.jquery.com

更新

来自jQuery

从jQuery 1.7开始，.delegate()已被.on()方法取代。但是，对于早期版本，.delegate()仍然是使用事件委托的最有效方法。