溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了jQuery.one()函數的詳細解析，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
one()函數用于為每個匹配元素的一個或多個事件綁定一次性事件處理函數。
此外，你還可以額外傳遞給事件處理函數一些所需的數據。
通過one()函數綁定的事件處理函數都是一次性的，只有首次觸發事件時會執行該事件處理函數。觸發之后，jQuery就會移除當前事件綁定。
此外，你可以為同一元素、同一事件類型綁定多個一次性的事件處理函數。觸發事件時，jQuery會按照綁定的先后順序依次執行綁定的事件處理函數。
要刪除通過one()綁定的事件，請使用unbind()或off()函數。
該函數屬于jQuery對象(實例)。
語法
jQuery 1.1 新增該函數。one()函數主要有以下兩種形式的用法：
用法一：
jQueryObject.one( events [, data ], handler )
為每個匹配元素的指定事件綁定事件處理函數。
用法二：jQuery 1.7 新增支持該用法。
jQueryObject.one( events , selector [, data ], handler )
在每個匹配元素上為所有符合指定選擇器(selector)的后代元素的指定事件綁定事件處理函數。
用法三：jQuery 1.7 新增支持該用法。
jQueryObject.one( eventsMap [, selector ] [, data ] )
前面兩種用法的變體。eventsMap是一個對象，其每個屬性對應參數events，屬性值對應參數handler。
參數
參數 描述
events String類型一個或多個用空格分隔的事件類型和可選的命名空間，例如"click"、"focus click"、"keydown.myPlugin"。
data 可選/任意類型觸發事件時，需要通過event.data傳遞給事件處理函數的任意數據。handler Function類型指定的事件處理函數。selector String類型一個jQuery選擇器，用于指定哪些后代元素可以觸發綁定的事件。
eventsMap Object類型一個Object對象，其每個屬性對應事件類型和可選的命名空間(參數events)，屬性值對應綁定的事件處理函數(參數handler)。
從jQuery 1.7開始，one()函數的用法和on()函數是完全一致的，只不過通過one()函數綁定的都是一次性的事件處理函數。
關于參數events中可選的命名空間(1.4.3+才支持)，請參考最下面的示例代碼。
關于參數selector，你可以簡單地理解為：如果該參數等于null或被省略，則為當前匹配元素綁定事件；否則就是為當前匹配元素的后代元素中符合selector選擇器的元素綁定事件。
參數handler中的this指向當前匹配元素的后代元素中觸發該事件的DOM元素。如果參數selector等于null或被省略，則this指向當前匹配元素(也就是該元素)。
on()還會為handler傳入一個參數：表示當前事件的Event對象。
參數handler的返回值與DOM原生事件的處理函數返回值作用一致。例如"submit"(表單提交)事件的事件處理函數返回false，可以阻止表單的提交。
如果事件處理函數handler僅僅只為返回false值，可以直接將handler設為false。
如果當前元素有多個匹配selector的后代元素，其中只要有任意一個后代元素觸發執行了事件處理函數，就會移除當前元素上的事件綁定，當前元素內符合條件的其他后代元素就無法再次觸發執行。
返回值
one()函數的返回值為jQuery類型，返回當前jQuery對象本身。
示例&說明
請參考下面這段初始HTML代碼：
<input id="btn" type="button" value="點擊" />
<div id="n1">
<p id="n2">段落文本內容1</p>
<p id="n3">段落文本內容2</p>
<span id="n4">隱藏關卡</span>
</div>
<div id="n5">
<p id="n6">段落文本內容3</p>
<p id="n7">段落文本內容4</p>
</div>
<p id="n8">專注于編程開發技術分享</p>
我們為上述HTML中的按鈕綁定一次性的click事件：
// 只有第一次點擊時，執行該事件處理函數
// 執行后one()會立即移除綁定的事件處理函數
$("#btn").one("click", function(){
alert("只彈出一次提示框!");
});運行代碼(以下代碼請自行復制到演示頁面運行)
此外，我們還可以同時綁定多個事件，并為事件處理函數傳遞一些附加的數據，我們可以通過jQuery為事件處理函數傳入的參數event(Event事件對象)來進行處理：
$("#n4").one("mouseenter mouseleave", obj, function(event){
var obj = event.data;
var $me = $(this);
if(event.type == "mouseenter"){
$me.html( obj.name + '，你碰到了隱藏關卡，獲得' + obj.hidden + "金幣!" );
}else{
$me.html( '你已通過該關卡!' );
}
});
網此外，如果符合條件的元素是在one()函數執行后新添加的，綁定事件依然會對其生效。同樣以初始HTML代碼為例，我們可以編寫如下jQuery代碼：
注意：雖然下面的jQuery代碼是為n1元素的所有后代p元素綁定click事件，但事件處理函數本身是綁定在n1元素上的，后代p元素的click事件是委托給n1元素來處理的。只要n2、n3、n9中任意一個觸發了click事件，就會移除body元素上綁定的事件處理函數。也就是說，n2、n3、n9總共只能執行一次該事件處理函數。
// 在n1元素上為所有后代p元素的click事件綁定事件處理函數
// 只有n2、n3可以觸發該事件
$("#n1").one("click", "p", function(event){
alert( $(this).text() );
});
//新添加的n9也可以觸發上述click事件，因為它也是n1的后代p元素
$("#n1").append('<p id="n9">上述綁定的一次性click事件也會對該元素也生效!</p>');請再參考以下jQuery代碼。div元素有兩個，因此每個div元素都為后代p元素的click事件綁定了事件處理函數。
// 在每個div元素上為其后代p元素的click事件綁定事件處理函數
// 只有n2、n3、n6、n7可以觸發該事件
// n2和n3兩者總共只能觸發一次，n6和n7兩者總共只能觸發一次
$("div").one("click", "p", function(event){
alert( $(this).text() );
});參數events還支持為事件類型附加額外的命名空間。當為同一元素綁定多個相同類型的事件處理函數時。使用命名空間，可以在觸發事件、移除事件時限定觸發或移除的范圍。
function clickHandler(event){
alert( "觸發時的命名空間:[" + event.namespace + "]");
}
var $p = $("p");
// A：為所有p元素綁定click事件，定義在foo和bar兩個命名空間下
$p.one( "click.foo.bar", clickHandler );
// B：為所有p元素綁定click事件，定義在test命名空間下
$p.one( "click.test", clickHandler );
var $n2 = $("#n2");
/ 由于one()函數綁定的事件處理函數是一次性的，因此下面的每行代碼只能分別執行，無法同時執行 /
// 觸發所有click事件
$n2.trigger("click"); // 觸發A和B (event.namespace = "")
// 觸發定義在foo命名空間下的click事件
// $n2.trigger("click.foo"); // 觸發A (event.namespace = "foo")
// 觸發定義在bar命名空間下的click事件
// $n2.trigger("click.bar"); // 觸發A (event.namespace = "bar")
// 觸發同時定義在foo和bar兩個命名空間下的click事件
// $n2.trigger("click.foo.bar"); // 觸發A (event.namespace = "bar.foo")
// 觸發定義在test命名空間下的click事件
// $n2.trigger("click.test"); // 觸發B (event.namespace = "test")
one()函數的參數eventsMap是一個對象，可以"屬性-值"的方式指定多個"事件類型-處理函數"。對應的示例代碼如下：
var eventsMap = {
"mouseenter": function(event){
$(this).html( "Hello!");
},
"mouseleave": function(event){
$(this).html( "Bye!");
}
};
//為n5綁定mouseenter mouseleave兩個事件
$("#n5").one( eventsMap );看完上述內容，是不是對jQuery.one()函數的詳細解析有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
