jQuery中是事件绑定方式--on、bind、live、delegate

概述：jQuery是我们最常用的js库，对于事件的绑定也是有很多种，on、one、live、bind、delegate等等，接下来我们逐一来进行讲解。

本片文章中事件所带的为版本号，例：v1.7+为1.7版本以上才有，v3.0-为3.0版本后不推荐使用，特此声明。

本文参考了w3school 事件 的部分内容

一、one(V1.7+)

one() 方法为被选元素附加一个或多个事件处理程序，并规定当事件发生时运行的函数,每个元素只能运行一次事件处理器函数。

其语法如下

$(selector).one(event,data,function)

参数	描述
event	必需。规定添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。
data	可选。规定传递到函数的额外数据。
function	必需。规定当事件发生时运行的函数。

例子：

$("p").one("click", function(){
  alert( $(this).text() );
});
//例子表明了p标签第一次被点击时弹出其文本。

二、live(v1.7-)与die(v1.7-)

live方法附加一个事件处理器到匹配目前选择器的所有元素，现在和未来。

其语法如下

$(selector).live(event,data,function)

参数	描述
event	必需。规定附加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。
data	可选。规定传递到该函数的额外数据。
function	必需。规定当事件发生时运行的函数。

例子：

$("a").live("click", function() {
	return false;
})

此方法在1.7版本已不推荐使用，推荐使用on，在1.7版本以下推荐使用delegate方法。

live方法有如下缺点：

①.在调用 .live() 方法之前，jQuery 会先获取与指定的选择器匹配的元素，这一点对于大型文档来说是很花费时间的。

②.不支持链式写法。例如，$("a").find(".offsite, .external").live( ... ); 这样的写法是不合法的，并不能像期待的那样起作用。

③.由于所有的 .live() 事件被添加到 document 元素上，所以在事件被处理之前，可能会通过最长最慢的那条路径之后才能被触发。

die方法是从元素中删除先前用.live()绑定的所有事件。此方法与live正好完全相反。

语法：

$(selector).die(event,function)

参数	描述
event	必需。规定要移除的一个或多个事件处理程序。由空格分隔多个事件值。必须是有效的事件。
function	可选。规定要移除的特定函数。

例子：

$("p").die("click", , function() {
	return false;
});

此方法在1.7版本以上不推荐使用，可用off来代替。

三、bind(v3.0-)与unbind(v3.0-)

bind方法为每个匹配元素的特定事件绑定事件处理函数。

语法

$(selector).bind(event,data,function)

参数	描述
event	必需。规定添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。
data	可选。规定传递到函数的额外数据。
function	必需。规定当事件发生时运行的函数

例子

$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});
//由空格分隔多个事件

在3.0版本以上不推荐使用，可用on方法替代。

unbind是bind()的反向操作，从每一个匹配的元素中删除绑定的事件。

语法

$(selector).unbind(event,function)

参数	描述
event	可选。规定删除元素的一个或多个事件由空格分隔多个事件值。如果只规定了该参数，则会删除绑定到指定事件的所有函数。
function	可选。规定从元素的指定事件取消绑定的函数名。

例子：

$( "#foo" ).bind( "click", function() {
  alert( "" );
});

在3.0版本以上不推荐使用，可用off方法替代

四、delegate(v3.0-)与undelegate(v3.0-)

delegate方法指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。适用于当前或未来的元素。

语法

$(selector).delegate(childSelector,event,data,function)

参数	描述
childSelector	必需。规定要附加事件处理程序的一个或多个子元素。
event	必需。规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
data	可选。规定传递到函数的额外数据。
function	必需。规定当事件发生时运行的函数。

例子

$("table").delegate("td", "hover", function(){
    $(this).toggleClass("hover");
});

在3.0版本以上不推荐使用，请使用on方法代替

undelegate() 方法删除由 delegate() 方法添加的一个或多个事件处理程序。

语法

$(selector).undelegate(selector,event,function)

参数	描述
selector	可选。规定需要删除事件处理程序的选择器。
event	可选。规定需要删除处理函数的一个或多个事件类型。
function	可选。规定要删除的具体事件处理函数。

在3.0版本以上不推荐使用，请使用off方法代替

五、on(v1.7+)与off(v1.7+)

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。适用于当前及未来的元素

语法

$(selector).on(event,childSelector,data,function)

参数	描述
event	必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值，也可以是数组。必须是有效的事件。
childSelector	可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。
data	可选。规定传递到函数的额外数据。
function	可选。规定当事件发生时运行的函数。

例子

$("p").on("click", function(){
alert( $(this).text() );
});

off() 方法通常用于移除通过 on() 方法添加的事件处理程序。

语法

$(selector).off(event,selector,function(eventObj),map)

参数	描述
event	必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。
selector	可选。规定添加事件处理程序时最初传递给 on() 方法的选择器。
function(eventObj)	可选。规定当事件发生时运行的函数。
map	规定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

例子

$("body").off("click", "p", , function(){

});

总结

1.可为未来元素绑定事件的有：live方法、delegate方法、on方法，1.7版本之前推荐使用delegate方法。1.7版本以后推荐使用on方法。

2.推荐尽量使用on方法与off方法。因为其他方法都是基于on方法的。我们看jQuery源码即可知道。（jquery源码v3.3.1）