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()。