Detailed explanation of the use of jQuery.undelegate() function

The

undelegate() function is used to remove the event handling function of one or more events bound to an element.

The undelegate() function is mainly used to unblock the event processing function bound by the delegate() function.

This function belongs to the jQuery object (instance).

Syntax

jQuery 1.4.2 Added this function. It mainly has the following three forms of usage:

Usage 1:

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

Remove the event handler that is bound to the events event of the selector element where the current matching element is.

Usage 2: jQuery 1.4.3 newly supports this usage.

jQueryObject.undelegate( selector , eventsMap )

A variation of usage 1, used to remove multiple event handlers of multiple event types at the same time. eventsMap is an object. Each attribute corresponds to the parameter events in the application method one, and the value corresponds to the parameter handler in the application method one.

Usage 3: jQuery 1.6 newly supports this usage.

jQueryObject.undelegate( namespace )

Remove all event handlers for events containing namespacenamespace on the currently matched element for all elements.

Parameters

The unelegate() function will remove the event handler of the events event bound to the descendant element selector on the current matching element.

If the selector parameter is omitted, the event handler bound to any element is removed.

The parameter selector must be consistent with the selector passed in when adding binding through the delegate() function.

If the parameter handler is omitted, all event handling functions bound to the specified event type of the specified element will be removed.

If all parameters are omitted, it means to remove any event handler function of any event type bound to any element on the current element.

Return value

undelegate()The return value of the function is of jQuery type and returns the current jQuery object itself.

In fact, the parameters of the unelegate() function are all filtering conditions, and only event handling functions that match all parameter conditions will be removed. The more parameters there are, the more qualifications there are and the smaller the range that is removed.

示例&说明

请参考下面这段初始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

The above is the detailed content of Detailed explanation of the use of jQuery.undelegate() function. For more information, please follow other related articles on the PHP Chinese website!