淺析jquery unbind()方法移除元素綁定的事件
來源:易賢網(wǎng) 閱讀:778 次 日期:2016-06-23 16:56:21
溫馨提示:易賢網(wǎng)小編為您整理了“淺析jquery unbind()方法移除元素綁定的事件”,方便廣大網(wǎng)友查閱!

下面小編就為大家?guī)硪黄獪\析jquery unbind()方法移除元素綁定的事件。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。

unbind()方法可以移除元素已綁定的事件,它的調(diào)用格式如下:

$(selector).unbind(event,fun)

其中參數(shù)event表示需要移除的事件名稱,多個事件名用空格隔開,fun參數(shù)為事件執(zhí)行時調(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類型一個或多個用空格分隔的事件類型和可選的命名空間,例如"click"、"focus click"、"keydown.myPlugin"。

handler 可選/Function類型指定的事件處理函數(shù)。

eventObject Object類型一個Event對象,用于移除傳入該對象的事件處理函數(shù)。

jQuery 1.4.3 新增支持參數(shù)handler可以為false。用于移除綁定事件時,handler參數(shù)為false值的事件處理函數(shù)。

如果省略參數(shù)handler,則移除匹配元素指定類型的事件上綁定的所有事件處理函數(shù)。

如果省略了所有參數(shù),則表示移除匹配元素上為任何元素綁定的任何事件類型的任何事件處理函數(shù)。

返回值

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

實際上,unbind()函數(shù)的參數(shù)全是篩選條件,只有匹配所有參數(shù)條件的事件處理函數(shù)都將被移除。參數(shù)越多,限定條件就越多,被移除的范圍就越小。

示例&說明

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

<input id="btn1" type="button" value="點擊1" />

<input id="btn2" type="button" value="點擊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("點擊事件");

}else if( event.type == "mouseover" ){

$(this).css("color", "red");

}else{

$(this).css("color", "blue");

}

});

// 移除為所有button元素的click事件綁定的事件處理函數(shù)btnClick2

// 點擊按鈕,只執(zhí)行btnClick1

$buttons.unbind("click", btnClick2);

// 移除為所有button元素的click事件綁定的所有事件處理函數(shù)(btnClick1和btnClick2)

// 點擊按鈕,不會執(zhí)行任何事件處理函數(shù)

// $buttons.unbind("click");

// 只移除為btn1元素的click事件綁定的所有事件處理函數(shù)

// btn2元素的click事件仍然有效

// $("#btn1").unbind("click");

// 移除為所有a元素的任何事件綁定的所有處理函數(shù)

// 點擊鏈接,或用鼠標(biāo)在鏈接上移入、移出,都不會觸發(fā)執(zhí)行任何事件處理函數(shù)

// $("a").unbind( );

unbind()函數(shù)還可以根據(jù)傳入的事件對象來移除函數(shù)。以下jQuery代碼只允許第一次點擊按鈕【點擊1】時彈出提示框,之后立即移除該點擊事件。

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)容了,希望能給大家一個參考

更多信息請查看網(wǎng)絡(luò)編程
易賢網(wǎng)手機(jī)網(wǎng)站地址:淺析jquery unbind()方法移除元素綁定的事件
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)!

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機(jī)號
  • 驗證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機(jī)站點 | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網(wǎng)安備53010202001879號 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號
云南網(wǎng)警備案專用圖標(biāo)
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號:hfpxwx
咨詢QQ:1093837350(9:00—18:00)版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報警專用圖標(biāo)