深入分析jQuery.one() 函數(shù)
one()函數(shù)用于為每個匹配元素的一個或多個事件綁定一次性事件處理函數(shù)。
此外,你還可以額外傳遞給事件處理函數(shù)一些所需的數(shù)據(jù)。
通過one()函數(shù)綁定的事件處理函數(shù)都是一次性的,只有首次觸發(fā)事件時會執(zhí)行該事件處理函數(shù)。觸發(fā)之后,jQuery就會移除當前事件綁定。
此外,你可以為同一元素、同一事件類型綁定多個一次性的事件處理函數(shù)。觸發(fā)事件時,jQuery會按照綁定的先后順序依次執(zhí)行綁定的事件處理函數(shù)。
要刪除通過one()
綁定的事件,請使用unbind()
或off()
函數(shù)。
該函數(shù)屬于jQuery對象(實例)。
語法
jQuery 1.1 新增該函數(shù)。one()函數(shù)主要有以下兩種形式的用法:
用法一:
jQueryObject.one( events [, data ], handler )
為每個匹配元素的指定事件綁定事件處理函數(shù)。
用法二:jQuery 1.7 新增支持該用法。
jQueryObject.one( events , selector [, data ], handler )
在每個匹配元素上為所有符合指定選擇器(selector)
的后代元素的指定事件綁定事件處理函數(shù)。
用法三:jQuery 1.7 新增支持該用法。
jQueryObject.one( eventsMap [, selector ] [, data ] )
前面兩種用法的變體。eventsMap
是一個對象,其每個屬性對應(yīng)參數(shù)events
,屬性值對應(yīng)參數(shù)handler
。
參數(shù)
參數(shù) 描述
events String
類型一個或多個用空格分隔的事件類型和可選的命名空間,例如"click
"、"focus click
"、"keydown.myPlugin
"。
data 可選/任意類型觸發(fā)事件時,需要通過event.data
傳遞給事件處理函數(shù)的任意數(shù)據(jù)。
handler Function
類型指定的事件處理函數(shù)。
selector String
類型一個jQuery選擇器,用于指定哪些后代元素可以觸發(fā)綁定的事件。
eventsMap Object類型一個Object對象,其每個屬性對應(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或被省略,則為當前匹配元素綁定事件;否則就是為當前匹配元素的后代元素中符合selector選擇器的元素綁定事件。
參數(shù)handler中的this指向當前匹配元素的后代元素中觸發(fā)該事件的DOM元素。如果參數(shù)selector等于null或被省略,則this指向當前匹配元素(也就是該元素)。
on()還會為handler傳入一個參數(shù):表示當前事件的Event對象。
參數(shù)handler的返回值與DOM原生事件的處理函數(shù)返回值作用一致。例如"submit"(表單提交)事件的事件處理函數(shù)返回false,可以阻止表單的提交。
如果事件處理函數(shù)handler僅僅只為返回false值,可以直接將handler設(shè)為false。
如果當前元素有多個匹配selector的后代元素,其中只要有任意一個后代元素觸發(fā)執(zhí)行了事件處理函數(shù),就會移除當前元素上的事件綁定,當前元素內(nèi)符合條件的其他后代元素就無法再次觸發(fā)執(zhí)行。
返回值
one()函數(shù)的返回值為jQuery類型,返回當前jQuery對象本身。
示例&說明
請參考下面這段初始HTML代碼:
<input id="btn" type="button" value="點擊" /> <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事件: // 只有第一次點擊時,執(zhí)行該事件處理函數(shù) // 執(zhí)行后one()會立即移除綁定的事件處理函數(shù) $("#btn").one("click", function(){ alert("只彈出一次提示框!"); });
運行代碼(以下代碼請自行復(fù)制到演示頁面運行)
此外,我們還可以同時綁定多個事件,并為事件處理函數(shù)傳遞一些附加的數(shù)據(jù),我們可以通過jQuery為事件處理函數(shù)傳入的參數(shù)event(Event事件對象)來進行處理:
$("#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í)行后新添加的,綁定事件依然會對其生效。同樣以初始HTML代碼為例,我們可以編寫如下jQuery代碼:
注意:雖然下面的jQuery代碼是為n1元素的所有后代p元素綁定click事件,但事件處理函數(shù)本身是綁定在n1元素上的,后代p元素的click事件是委托給n1元素來處理的。只要n2、n3、n9中任意一個觸發(fā)了click事件,就會移除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事件,因為它也是n1的后代p元素 $("#n1").append('<p id="n9">上述綁定的一次性click事件也會對該元素也生效!</p>');
請再參考以下jQuery代碼。div元素有兩個,因此每個div元素都為后代p元素的click事件綁定了事件處理函數(shù)。
// 在每個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還支持為事件類型附加額外的命名空間。當為同一元素綁定多個相同類型的事件處理函數(shù)時。使用命名空間,可以在觸發(fā)事件、移除事件時限定觸發(fā)或移除的范圍。
function clickHandler(event){ alert( "觸發(fā)時的命名空間:[" + 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()函數(shù)綁定的事件處理函數(shù)是一次性的,因此下面的每行代碼只能分別執(zhí)行,無法同時執(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ā)同時定義在foo和bar兩個命名空間下的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是一個對象,可以"屬性-值"的方式指定多個"事件類型-處理函數(shù)"。對應(yīng)的示例代碼如下: var eventsMap = { "mouseenter": function(event){ $(this).html( "Hello!"); }, "mouseleave": function(event){ $(this).html( "Bye!"); } }; //為n5綁定mouseenter mouseleave兩個事件 $("#n5").one( eventsMap );
以上就是深入分析jQuery.one() 函數(shù)的詳細內(nèi)容,更多關(guān)于jQuery.one() 函數(shù)的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
多個datatable共存造成多個表格的checkbox都被選中
所以當有多個datatable 引用到一個頁面中的時候,全選事件會匹配全部的datatable,所以造成全部多個表格的checkbox被都被選中2013-07-07jQuery實現(xiàn)復(fù)選框全選/取消全選/反選及獲得選擇的值
這篇文章主要介紹了jQuery實現(xiàn)的復(fù)選框全選/取消全選/反選及獲得選擇的值,需要的朋友可以參考下2014-06-06jquery實現(xiàn)頁面百葉窗走馬燈式翻滾顯示效果的方法
這篇文章主要介紹了jquery實現(xiàn)頁面百葉窗走馬燈式翻滾顯示效果的方法,實例分析了jQuery操作百葉窗翻滾效果的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03在JQuery dialog里的服務(wù)器控件 事件失效問題
今天遇到個問題,在dialog中放了服務(wù)器端的空間dropdownlist,但是寫selectindexchange事件卻怎么也觸發(fā)不了,然后就在網(wǎng)上搜,終于看到有個哥們解決了這個問題,真的謝謝他。2010-12-12淺談jQuery中的eq()與DOM中element.[]的區(qū)別
下面小編就為大家?guī)硪黄獪\談jQuery中的eq()與DOM中element.[]的區(qū)別。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10jQuery插件jQuery-JSONP開發(fā)ajax調(diào)用使用注意事項
jQuery-JSONP是一個支持 JSONP 調(diào)用的 jQuery 插件,使用它是因為它支持出錯時的 ajax 回調(diào),而 jQuery 的 $.ajax 不支持,我們已經(jīng)在實際項目中使用,在開始使用時遇到了2個問題,在這里記錄并分享一下。2013-11-11