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和<a>元素绑定事件，然后使用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()函数的使用详解的详细内容，更多请关注其它相关文章！