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程式碼：

dd73428c1ad66a783e1ba0c2a97c4665

3feab328c4e0db87d28f4c54445f1f30

86f02faad3009b4d4940416edcffa907

首先，我們為上述button和3499910bf9dac5ae3c52d5ede7383485元素綁定事件，然後使用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() 函數使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！