Detaillierte Erläuterung der Verwendung der Funktion jQuery.undelegate()

Die Funktion

undelegate() wird verwendet, um die Funktion Ereignisbehandlung eines oder mehrerer an das Element gebundener Ereignisse zu entfernen.

Die Funktion unelegate() wird hauptsächlich verwendet, um die durch die Funktion Delegate() gebundene Ereignisverarbeitungsfunktion rückgängig zu machen.

Diese Funktion gehört zum jQuery-Objekt (Instanz).

Syntax

jQuery 1.4.2 hat diese Funktion hinzugefügt. Es gibt hauptsächlich die folgenden drei Verwendungsformen:

Verwendung 1:

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

Entfernen Sie den Event-Handler-Funktionshandler, der an das Ereignisereignis des aktuell übereinstimmenden Elements als Selektorelement gebunden ist.

Verwendung 2: jQuery 1.4.3 unterstützt diese Verwendung neu.

jQueryObject.undelegate( selector , eventsMap )

Eine Variante von Verwendung 1, die zum gleichzeitigen Entfernen mehrerer Event-Handler mehrerer Event-Typen verwendet wird. eventsMap ist ein Objekt. Jedes -Attribut entspricht den Parameterereignissen in Methode 1 und der Wert entspricht dem Parameterhandler in Methode 1.

Verwendung drei: jQuery 1.6 unterstützt diese Verwendung neu.

jQueryObject.undelegate( namespace )

Entfernt alle Event-Handler für das aktuell übereinstimmende Element für Ereignisse, die den Namespace für alle Elemente enthalten.

Parameter

Die Funktion unelegate() entfernt den Event-Handler des Events-Ereignisses, das an den Nachkommenelementselektor des aktuell übereinstimmenden Elements gebunden ist.

Wenn der Selektorparameter weggelassen wird, wird der an ein beliebiges Element gebundene Ereignishandler entfernt.

Der Parameterselektor muss mit dem Selektor übereinstimmen, der beim Hinzufügen der Bindung über die Funktion „delegate()“ übergeben wird.

Wenn der Parameter-Handler weggelassen wird, werden alle an den angegebenen Ereignistyp des angegebenen Elements gebundenen Ereignishandler entfernt.

Wenn alle Parameter weggelassen werden, bedeutet dies, dass alle Event-Handler aller Event-Typen entfernt werden, die an ein beliebiges Element des aktuellen Elements gebunden sind.

Rückgabewert

undelegate()Der Rückgabewert der Funktion ist vom jQuery-Typ und gibt das aktuelle jQuery-Objekt selbst zurück.

Tatsächlich sind die Parameter der Funktion unelegate() alle Filterbedingungen, und nur Ereignisbehandlungsfunktionen, die allen Parameterbedingungen entsprechen, werden entfernt. Je mehr Parameter vorhanden sind, desto mehr Qualifikationen sind vorhanden und desto kleiner ist der Bereich, der entfernt wird.

示例&说明

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

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung der Funktion jQuery.undelegate(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!