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

分别用.bind()  .live()  .delegate()  .on() 实现光棒效果

.bind()

.bind()注册的事件直接指向相对应的DOM元素。这个方法从jquery 1.0都有了，并且这个方法能够很酷的处理跨浏览器的事件绑定问题。对，这个方法用起来很方便。但是问题来了，就是各种各样的性能问题

$(function(){
         $("li").bind({
             mouseover:function(){
                 $(this).css("background","pink");
               },
             mouseout:function(){
                 $(this).css("background","");
            },
         });
}); 

优点

 

• 跨浏览器
• 非常方便和快捷地绑定事件
• 对于简单的ID选择器来说，使用.bind()不仅方便，而且当触发这个事件的时候能够即时响应。

缺点

• 这个方法会附加相同的处理程序到每一个匹配到的元素上
• 对于动态添加的属于匹配到的元素，不会被触发事件的
• 性能问题，对于处理大量的匹配元素的时候
• 如果在页面加载前要处理添加事件的话，会影响加载效率的

.live()

调用.live()方法看起来和调用.bind()方法一样，非常方便。但是他们下面的实现原理却不同。.live()方法附加事件处理程序到根一级的document上来关联匹配到的元素和事件信息。通过注册事件处理程序到document上来允许事件处理程序通过冒泡来绑定事件和匹配的元素（译者：注意，事件其实在document上的）。一旦事件冒泡到document的时候，jQuery判断选择器和事件处理程序是否有匹配到的，如果有的话，则调用对应的事件处理程序。很明显的会在用户使用的过程中有性能问题，但是在绑定注册的时候是非常的迅速的。

$(function(){
                 $("li").live({
                     mouseover:function(){
                         $(this).css("background","pink");
                     },
                     mouseout:function(){
                         $(this).css("background","");
                     }
                 });
             });

优点

• 相对于.bind()的循环注册很多次事件处理程序来说，.live()只注册一次事件处理程序
• 从.bind()更新到.live()的方法对程序更改很少，只需要替换“bind”为”live”
• 对于动态添加的属于匹配到的元素，也能够“神奇”的执行处理程序
• 在document元素没有全部加载完之前都能够几乎不花时间地绑定并触发事件

缺点

• 此方法在jQuery1.7的时候已经废除，你应该逐步从你的代码中替换掉该方法
• 链接不能够正常的支持这个方法
• 这个方法被抛弃是因为它只能够绑定事件处理程序到document上
• event.stopPropagation()不再有效了，因为事件已经委托到了document上了
• 由于所有的选择器和事件信息都是附加到了document上的，所以一个确定的事件要触发，必须通过大量的存储信息来匹配到
• 由于事件都是委托到了document上的，所以如果DOM太深的话，会影响到性能的

 

.delegate() 

.delegate()方法的行为有点类似.live()。但是不是把选择器和事件的信息附加到了document上，而是可以自行选择它要附加的DOM元素，这个技术可以让事件的委托正常工作。 如果你跳过了.live()的介绍和分析，请先跳回去读一下，接着我才能向你表述清楚下面的逻辑

$(function(){
         $("ul").delegate("li",{
            mouseover:function(){
            $(this).css("background","red");
         },
         mouseout:function(){
          $(this).css("background","");
             }
        });
}); 

优点

• 可以*选择附加的选择器和事件信息的位置
• 链接也可以有效的支持了
• jQuery仍然需要循环访问选择器和事件数据来确定匹配，但是因为能够选择这些信息附加的位置，所以通过匹配的量小很多了
• 由于这种技术使用了事件委托，所以它能很好的动态处理添加到DOM元素
• 如果你委托事件到了document上，你也可以在document全部准备完之前绑定和调用

缺点

• 方法从.bind()更改到.delegate()比较麻烦
• 如果把选择器和事件数据附加到了document上，仍然需要很多的匹配信息，但是相对于.live()的存储量要小很多了

 

.on()

你知道jQuery中的.bind() .live 和 .delegate()方法都是通过同一个新方法实现的.on() （在jQuery1.7后）

$(function(){
            $("li").on({
                mouseover:function(){
                    $(this).css("background","yellow");
                },
                mouseout:function(){
                    $(this).css("background","");
                }
            });
        });

优点

• 为各种事件绑定方法带来了统一性
• 简化了jQuery代码库，并删除一个界别的重定向，因为通过调用这个方法实现了 .bind() .live() 和 .delegate()
• 仍然提供了好用的.delegate()方法，但是也仍然对.bind()方法提供了支持

缺点

• 因为调用这个方法的各个形式，会带来一些混乱

总结：

从这篇文章中应该记住的要点：

• 使用.bind()方法是很浪费资源的，因为它要匹配选择器中的每一项并且挨个设置相同的事件处理程序
• 建议停止使用.live()方法，因为它已经被弃用了，由于他有很多的问题
• .delegate()方法“很划算”用来处理性能和响应动态添加元素的时候
• 新的.on()方法主要是可以实现.bind() .live() 甚至 .delegate()的功能
• 建议使用.on()方法，如果你的项目使用了1.7+的jQuery的话