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

La fonction

off() permet de supprimer la fonction de gestion des événements d'un ou plusieurs événements liés à un élément. La fonction

off() est principalement utilisée pour débloquer la fonction de traitement d'événements liée par la fonction on().

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

Syntaxe

Cette fonction est ajoutée dans jQuery 1.7. Il a principalement les deux formes d'utilisation suivantes :

Première utilisation :

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

Utilisation deux :

jQueryObject.off( eventsMap [, selector ] )

Paramètre

Description du paramètre

events Facultatif/Type de chaîne un ou plusieurs séparés par des espaces, type d'événement et un espace de noms facultatif, tel que "clic", "focus clic", "keydown.myPlugin".

Le type d'objet eventsMap est un objet Objet, chacun de ses attributs correspond au type d'événement et à l'espace de noms facultatif (événements de paramètre), et la valeur de l'attribut correspond à la fonction de traitement d'événement lié (paramètre gestionnaire) .

selector Facultatif/Type de chaîne Un sélecteur jQuery utilisé pour spécifier quels éléments descendants peuvent déclencher des événements liés. Si ce paramètre est nul ou omis, cela signifie que l'élément courant lui-même est lié à l'événement (le déclencheur réel peut également être un élément descendant, tant que le flux d'événements peut atteindre l'élément courant).

gestionnaire facultatif/fonction de gestion d'événements spécifiée par type de fonction. La fonction

off() supprimera le gestionnaire d'événements 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 on().

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

off()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 off() sont tous des conditions de filtrage. 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.

Exemple et description

Veuillez vous référer au code HTML initial suivant :

a1db7bf44172eb60584b3c8ef74d8475

50443667d466716efa606c0990423dd0

86f02faad3009b4d4940416edcffa907

Tout d'abord, nous lions les événements au bouton ci-dessus et aux éléments 3499910bf9dac5ae3c52d5ede7383485, puis utilisons la fonction off() pour dissocier l'événement. Le code correspondant est le suivant :

function btnClick1(){
    alert( this.value + "-1" );
}
function btnClick2(){
    alert( this.value + "-2" );
}
var $body = $("body");
// 为所有button元素的click事件绑定事件处理函数btnClick1
$body.on("click", ":button", btnClick1 );
// 为所有button元素的click事件绑定事件处理函数btnClick2
$body.on("click", ":button", btnClick2 );
//为所有a元素绑定click、mouseover、mouseleave事件
$body.on("click mouseover mouseleave", "a", 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.off("click", ":button", btnClick2);
// 移除body元素为所有button元素的click事件绑定的所有事件处理函数(btnClick1和btnClick2)
// 点击按钮，不会执行任何事件处理函数
// $body.off("click", ":button");
// 注意： $body.off("click", "#btn1"); 无法移除btn1的点击事件，off()函数指定的选择器必须与on()函数传入的选择器一致。
// 移除body元素为所有元素(包括button和<a>元素)的click事件绑定的所有处理函数
// 点击按钮或链接，都不会触发执行任何事件处理函数
// $("body").off("click");
// 移除body元素为所有元素的任何事件绑定的所有处理函数
// 点击按钮，或点击链接或者鼠标移入/移出链接，都不会触发执行任何事件处理函数
// $("body").off( );

De plus, la fonction off() peut également supprimer uniquement les liaisons d'événements de l'espace de noms spécifié.

var $btn1 = $("#btn1");
$btn1.on("click.foo.bar", function(event){
    alert("click-1");
});
$btn1.on("click.test", function(event){
    alert("click-2");
});
$btn1.on("click.test.foo", function(event){
    alert("click-3");
});
$btn1.off("click.test"); // 移除click-2、click-3
// $btn1.off("click.foo");  // 移除click-1、click-3
// $btn1.off("click.foo.bar");  // 移除click-1
// $btn1.off("click");  // 移除所有click事件处理函数(click-1、click-2、click-3)
// $btn1.off(".foo");  // 移除所有包含命名空间foo的事件处理函数，不仅仅是click事件

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!