在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的话
