.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(),该方法在文档对象上调用的语法略有不同,并且选择器作为参数传递.因此,上面转换为这种新的绑定事件方式的代码将如下所示:

// 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()vs .live()vs .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

UPDATE

来自jQuery:

截至jQuery 1.7,.delegate()已被该.on()方法取代.但是,对于早期版本,.delegate()仍然是使用事件委派的最有效方法.

Answer 4

从v1.7开始,.live,.bind和.delegate都已被http://api.jquery.com/on/取代.on

我自己很好奇,所以我写了一篇包含一些代码示例的文章. http://blog.tivix.com/2012/06/29/jquery-event-binding-methods/.

听起来像取决于你如何调用.on(),jquery会模仿.bind,.live或.delegate.这为您的事件处理程序提供了更优雅的实现.