jQuery的4种事件绑定方式的区别

1.bind()

bind方法为匹配元素添加一个或多个事件。用法如下：

bind(event,data,function)

参数说明：

event:必须参数项，添加到元素的一个或多个事件，如click、dbclick等。

data:可选参数项，设计需要传递的参数。 

function:必须参数项，当绑定事件发生时，需要执行的函数。

提示：bind()方法适用于所有版本，但是根据官网解释，自从jQuery1.7版本以后，推荐使用on()方法代替bind()方法。

$(function () {
	/*添加单个事件处理*/
	$(".btn-test").bind("click", function () {
		//显示隐藏div
		$(".container").slideToggle();
	});
	/*添加多个事件处理*/
	//空格相隔方式
	$(".btn-test").bind("mouseout click", function () {
		//显示隐藏div
		$(".container").slideToggle();
	});
	//大括号替代方式
	$(".btn-test").bind({
		"mouseout": function () {
			alert("这是mouseout事件!");
		},
		"click": function () {
			$(".container").slideToggle();
		}
	});
	/*删除事件处理*/
	$(".btn-test").unbind("click");
});

2.live()

live()方法为当前或未来的匹配元素添加一个或多个事件处理程序。用法如下：

live(event,data,function)

参数说明：

event:必须参数项，添加到元素的一个或多个事件，如click、dbclick等。

data:可选参数项，设计需要传递的参数。 

function:必须参数项，当绑定事件发生时，需要执行的函数。

提示：jQuery版本一下支持live()，jQuery1.9及其以上版本删除了该方法，jQuery1.9以上版本用on()来代替。

3.delegate()

delegate()方法为指定的元素，以及被选元素的子元素，添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用delegate()方法适用于当前或未来的元素，如由脚本创建的新元素等。用法如下：

delegate(childSelector,event,data,function)

参数说明如下：

childSelector:必须参数，指定需要注册事件的元素，一般为调用对象的子元素。

event:必须参数项，添加到元素的一个或多个事件，如click、dbclick等。

data:可选参数项，设计需要传递的参数。 

function:必须参数项，当绑定事件发生时，需要执行的函数。

提示：delegate()适用于jQuery1.42及其以上版本。

$(function () {
	$("ul").delegate("li","click",function(){
		alert(this.innerHTML);
	});
	var i = 4;
	$("#btn").click(function(){
		$("ul").append("<li>列表项目" + i++ + "</li>")
	})
});

4.on()

on()方法为指定的元素添加一个或多个事件处理程序，并规定当这些元素事件发生时运行的函数。使用on()方法的事件处理程序适用于当前或未来的元素，如由脚本创建的新元素。用法如下：

on(event,childSelector,data,function)

参数说明如下：

event:必须参数项，添加到元素的一个或多个事件，如click、dbclick等。

childSelector:必须参数，指定需要注册事件的元素，一般为调用对象的子元素。

data:可选参数项，设计需要传递的参数。 

function:必须参数项，当绑定事件发生时，需要执行的函数。

提示：on()适用于jQuery1.7及其以上版本，jQuery1.7版本出现之后用于替代bind()、live()方法绑定事件方法。

$(function () {
	$("ul").on("click","li",function(){
		alert(this.innerHTML);
	});
	var i = 4;
	$("#btn").click(function(){
		$("ul").append("<li>列表项目" + i++ + "</li>")
	})
});

$(function () {
	$("ul").on("click","li",{a:"A",b:"B"},function(event){
		 $(this).text(event.data.a + event.data.b);
	});
});

拓展:比较四种事件绑定方式的异同和优缺点

相同点：

(1)都支持单元素多事件的绑定，都支持空格相隔方式或者大括号替代方式。

(2)均是通过事件冒泡方式，将事件传递到document进行事件的响应式。

不同点：

(1)bind()只能针对已存在的元素进行绑定事件的设置，但是live()、on()、delegate()均支持委派事件，即可以为未来新元素添加元素注册事件。

(2)bin()函数在jQuery1.7版本以前比较受推崇，jQuery1.7 版本出来之后，官方已经不推荐用bind(),替代函数为on()。on()可以代替live()，live()方 法在jQuery 1.9 版本已经被删除。
(3) live(与delegate0类似，但是live0在执行速度、灵活性和CSS选择器支持方面比delegate()弱。
(4) bind0支持jQuery版本1和版本2，在版本3中被弃用; live0支持 jQuery1.8-,高版本不再支持;delegate()支持jQuery1.4.2+,在jQuery版本3中被弃用; on0支持 jQuery1.7+。总之，如果项目中引用jQuery为低版本，推荐用delegate(),高版本jQuery可以使用on0来代替，在jQuery 3+版本中只支持on()。