jQuery.undelegate()函數的使用詳解

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

undelegate()函式主要用來解除delegate()函式所綁定的事件處理函式。

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

語法

jQuery 1.4.2 新增此函數。其主要有以下三種形式的用法：

用法一：

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

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

用法二：jQuery 1.4.3 新增支援該用法。

jQueryObject.undelegate( selector , eventsMap )

用法一的變體，用於同時移除多種事件類型的多個事件處理函數。 eventsMap是一個對象，每個屬性對應用法一中的參數events，值對應用法一中的參數handler。

用法三：jQuery 1.6 新增支援該用法。

jQueryObject.undelegate( namespace )

移除目前符合元素上為所有元素的包含命名空間namespace的事件的所有事件處理函數。

參數

undelegate()函式將會移除目前符合元素上為後子元素selector所綁定的events事件的事件處理函式handler。

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

參數selector必須與透過delegate()函數新增綁定時傳入的選擇器一致。

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

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

傳回值

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

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

示例&说明

请参考下面这段初始HTML代码：

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

首先，我们为上述button和元素绑定事件，然后使用undelegate()函数解除事件绑定，相应的代码如下：

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

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

var $body = $("body");

// 在body元素上为所有button元素的click事件绑定事件处理函数btnClick1
$body.delegate( ":button", "click", btnClick1 );

//在body元素上为所有button元素的click事件绑定事件处理函数btnClick2
$body.delegate( ":button", "click", btnClick2 );

//为所有a元素绑定click、mouseover、mouseleave事件
$body.delegate( "a", "click mouseover mouseleave", 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.undelegate(":button", "click", btnClick2);


//移除body元素为所有button元素的click事件绑定的所有事件处理函数(btnClick1和btnClick2)
//点击按钮，不会执行任何事件处理函数
// $body.undelegate(":button", "click");


//注意： $body.undelegate("#btn1", "click"); 无法移除btn1的点击事件，undelegate()函数指定的选择器必须与delegate()函数传入的选择器一致。


// 移除body元素为所有元素(包括button和<a>元素)的任何事件绑定的所有处理函数
// 点击按钮、链接，或用鼠标在链接上移入、移出，都不会触发执行任何事件处理函数
//$("body").undelegate( );

此外undelegate()函数还可以只移除指定命名空间的所有元素的所有事件绑定。

var $body = $("body");

$body.delegate("#btn1", "click.foo.bar", function(event){
    alert("click-1");
});

$body.delegate("#btn1", "click.test", function(event){
    alert("click-2");
});

$body.delegate("#btn1", "click.test.foo", function(event){
    alert("click-3");
});

// $body.undelegate(".test"); // 移除click-2、click-3

// $body.undelegate(".foo");  // 移除click-1、click-3

// $body.undelegate(".foo.bar");  // 移除click-1

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