.bind()-.live()-.delegate()-.on()
jQuery中的bind(),live(),on(),delegate()
当我们给DOM元素上绑定一些事件的时候,常见的方法就是上边几种了,那么它们之间有什么区别呢?
总结:
·用.bind()的代价是非常大的,它会把相同的一个事件处理程序hook到所有匹配的DOM元素上
.不要再用.live()了,它已经不再被推荐了,而且还有许多问题
.delegate()会提供很好的方法来提高效率,同时我们可以添加一事件处理方法到动态添加的元素上
·我们可以用.on()来代替上述的3种方法
Event bubbling (aka event propagation)冒泡
我们的页面可以理解为一棵DOM树,当我们在叶子结点上做什么事情的时候(如click一个a元素),如果我们不人为的设置stopPropagation(Moder Browser), cancelBubble(IE),那么它的所有父元素,祖宗元素都会受之影响,它们上面绑定的事件也会产生作用。看一个示例:
$('a').bind('click', function() { alert("That tickles!") });
当我们在a 上面点击的时候,首先会触发它本身所绑定的click事件,然后会一路往上,触发它的父元素,祖先元素上所有绑定的click事件。
Bind():
$( "#members li a" ).bind( "click", function( e ) {} );
.bind()是最直接的绑定事件的方法,bind(type,event handler);
它会将同一事件处理程序绑定到所匹配的每个DOM元素上;
这样就会存在一些效率方面的问题:
1.它会隐式地把click handler 加到所有匹配的a标签中,这个过程是很昂贵的;
2.执行的时候也是浪费,同样的事件需要执行了一次又一次。
bind()优点:
· 这个方法提供了一种在各浏览器之间对事件处理的兼容性方案
· 非常方便简单的绑定事件到元素上
· .click(),.hover()这些非常方便的事件绑定,都是bind的一种简化处理方式
· 对于利用ID筛选的元素是非常好的,不仅可以很快的hook上去,而且事件执行时handler可以被立即处理
bind()缺点:
· 会绑定事件到所有匹配的元素上
· 事件处理函数没有办法绑定到后来动态添加的元素上
· 当绑定事件的元素很多的时候会出现效率问题
· 当页面加载完成后,才可以进行bind(),所以可能产生效率问题
.live()
.live()方法用到了事件委托的概念来处理事件的绑定。它和用.bind()来绑定事件是一样的。.live()方法会绑定相应的事件到你所选择的元素的根元素上,即是document元素上。那么所有通过冒泡上来的事件都可以用这个相同的handler来处理了。它的处理机制是这样的,一旦事件冒泡到document上,jQuery将会查找selector/event metadata,然后决定那个handler应该被调用
当handler在执行的时候,因为有冒泡的参与,确实会有一些延迟,但是绑定的时候是特别的快。
/* The .live() method attaches the event handler to the root level document along with the associated selector and event information ( "#members li a" & "click" ) */ $( "#members li a" ).live( "click", function( e ) {} );
上面的code在和.bind()相比的时候有一个好处就是我们不需要在每个元素上再去绑定事件,而只在document上绑定一次就可以了。尽管这个不是最快的方式,但是确实是最少浪费的。
live()优点:
· 这里仅有一次事件绑定,绑定到document上,而不像bind()给每个匹配元素挨个绑定
· 那些动态添加的元素也可以触发之前绑定的事件,因为事件真正绑定在document上
· 可以在document ready 之前就绑定那些需要的事件
live()缺点:
· 从1.7开始已经不被推荐了,所以可以慢慢的而淘汰了
· Chaining没有被正确的支持
· 这里使用event.stopPropagation()是没有用的,因为都要到达document
· 因为所有的selector/event都被绑定到document,所以当我们使用matchSelector方法来选出那个事件被调用时, 会非常慢
· 当发生事件的元素在你的DOM树中很深的时候,会有performance问题
.delegate()
.delegate()有点像.live(),不同于.live()的地方在于,它不会把所有的event全部绑定到document,而是由你决定绑定到哪儿。
而和.live()相同的地方在于都是用event delegation.
/* The .delegate() method behaves in a similar fashion to the .live() method, but instead of attaching the event handler to the document, you can choose where it is anchored ( "#members" ). The selector and event information ( "li a" & "click" ) will be attached to the "#members" element. */ $( "#members" ).delegate( "li a", "click", function( e ) {} );
.delegate() 优点:
· 可以选择把事件绑定到哪个元素上
· chaining被正确的支持了
· jQuery仍然需要迭代查找所有的selector/event data来决定那个子元素来匹配,但是因为你可以决定放在那个根 元素上,所以可以有效的减小你所要查找的元素
· 绑定的事件可以用到动态添加的元素上
.delegate() 缺点:
·在查找事件目标的时候,尽管比绑定到document上少了很多,但是,还是会浪费很多时间来查找
.on()
其实.bind() .live() .delegate()都是通过.on()来实现的,.unbind() .die() .undelegate()也都是通过.off()来实现的,下边是1.8.2的源码:
bind: function( types, data, fn ) { return this.on( types, null, data, fn ); }, unbind: function( types, fn ) { return this.off( types, null, fn ); }, live: function( types, data, fn ) { jQuery( this.context ).on( types, this.selector, data, fn ); return this; }, die: function( types, fn ) { jQuery( this.context ).off( types, this.selector || "**", fn ); return this; }, delegate: function( selector, types, data, fn ) { return this.on( types, selector, data, fn ); }, undelegate: function( selector, types, fn ) { // ( namespace ) or ( selector, types [, fn] ) return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn ); },
看一下,我们用如何用.on()来改写前面通过 .bind(), .live(), .delegate()所注册的事件:
/* The jQuery .bind(), .live(), and .delegate() methods are just one line pass throughs to the new jQuery 1.8.2 .on() method */ // Bind $( "#members li a" ).on( "click", function( e ) {} ); $( "#members li a" ).bind( "click", function( e ) {} ); // Live $( document ).on( "click", "#members li a", function( e ) {} ); $( "#members li a" ).live( "click", function( e ) {} ); // Delegate $( "#members" ).on( "click", "li a", function( e ) {} ); $( "#members" ).delegate( "li a", "click", function( e ) {} );
注意:
错误书写方式:
$("body").on("click",$("#btn"),function(e){})
$("body").on("click","#btn",function(e){})
书写格式:
$("ele").on(type,elem,function(){})
type 和elem 都是String类型
.on()优点:
· 提供了一种统一绑定事件的方法
· 仍然提供了.delegate()的优点
参考资料:
http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/
http://www.elijahmanor.com/2012/02/differences-between-jquery-bind-vs-live.html
详见:http://www.cnblogs.com/moonreplace/archive/2012/10/09/2717136.html