jquery之 off()方法

標籤：

off()函數用於移除元素上綁定的一個或多個事件的事件處理函數。

off()函數主要用於解除由on()函數綁定的事件處理函數。

該函數屬於jQuery對象(執行個體)。

文法

jQuery 1.7 新增該函數。其主要有以下兩種形式的用法：

用法一：

jQueryObject.off( [ events [, selector ] [, handler ] ] )

用法二：

jQueryObject.off( eventsMap [, selector ] )

參數

參數	描述
events	可選/String類型一個或多個用空格分隔的事件類型和可選的命名空間，例如"click"、"focus click"、"keydown.myPlugin"。
eventsMap	Object類型一個Object對象，其每個屬性對應事件類型和可選的命名空間(參數events)，屬性值對應綁定的事件處理函數(參數handler)。
selector	可選/String類型一個jQuery選取器，用於指定哪些後代元素可以觸發綁定的事件。如果該參數為null或被省略，則表示當前元素自身綁定事件(實際觸發者也可能是後代元素，只要事件流能到達當前元素即可)。
handler	可選/Function類型指定的事件處理函數。

off()函數將會移除當前匹配元素上為後代元素selector綁定的events事件的事件處理函數handler。

如果省略參數selector，則移除為任何元素繫結的事件處理函數。

參數selector必須與通過on()函數添加綁定時傳入的選取器一致。

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

如果省略了所有參數，則表示移除當前元素上為任何元素繫結的任何事件類型的任何事件處理函數。

傳回值

off()函數的傳回值為jQuery類型，返回當前jQuery對象本身。

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

樣本&說明

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

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

首先，我們為上述button和<a>元素繫結事件，然後使用off()函數解除事件綁定，相應的代碼如下：

function btnClick1(){
    alert( this.value + "-1" );
}

function btnClick2(){
    alert( this.value + "-2" );
}

var $body = $("body");

// 為所有button元素的click事件綁定事件處理函數btnClick1
$body.on("click", ":button", btnClick1 );

// 為所有button元素的click事件綁定事件處理函數btnClick2
$body.on("click", ":button", btnClick2 );

//為所有a元素繫結click、mouseover、mouseleave事件
$body.on("click mouseover mouseleave", "a", function(event){
    if( event.type == "click" ){
        alert("點擊事件");
    }else if( event.type == "mouseover" ){
        $(this).css("color", "red");
    }else{
        $(this).css("color", "blue");       
    }
});


// 移除body元素為所有button元素的click事件綁定的事件處理函數btnClick2
// 點擊按鈕，btnClick1照樣執行
$body.off("click", ":button", btnClick2);


// 移除body元素為所有button元素的click事件綁定的所有事件處理函數(btnClick1和btnClick2)
// 點擊按鈕，不會執行任何事件處理函數
// $body.off("click", ":button");


// 注意： $body.off("click", "#btn1"); 無法移除btn1的點擊事件，off()函數指定的選取器必須與on()函數傳入的選取器一致。


// 移除body元素為所有元素(包括button和<a>元素)的click事件綁定的所有處理函數
// 點擊按鈕或連結，都不會觸發執行任何事件處理函數
// $("body").off("click");


// 移除body元素為所有元素的任何事件綁定的所有處理函數
// 點擊按鈕，或點選連結或者滑鼠移入/移出連結，都不會觸發執行任何事件處理函數
// $("body").off( );

運行代碼(其他代碼請自行複製到示範頁面運行)

此外off()函數還可以只移除指定命名空間的事件綁定。

var $btn1 = $("#btn1");

$btn1.on("click.foo.bar", function(event){
    alert("click-1");
});
$btn1.on("click.test", function(event){
    alert("click-2");
});
$btn1.on("click.test.foo", function(event){
    alert("click-3");
});

$btn1.off("click.test"); // 移除click-2、click-3

// $btn1.off("click.foo");  // 移除click-1、click-3

// $btn1.off("click.foo.bar");  // 移除click-1

// $btn1.off("click");  // 移除所有click事件處理函數(click-1、click-2、click-3)

// $btn1.off(".foo");  // 移除所有包含命名空間foo的事件處理函數，不僅僅是click事件

jquery之 off()方法