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

Posted 2020-09-12 老街_hehe

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