jQuery中事件绑定bind、live、delegate、on方法

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

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

        //code

});

缺点：

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

后来接触到了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() 方法