jq绑定事件：on、bind、delegate、live的异同

1. 给页面上的某个元素绑定事件，最初采用下面的方式实现：

$(‘selector’).click(function(){


});

缺点：

不能同时绑定多个事件，不能绑定动态的元素。

后来接触到了on、bind、live、delegate，如下是对它们的一些探究。

2. bind(type,[data],fn)，为每一个匹配元素的特定事件绑定事件处理函数，是直接绑定在元素上

说明：

type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。好比"click"或"submit"

data:做为event.data属性值传递给事件对象的额外数据对象

fn:绑定到每一个匹配元素的事件上面的处理函数

注意：

bind (type,[data],false) false: 将第三个参数设置为false会使默认的动做失效

jQuery各个版本都支持

使用：

①.同时绑定多个事件类型:

$('selector').bind('mouseenter mouseleave', function() { 

      //code

});

②.同时绑定多个事件类型/处理程序:

$("button").bind({  
  click:function(){//code},  
  mouseover:function(){//code},    
  mouseout:function(){//code}    
});

③.能够在事件处理以前传递一些附加的数据

function handler(event) {  
  alert(event.data.name);  
}  
$("selector").bind("click", {name: "Mary"}, handler)

④.经过返回false来取消默认的行为并阻止事件冒泡

$("form").bind("submit", function() { return false; })

或 $("form").bind("submit", false)

解绑：

unbind()：移除bind进行的绑定

优势：

①. 这个方法提供了一种在各类浏览器之间对事件处理的兼容性解决方案

②. .click(), .hover()等事件绑定，都是bind的一种简化处理方式

缺点：

①. 它会绑定事件到全部的选出来的元素上，当绑定的元素较多时(如：表格的每一个单元格)，会查找和遍历每一个单元格，致使脚本执行速度明显变慢；且保存表格的多个单元格元素和相应的处理程序也会占用大量内存。简言之：绑定元素较多时，效率低下，占用内存。

②. bind只能给调用它的时候已经存在的元素绑定事件，不能给将来新增的元素绑定事件，即不能动态绑定到新增的元素上

③. 当页面加载完的时候，才能够进行bind()

解决：事件委托/事件代理

补充：

（1）事件代理

实现原理：利用浏览器中的事件冒泡和事件源（target || srcElement）

在特定场景中的好处：

①. 须要管理的handler（句柄）更少，handler即须要管理的元素

②. 占用的内存更少（建立的驻留在内存中的handler少了）

③. DOM元素与代码更少的绑定

④. DOM变动后（如添加dom节点）无须从新绑定事件处理器

缺点：

①.并不是全部的事件都能冒泡，如load, change, submit, focus, blur(jQuery间接的实现了focus和blur的事件代理)

③.代理元素的handler管理复杂

④.很差模拟用户触发事件（jQuery实现了）

（2）事件冒泡

W3C对DOM2.0定义的标准事件处理流程分为三个阶段：事件捕获阶段、事件目标阶段、事件冒泡阶段

说明：

事件捕获：当某个元素触发某个事件（如onclick），顶层对象document就会发出一个事件流，随着DOM树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。在这个过程当中，事件相应的监听函数是不会被触发的。

事件目标：当到达目标元素以后，执行目标元素该事件相应的处理函数。若是没有绑定监听函数，那就不执行。

事件冒泡：从目标元素开始，往顶层元素传播。途中若是有节点绑定了相应的事件处理函数，这些函数都会被一次触发。若是想阻止事件起泡，可使用e.stopPropagation()（Firefox）或者e.cancelBubble=true（IE）来阻止事件的冒泡传播。

3. live(type,[data],fn)，给全部匹配的元素附加一个事件处理函数，即便这个元素是之后再添加进来的

说明：

①live()方法是jQuery 1.3新增的，目的是为了解决.bind()方法的缺点，jQuery1.7 以后废弃，jQuery1.9 删除

②live()是经过冒泡的方式绑定到元素上的，更适合列表类型，live()方法会把事件绑定到$(document)对象（但这一点从代码中体现不出来，这也是.live()方法饱受诟病的一个重要缘由）, 并且只须要给$(document)绑定一次, 而后就可以处理后续动态加载的元素的事件。在接收到任何事件时，$(document)对象都会检查事件类型和事件目标，若是是对应的事件且事件目标是对应的目标，那么就执行委托给它的处理程序。

简单使用：$("table td").live("click",fn)

解绑：$("table td").die("click",fn)

缺点：

①. $()函数会找到当前页面中的全部td元素并建立jQuery对象，但在确认事件目标时却不用这个td元素集合，而是使用选择符表达式与event.target或其祖先元素进行比较，于是生成这个jQuery对象会形成没必要要的开销

②. 默认把事件绑定到$(document)元素，若是DOM嵌套结构很深，事件冒泡经过大量祖先元素会致使性能损失，即存在事件传播链过长的问题

③. 只能放在直接选择的元素后面，不能在连缀的DOM遍历方法后面使用，即$("table td").live...能够，但$("table").find("td").live...不行

④. 收集td元素并建立jQuery对象，但实际操做的倒是$(document)对象，使人费解

4. $(selector).delegate(childSelector,[type],[data],fn) ，为指定的当前或将来的元素（被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

说明：

delegate()是jQuery 1.4.2新增的，目的是为了解决live()”事件传播链”过长的问题以及不支持链式绑定

delegate()方法的实现依赖于live()

简单使用：$("table").delegate("td","click",function(){//code})

优势：

使用.delegate()有以下优势（或者说解决了.live()方法的以下问题）：

①.直接将目标元素选择符（"td"）、事件（"click"）及处理程序与“受拖方”$("table")绑定，不额外收集元素、事件传播路径缩短、语义明确；更精确的小范围使用事件代理，性能优于.live()

②.支持在连缀的DOM遍历方法后面调用，即支持$("table").find("#info").delegate...，支持精确控制；

注意：

使用事件委托时，若是注册到目标元素上的其余事件处理程序使用.stopPropagation()阻止了事件传播，那么事件委托就会失效。 解绑：undelegate()

5. $(selector).on(events,[childSelector],[data],fn) ，在被选当前及将来的元素及子元素上添加一个或多个事件处理程序

说明：

事件绑定与解绑一共有3组（bind、live、delegate），为了不混乱，自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。（推荐使用）

解绑： off()

提示：如需添加只运行一次的事件而后移除，使用 one() 方法