淺析jquery unbind()方法移除元素綁定的事件
unbind()方法可以移除元素已綁定的事件,它的調(diào)用格式如下:
$(selector).unbind(event,fun)
其中參數(shù)event表示需要移除的事件名稱,多個(gè)事件名用空格隔開,fun參數(shù)為事件執(zhí)行時(shí)調(diào)用的函數(shù)名稱。
語法
unbind()函數(shù)主要有以下兩種形式的用法:
用法一:
jQueryObject.unbind( [ events [, handler ]] )
移除當(dāng)前匹配元素的events事件綁定的事件處理函數(shù)handler。
用法二:
jQueryObject.unbind( eventObject )
為指定事件處理函數(shù)傳入的Event對象,用于移除對應(yīng)的事件處理函數(shù)。
參數(shù)
參數(shù) 描述
events 可選/String類型一個(gè)或多個(gè)用空格分隔的事件類型和可選的命名空間,例如"click"、"focus click"、"keydown.myPlugin"。
handler 可選/Function類型指定的事件處理函數(shù)。
eventObject Object類型一個(gè)Event對象,用于移除傳入該對象的事件處理函數(shù)。
jQuery 1.4.3 新增支持參數(shù)handler可以為false。用于移除綁定事件時(shí),handler參數(shù)為false值的事件處理函數(shù)。
如果省略參數(shù)handler,則移除匹配元素指定類型的事件上綁定的所有事件處理函數(shù)。
如果省略了所有參數(shù),則表示移除匹配元素上為任何元素綁定的任何事件類型的任何事件處理函數(shù)。
返回值
unbind()函數(shù)的返回值為jQuery類型,返回當(dāng)前jQuery對象本身。
實(shí)際上,unbind()函數(shù)的參數(shù)全是篩選條件,只有匹配所有參數(shù)條件的事件處理函數(shù)都將被移除。參數(shù)越多,限定條件就越多,被移除的范圍就越小。
示例&說明
請參考下面這段初始HTML代碼:
<input id="btn1" type="button" value="點(diǎn)擊1" /> <input id="btn2" type="button" value="點(diǎn)擊2" /> <a id="a1" href="#">CodePlayer</a>
首先,我們?yōu)樯鲜鯾utton和<a>元素綁定事件,然后使用unbind()函數(shù)解除事件綁定,相應(yīng)的代碼如下:
function btnClick1(){ alert( this.value + "-1" ); } function btnClick2(){ alert( this.value + "-2" ); } var $buttons = $(":button"); // 為所有button元素的click事件綁定事件處理函數(shù)btnClick1 $buttons.bind( "click", btnClick1 ); // 為所有button元素的click事件綁定事件處理函數(shù)btnClick2 $buttons.bind( "click", btnClick2 ); // 為所有a元素的click、mouseover、mouseleave事件綁定事件處理函數(shù) $("a").bind( "click mouseover mouseleave", function(event){ if( event.type == "click" ){ alert("點(diǎn)擊事件"); }else if( event.type == "mouseover" ){ $(this).css("color", "red"); }else{ $(this).css("color", "blue"); } }); // 移除為所有button元素的click事件綁定的事件處理函數(shù)btnClick2 // 點(diǎn)擊按鈕,只執(zhí)行btnClick1 $buttons.unbind("click", btnClick2); // 移除為所有button元素的click事件綁定的所有事件處理函數(shù)(btnClick1和btnClick2) // 點(diǎn)擊按鈕,不會(huì)執(zhí)行任何事件處理函數(shù) // $buttons.unbind("click"); // 只移除為btn1元素的click事件綁定的所有事件處理函數(shù) // btn2元素的click事件仍然有效 // $("#btn1").unbind("click"); // 移除為所有a元素的任何事件綁定的所有處理函數(shù) // 點(diǎn)擊鏈接,或用鼠標(biāo)在鏈接上移入、移出,都不會(huì)觸發(fā)執(zhí)行任何事件處理函數(shù) // $("a").unbind( );
var $btn1 = $("#btn1"); $btn1.bind("click", function(event){ alert("只執(zhí)行一次!"); $(this).unbind( event ); // 移除當(dāng)前事件處理函數(shù) }); 此外,unbind()函數(shù)還可以只移除指定命名空間的事件綁定。 var $buttons = $(":button"); // 為所有button元素的click事件綁定事件處理函數(shù) $buttons.bind( "click.foo.bar", function btnClick1(){ alert( "click-1" ); } ); // 為所有button元素的click事件綁定事件處理函數(shù) $buttons.bind( "click.test.bar", function btnClick1(){ alert( "click-2" ); } ); // 移除包含命名空間foo的click事件綁定的事件處理函數(shù) $buttons.unbind( "click.foo" ); // 移除click-1 //移除包含命名空間bar的click事件綁定的事件處理函數(shù) // $buttons.unbind( "click.bar" ); // 移除click-1和click-2 //移除包含命名空間test的click事件綁定的事件處理函數(shù) // $buttons.unbind( "click.test" ); // 移除click-2 // 移除所有button元素的click事件綁定的所有事件處理函數(shù) // $buttons.unbind("click"); // 移除click-1和click-2
以上這篇淺析jquery unbind()方法移除元素綁定的事件就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
基于Jquery與WebMethod投票功能實(shí)現(xiàn)代碼
基于Jquery與WebMethod投票功能實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-01-01jQuery autoComplete插件兩種使用方式及動(dòng)態(tài)改變參數(shù)值的方法詳解
這篇文章主要介紹了jQuery autoComplete插件兩種使用方式及動(dòng)態(tài)改變參數(shù)值的方法,結(jié)合實(shí)例形式分析了jQuery自動(dòng)匹配插件autoComplete的使用技巧與動(dòng)態(tài)改變參數(shù)傳入值的實(shí)現(xiàn)方法,需要的朋友可以參考下2016-10-10jQuery設(shè)置和移除文本框默認(rèn)值的方法
這篇文章主要介紹了jQuery設(shè)置和移除文本框默認(rèn)值的方法,實(shí)例分析了jQuery操作文本框的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03用JQuery 判斷某個(gè)屬性是否存在hasAttr的解決方法
本篇文章介紹了,用JQuery 判斷某個(gè)屬性是否存在hasAttr的解決方法。需要的朋友參考下2013-04-04使用jquery自定義鼠標(biāo)樣式滿足個(gè)性需求
瀏覽器是有自帶的鼠標(biāo)樣式的,如果某些時(shí)候?yàn)榱吮3质髽?biāo)樣式的統(tǒng)一,或者想指定特定的鼠標(biāo)樣式該怎么辦呢?那就要使用自定義了,下面有個(gè)不錯(cuò)的示例,喜歡的朋友可以參考下2013-11-11jQuery iScroll.js 移動(dòng)端滾動(dòng)條美化插件
這篇文章主要介紹了jQuery iScroll.js 移動(dòng)端滾動(dòng)條美化插件的相關(guān)資料,需要的朋友可以參考下2016-02-02Jquery iframe內(nèi)部出滾動(dòng)條
Jquery 操作頁面中iframe自動(dòng)跟隨窗口大小變化,而不出現(xiàn)滾動(dòng)條,只在iframe內(nèi)部出滾動(dòng)條2010-02-02Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
1.2.0版本插件在1.0.0插件基礎(chǔ)上進(jìn)一步修改,版權(quán)信息僅保留致謝信息,刪除作者為了代碼整體提示美觀度,故將jQuery官方兩位數(shù)版本變更為三位數(shù)版本2011-07-07