jQuery中是事件繫結方法_one、on、bind、live、delegate
概述:jQuery是我們最常用的js庫,對於事件的繫結也是有很多種,on、one、live、bind、delegate等等,接下來我們逐一來進行講解。
本片文章中事件所帶的為版本號,例:v1.7+為1.7版本以上才有,v3.0-為3.0版本後不推薦使用,特此宣告。
一、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)