.live()vs .bind()

我想知道两者之间的主要区别

.live().bind()

方法在jQuery中。

主要区别在于, live也可以用于在页面加载后(即通过javascript代码)创build的元素,而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+来实现相同的function,你需要on()使用一个新的方法on()这个方法在文档对象上调用的语法略有不同,而select器则作为parameter passing。 因此,上面的代码转换为这种绑定事件的新方式将如下所示:

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

我使用FF profiler对.bind().live().delegate()进行了统计分析。 我做了10轮(不是一个足够的样本是明确的,但说明了一点)。 这是结果。

1)使用单击事件使用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)使用单击事件多个dynamic元素(第一个button创build第二个…)

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

解释你的想法,但在我看来,随着dynamic元素在页面上的增加,.delegate()似乎具有最好的性能,而静态元素在.bind()中performance最好。

请记住,我正在使用触发警报的非常简单的点击事件。 不同的页面,不同的环境(如CPU,多标签浏览,运行线程等)将产生不同的结果。 我用这个作为我决定使用这个或那个的基本指导。 请告知,如果你有不同的结果。

谢谢!

你应该考虑尽可能使用.delegate()而不是.live() 。 由于.live()事件委托总是以body / document为目标,所以你可以用.delegate()来限制“ .delegate() ”。

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

UPDATE

从jQuery :

从jQuery 1.7开始, .delegate()已经被.on()方法取代。 然而,对于较早的版本, .delegate()仍然是使用事件委派的最有效手段。

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

我对自己的差异很好奇,于是我写了一篇文章和一些代码示例。 http://blog.tivix.com/2012/06/29/jquery-event-binding-methods/

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