.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()
”。
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。 这给你的事件处理程序一个更优雅的实现。