.bind()-.live()-.delegate()-.on()

Posted 老街_hehe

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了.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

以上是关于.bind()-.live()-.delegate()-.on()的主要内容,如果未能解决你的问题,请参考以下文章

on()live()delegate()bind()的比较

Jquery 的bind(), live(), delegate(), on()绑定事件方式

jQuery事件绑定on()bind()live()与delegate() 方法详解

jquery bind live delegate on

jQuery中.bind() .live() .delegate() .on()的区别

jQuery中 .bind() .live(). delegate() . on() 的区别