jQuery.one()函數(shù)的詳細(xì)解析

這篇文章主要講解了jQuery.one()函數(shù)的詳細(xì)解析，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

one()函數(shù)用于為每個(gè)匹配元素的一個(gè)或多個(gè)事件綁定一次性事件處理函數(shù)。

此外，你還可以額外傳遞給事件處理函數(shù)一些所需的數(shù)據(jù)。

通過one()函數(shù)綁定的事件處理函數(shù)都是一次性的，只有首次觸發(fā)事件時(shí)會(huì)執(zhí)行該事件處理函數(shù)。觸發(fā)之后，jQuery就會(huì)移除當(dāng)前事件綁定。

此外，你可以為同一元素、同一事件類型綁定多個(gè)一次性的事件處理函數(shù)。觸發(fā)事件時(shí)，jQuery會(huì)按照綁定的先后順序依次執(zhí)行綁定的事件處理函數(shù)。

要?jiǎng)h除通過one()綁定的事件，請使用unbind()或off()函數(shù)。

該函數(shù)屬于jQuery對象(實(shí)例)。

語法

jQuery 1.1 新增該函數(shù)。one()函數(shù)主要有以下兩種形式的用法：

用法一：

jQueryObject.one( events [, data ], handler )

為每個(gè)匹配元素的指定事件綁定事件處理函數(shù)。

用法二：jQuery 1.7 新增支持該用法。

jQueryObject.one( events , selector [, data ], handler )

在每個(gè)匹配元素上為所有符合指定選擇器(selector)的后代元素的指定事件綁定事件處理函數(shù)。

用法三：jQuery 1.7 新增支持該用法。

jQueryObject.one( eventsMap [, selector ] [, data ] )

前面兩種用法的變體。eventsMap是一個(gè)對象，其每個(gè)屬性對應(yīng)參數(shù)events，屬性值對應(yīng)參數(shù)handler。

參數(shù)

參數(shù) 描述

events String類型一個(gè)或多個(gè)用空格分隔的事件類型和可選的命名空間，例如"click"、"focus click"、"keydown.myPlugin"。
data 可選/任意類型觸發(fā)事件時(shí)，需要通過event.data傳遞給事件處理函數(shù)的任意數(shù)據(jù)。
handler Function類型指定的事件處理函數(shù)。
selector String類型一個(gè)jQuery選擇器，用于指定哪些后代元素可以觸發(fā)綁定的事件。
eventsMap Object類型一個(gè)Object對象，其每個(gè)屬性對應(yīng)事件類型和可選的命名空間(參數(shù)events)，屬性值對應(yīng)綁定的事件處理函數(shù)(參數(shù)handler)。
從jQuery 1.7開始，one()函數(shù)的用法和on()函數(shù)是完全一致的，只不過通過one()函數(shù)綁定的都是一次性的事件處理函數(shù)。

關(guān)于參數(shù)events中可選的命名空間(1.4.3+才支持)，請參考最下面的示例代碼。

關(guān)于參數(shù)selector，你可以簡單地理解為：如果該參數(shù)等于null或被省略，則為當(dāng)前匹配元素綁定事件；否則就是為當(dāng)前匹配元素的后代元素中符合selector選擇器的元素綁定事件。

參數(shù)handler中的this指向當(dāng)前匹配元素的后代元素中觸發(fā)該事件的DOM元素。如果參數(shù)selector等于null或被省略，則this指向當(dāng)前匹配元素(也就是該元素)。

on()還會(huì)為handler傳入一個(gè)參數(shù)：表示當(dāng)前事件的Event對象。

參數(shù)handler的返回值與DOM原生事件的處理函數(shù)返回值作用一致。例如"submit"(表單提交)事件的事件處理函數(shù)返回false，可以阻止表單的提交。

如果事件處理函數(shù)handler僅僅只為返回false值，可以直接將handler設(shè)為false。

如果當(dāng)前元素有多個(gè)匹配selector的后代元素，其中只要有任意一個(gè)后代元素觸發(fā)執(zhí)行了事件處理函數(shù)，就會(huì)移除當(dāng)前元素上的事件綁定，當(dāng)前元素內(nèi)符合條件的其他后代元素就無法再次觸發(fā)執(zhí)行。
返回值

one()函數(shù)的返回值為jQuery類型，返回當(dāng)前jQuery對象本身。

示例&說明

請參考下面這段初始HTML代碼：

<input id="btn" type="button" value="點(diǎn)擊" />
<div id="n1">
<p id="n2">段落文本內(nèi)容1</p>
<p id="n3">段落文本內(nèi)容2</p>
<span id="n4">隱藏關(guān)卡</span>
</div>
<div id="n5">
<p id="n6">段落文本內(nèi)容3</p>
<p id="n7">段落文本內(nèi)容4</p>
</div>
<p id="n8">專注于編程開發(fā)技術(shù)分享</p>
我們?yōu)樯鲜鯤TML中的按鈕綁定一次性的click事件：

