淺析jquery unbind()方法移除元素綁定的事件

更新時(shí)間：2016年05月24日 10:19:31 投稿：jingxian

下面小編就為大家?guī)?lái)一篇淺析jquery unbind()方法移除元素綁定的事件。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

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

$(selector).unbind(event,fun)

其中參數(shù)event表示需要移除的事件名稱，多個(gè)事件名用空格隔開(kāi)，fun參數(shù)為事件執(zhí)行時(shí)調(diào)用的函數(shù)名稱。

語(yǔ)法

unbind()函數(shù)主要有以下兩種形式的用法：

用法一：

jQueryObject.unbind( [ events [, handler ]] )

移除當(dāng)前匹配元素的events事件綁定的事件處理函數(shù)handler。

用法二：

jQueryObject.unbind( eventObject )

為指定事件處理函數(shù)傳入的Event對(duì)象，用于移除對(duì)應(yīng)的事件處理函數(shù)。

參數(shù)

參數(shù) 描述

events 可選/String類型一個(gè)或多個(gè)用空格分隔的事件類型和可選的命名空間，例如"click"、"focus click"、"keydown.myPlugin"。

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

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

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

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

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

返回值

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

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

示例&說(shuō)明

請(qǐng)參考下面這段初始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( );

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

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()方法移除元素綁定的事件就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: