Maison  >  Article  >  interface Web  >  Vous faire comprendre l'utilisation détaillée de la fonction jQuery.off()

Vous faire comprendre l'utilisation détaillée de la fonction jQuery.off()

巴扎黑
巴扎黑original
2017-06-25 10:42:391765parcourir

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 :

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

fonction btnClick1(){

alert( this.value + "-1" );

}

fonction btnClick2(){

alert( this .value + "-2" );

}

var $body = $("body");

// Lier l'événement click de tous les éléments du bouton Fonction de gestion des événements btnClick1

$body.on("click", ":button", btnClick1 );

// Lier la fonction de gestion des événements btnClick2

$body.on("click", ":button", btnClick2 );

//Clic lié, survol de la souris, événements mouseleave pour tous les éléments a

$ body. on("click mouseover mouseleave", "a", function(event){

if( event.type == "click" ){

alert("click event") ;

}else if( event.type == "mouseover" ){

        $(this).css("color", "red");

  } else{

            $(this).css("color", "blue");                                                                                                                   La fonction de gestionnaire d'événements btnClick2 liée à l'événement de clic de tous les éléments du bouton

// Cliquez sur le bouton, btnClick1 exécutera toujours

$body.off("click", ":button", btnClick2) ;

// Supprime tous les gestionnaires d'événements (btnClick1 et btnClick2) liés à l'événement click de tous les éléments du bouton par l'élément body

// Cliquer sur le bouton n'exécutera aucun gestionnaire d'événement

// $body.off("click", ":button");

// Remarque : $body.off("click", "#btn1"); ne peut pas être déplacé Sauf pour l'événement click de btn1, le sélecteur spécifié par la fonction off() doit être cohérent avec le sélecteur passé dans par la fonction on().

// Supprimez tous les gestionnaires liés par l'élément body à l'événement click de tous les éléments (y compris les éléments bouton et
)

// Cliquer sur un bouton ou un lien ne déclenchera pas le exécution de toute fonction de gestion d'événements

// $("body").off("click");

// Supprimer tous les événements liés à l'élément body pour tous les éléments Fonction de traitement

// Cliquer sur un bouton, cliquer sur un lien ou déplacer la souris vers l'intérieur/l'extérieur d'un lien ne déclenchera l'exécution d'aucune fonction de traitement d'événement

// $("body").off( );

Exécutez le code (veuillez copier les autres codes sur la page de démonstration pour l'exécuter)

De plus, la fonction off() peut également supprimer uniquement la liaison d'événement 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"); // Supprimez le clic-2, le clic-3

// $btn1. ("click.foo"); // Supprimer clic-1, clic-3

// $btn1.off("click.foo.bar"); // Supprimer clic-1

// $btn1.off("click"); // Supprime tous les gestionnaires d'événements de clic (click-1, click-2, click-3)

// $btn1. "); // Supprime tous les gestionnaires d'événements contenant l'espace de noms foo, pas seulement les événements de clic

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!