JQurey事件绑定方法与区别

JQurey中用于绑定事件的方法包括bind()、live()、delegate()和on()。

$(selector).bind(event, data, function)
//jquery1.9版本以下支持，jquery1.9及其以上版本删除了此方法 
$(selector).live(event, data, function)
//jquery1.4.2及其以上版本
$(selector).delegate(childSelector, event, data, function)
//jquery1.7及其以上版本；jquery1.7版本出现之后用于替代bind()，live()绑定事件方式；
$(selector).on(event, childselector, data, function) 

注解：
event：必需项；添加到元素的一个或多个事件，例如 click,dblclick等；
单事件处理：例如 $(selector).bind("click",data,function)
多事件处理：
1. 利用空格分隔多事件，例如 $(selector).bind("click dbclick ",data,function)
2. 利用大括号灵活定义多事件，例如 $(selector).bind({event1:function, event2:function, ...})　
  空格相隔方式：绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况；大括号替代方式：绑定较为灵活，可以给事件单独绑定函数；
data：可选；需要传递的参数；
function：必需；当绑定事件发生时，需要执行的函数；适用所有版本。
A. bind方法
1. 从jQuery 1.0开始存在
2. 直接绑定在元素上，跨浏览器，可以很好的解决兼容问题
3. 简单的实现方法（如.click(), .hover()）
4. 对于利用id选出来的元素是非常好的，不仅仅是很快的可以hook上,而且当事件发生时，方法可以立即被执行(相对于后面的live, delegate)实现方式
缺点：
1. 它会绑定事件到所有的选出来的元素上，但不会绑定到在它执行完后动态添加的那些元素
2. 存在效率问题：当匹配元素多时；
3. 当页面加载完的时候，才可以进行bind()，影响加载效率
B. live方法
1. 通过冒泡的方式来绑定到元素上的, 使用的是事件委托的概念, 更适合列表类型的，绑定到document DOM节点上。
2. 一旦事件冒泡到document上，jQuery将会查找selector/event metadata,然后决定那个handler应该被调用。
3. 当handler在执行的时候，因为有冒泡的参与，确实会有一些延迟，但是绑定的时候是特别的快。
4. 和.bind()相比的时候有一个好处就是我们不需要在每个元素上再去绑定事件，而只在document上绑定一次就可以了。尽管这个不是最快的方式，但是确实是最少浪费的。
优点：
1. 仅有一次的事件绑定，绑定到document上
2. 动态添加的element可触发早已绑定的事件
3. 可以在document ready之前，绑定那些需要的事件
缺点：
1. 从1.7开始已经不被推荐了，所以你也要开始逐步淘汰它了
2. 当使用event.stopPropagation()（或cancelBubble）是无效的
3. 效率问题：所有的selector/event都被绑定到document, 所以查找时那个事件被调用时，会非常慢；当发生事件的元素在你的DOM树中很深的时候，会有效率问题
C. delegate方法
1. 更精确的小范围使用事件代理，性能优于.live(), 直接绑定在元素上
2. jQuery仍需要迭代查找所有的selector/event来决定那个子元素来匹配
3. 可以决定绑定在根元素上，有效的减小你所要查找的元素
4. 可以用在动态添加的元素上
D. on方法
JQurey 1.9版本整合了之前的三种方式的新事件绑定机制，通过on来进行绑定事件，通过off来进行解绑。