Explication détaillée de l'utilisation de la fonction jQuery.undelegate()

La fonction

undelegate() est utilisée pour supprimer la fonction de gestion des événements d'un ou plusieurs événements liés à l'élément.

La fonction unelegate() est principalement utilisée pour annuler la fonction de traitement d'événements liée par la fonction délégué().

Cette fonction appartient à l'objet (instance) jQuery.

Syntaxe

jQuery 1.4.2 a ajouté cette fonction. Il a principalement les trois formes d'utilisation suivantes :

Utilisation 1 :

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

Supprimez le gestionnaire d'événements lié à l'événement events de l'élément sélecteur où se trouve l'élément correspondant actuel.

Utilisation 2 : jQuery 1.4.3 prend désormais en charge cette utilisation.

jQueryObject.undelegate( selector , eventsMap )

Une variante de l'utilisation 1, utilisée pour supprimer plusieurs gestionnaires d'événements de plusieurs types d'événements en même temps. eventsMap est un objet. Chaque attribut correspond aux événements de paramètre dans la méthode 1, et la valeur correspond au gestionnaire de paramètres dans la méthode 1.

Troisième utilisation : jQuery 1.6 prend désormais en charge cette utilisation.

jQueryObject.undelegate( namespace )

Supprime tous les gestionnaires d'événements sur l'élément actuellement correspondant pour les événements contenant l'espace de noms pour tous les éléments.

Paramètres

La fonction unelegate() supprimera le gestionnaire d'événement de l'événement events lié au sélecteur d'élément descendant sur l'élément correspondant actuel.

Si le paramètre selector est omis, le gestionnaire d'événements lié à n'importe quel élément est supprimé.

Le sélecteur de paramètre doit être cohérent avec le sélecteur transmis lors de l'ajout d'une liaison via la fonction délégué().

Si le gestionnaire de paramètres est omis, tous les gestionnaires d'événements liés au type d'événement spécifié de l'élément spécifié seront supprimés.

Si tous les paramètres sont omis, cela signifie supprimer tous les gestionnaires d'événements de tout type d'événement liés à n'importe quel élément de l'élément actuel.

Valeur de retour

undelegate()La valeur de retour de la fonction est de type jQuery et renvoie l'objet jQuery actuel lui-même.

En fait, les paramètres de la fonction unelegate() sont tous des conditions de filtrage, et seules les fonctions de gestion d'événements qui correspondent à toutes les conditions des paramètres seront supprimées. Plus il y a de paramètres, plus il y a de qualifications et plus la plage supprimée est petite.

示例&说明

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!