概述：jQuery是我們最常用的js庫，對於事件的綁定也是有很多種，on、one、live、bind、delegate等等，接下來我們逐一來進行講解。 本片文章中事件所帶的為版本號，例：v1.7+為1.7版本以上才有，v3.0 為3.0版本後不推薦使用，特此聲明。 本文參考了 w3school 事件 ...
概述：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）