// 只有第一次點(diǎn)擊時(shí)，執(zhí)行該事件處理函數(shù)
// 執(zhí)行后one()會(huì)立即移除綁定的事件處理函數(shù)
$("#btn").one("click", function(){
alert("只彈出一次提示框!");
});

運(yùn)行代碼(以下代碼請自行復(fù)制到演示頁面運(yùn)行)

此外，我們還可以同時(shí)綁定多個(gè)事件，并為事件處理函數(shù)傳遞一些附加的數(shù)據(jù)，我們可以通過jQuery為事件處理函數(shù)傳入的參數(shù)event(Event事件對象)來進(jìn)行處理：

$("#n4").one("mouseenter mouseleave", obj, function(event){
var obj = event.data;
var $me = $(this);
if(event.type == "mouseenter"){
$me.html( obj.name + '，你碰到了隱藏關(guān)卡，獲得' + obj.hidden + "金幣!" );
}else{
$me.html( '你已通過該關(guān)卡!' );
}

});
網(wǎng)

此外，如果符合條件的元素是在one()函數(shù)執(zhí)行后新添加的，綁定事件依然會(huì)對其生效。同樣以初始HTML代碼為例，我們可以編寫如下jQuery代碼：

注意：雖然下面的jQuery代碼是為n1元素的所有后代p元素綁定click事件，但事件處理函數(shù)本身是綁定在n1元素上的，后代p元素的click事件是委托給n1元素來處理的。只要n2、n3、n9中任意一個(gè)觸發(fā)了click事件，就會(huì)移除body元素上綁定的事件處理函數(shù)。也就是說，n2、n3、n9總共只能執(zhí)行一次該事件處理函數(shù)。

// 在n1元素上為所有后代p元素的click事件綁定事件處理函數(shù)
// 只有n2、n3可以觸發(fā)該事件
$("#n1").one("click", "p", function(event){
alert( $(this).text() );
});

//新添加的n9也可以觸發(fā)上述click事件，因?yàn)樗彩莕1的后代p元素
$("#n1").append('<p id="n9">上述綁定的一次性click事件也會(huì)對該元素也生效!</p>');

請?jiān)賲⒖家韵耲Query代碼。div元素有兩個(gè)，因此每個(gè)div元素都為后代p元素的click事件綁定了事件處理函數(shù)。

// 在每個(gè)div元素上為其后代p元素的click事件綁定事件處理函數(shù)
// 只有n2、n3、n6、n7可以觸發(fā)該事件
// n2和n3兩者總共只能觸發(fā)一次，n6和n7兩者總共只能觸發(fā)一次
$("div").one("click", "p", function(event){
alert( $(this).text() );
});

參數(shù)events還支持為事件類型附加額外的命名空間。當(dāng)為同一元素綁定多個(gè)相同類型的事件處理函數(shù)時(shí)。使用命名空間，可以在觸發(fā)事件、移除事件時(shí)限定觸發(fā)或移除的范圍。

function clickHandler(event){
alert( "觸發(fā)時(shí)的命名空間:[" + event.namespace + "]");
}

var $p = $("p");

// A：為所有p元素綁定click事件，定義在foo和bar兩個(gè)命名空間下
$p.one( "click.foo.bar", clickHandler );

// B：為所有p元素綁定click事件，定義在test命名空間下
$p.one( "click.test", clickHandler );

var $n2 = $("#n2");

/ 由于one()函數(shù)綁定的事件處理函數(shù)是一次性的，因此下面的每行代碼只能分別執(zhí)行，無法同時(shí)執(zhí)行 /

// 觸發(fā)所有click事件
$n2.trigger("click"); // 觸發(fā)A和B (event.namespace = "")

// 觸發(fā)定義在foo命名空間下的click事件
// $n2.trigger("click.foo"); // 觸發(fā)A (event.namespace = "foo")
// 觸發(fā)定義在bar命名空間下的click事件
// $n2.trigger("click.bar"); // 觸發(fā)A (event.namespace = "bar")
// 觸發(fā)同時(shí)定義在foo和bar兩個(gè)命名空間下的click事件
// $n2.trigger("click.foo.bar"); // 觸發(fā)A (event.namespace = "bar.foo")

// 觸發(fā)定義在test命名空間下的click事件
// $n2.trigger("click.test"); // 觸發(fā)B (event.namespace = "test")
one()函數(shù)的參數(shù)eventsMap是一個(gè)對象，可以"屬性-值"的方式指定多個(gè)"事件類型-處理函數(shù)"。對應(yīng)的示例代碼如下：

var eventsMap = {
"mouseenter": function(event){
$(this).html( "Hello!");
},

"mouseleave": function(event){
 $(this).html( "Bye!");
}
};

//為n5綁定mouseenter mouseleave兩個(gè)事件
$("#n5").one( eventsMap );

看完上述內(nèi)容，是不是對jQuery.one()函數(shù)的詳細(xì)解析有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。