帶你了解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程式碼：

首先，我們為上述button和元素綁定事件，然後使用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("點擊事件");

#        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和元素)的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中文網其他相關文章！