詳解jQuery.unbind()函數的用法及注意點

unbind()函數用來移除符合元素上綁定的一個或多個事件的事件處理函數。

unbind()函數主要用來解除由bind()函數所綁定的事件處理函數。

此函數屬於jQuery物件(實例)。

語法

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

#用法一：

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

移除目前符合元素的events事件所綁定的事件處理函數handler。

用法二：

jQueryObject.unbind( eventObject )

為指定事件處理函數傳入的Event對象，用於移除對應的事件處理函數。

參數

參數 描述

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

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

eventObject Object類別類型一個Event對象，用來移除傳入該物件的事件處理函數。

jQuery 1.4.3 新增支援參數handler可以為false。用於移除綁定事件時，handler參數為false值的事件處理函數。

如果省略參數handler，則移除符合元素指定類型的事件上所綁定的所有事件處理函數。

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

傳回值

unbind()函數的回傳值為jQuery類型，傳回目前jQuery物件本身。

實際上，unbind()函數的參數全是篩選條件，只有符合所有參數條件的事件處理函數都會被移除。參數越多，限定條件越多，移除的範圍就越小。

範例&說明

請參考下面這段初始HTML程式碼：

<input id="btn1" type="button" value="点击1" />
<input id="btn2" type="button" value="点击2" />
<a id="a1" href="#">CodePlayer</a>

首先，我們為上述button和元素綁定事件，然後使用unbind ()函數解除事件綁定，對應的程式碼如下：

function btnClick1(){
    alert( this.value + "-1" );
}
function btnClick2(){
    alert( this.value + "-2" );
}
var $buttons = $(":button");
// 为所有button元素的click事件绑定事件处理函数btnClick1
$buttons.bind( "click", btnClick1 );
// 为所有button元素的click事件绑定事件处理函数btnClick2
$buttons.bind( "click", btnClick2 );
// 为所有a元素的click、mouseover、mouseleave事件绑定事件处理函数
$("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事件绑定的事件处理函数btnClick2
// 点击按钮，只执行btnClick1
$buttons.unbind("click", btnClick2);
// 移除为所有button元素的click事件绑定的所有事件处理函数(btnClick1和btnClick2)
// 点击按钮，不会执行任何事件处理函数
// $buttons.unbind("click");
// 只移除为btn1元素的click事件绑定的所有事件处理函数
 // btn2元素的click事件仍然有效
// $("#btn1").unbind("click");
// 移除为所有a元素的任何事件绑定的所有处理函数
// 点击链接，或用鼠标在链接上移入、移出，都不会触发执行任何事件处理函数
// $("a").unbind( );

unbind()函數也可以根據傳入的事件物件來移除函數。以下jQuery程式碼只允許第一次點選按鈕【點選1】時彈出提示框，之後立即移除該點擊事件。

var $btn1 = $("#btn1");
$btn1.bind("click", function(event){
    alert("只执行一次!");
    $(this).unbind( event ); // 移除当前事件处理函数  
});
此外，unbind()函数还可以只移除指定命名空间的事件绑定。
var $buttons = $(":button");
// 为所有button元素的click事件绑定事件处理函数
$buttons.bind( "click.foo.bar", function btnClick1(){
    alert( "click-1" );
} );
// 为所有button元素的click事件绑定事件处理函数
$buttons.bind( "click.test.bar", function btnClick1(){
    alert( "click-2" );
} );
// 移除包含命名空间foo的click事件绑定的事件处理函数
$buttons.unbind( "click.foo" ); // 移除click-1
//移除包含命名空间bar的click事件绑定的事件处理函数
// $buttons.unbind( "click.bar" ); // 移除click-1和click-2
//移除包含命名空间test的click事件绑定的事件处理函数
// $buttons.unbind( "click.test" ); // 移除click-2
// 移除所有button元素的click事件绑定的所有事件处理函数
// $buttons.unbind("click"); // 移除click-1和click-2

以上是詳解jQuery.unbind()函數的用法及注意點的詳細內容。更多資訊請關注PHP中文網其他相關文章！