Maison >interface Web >js tutoriel >Explication détaillée des exemples d'utilisation de l'écouteur d'événement de liaison jQuery et de la suppression de l'écouteur d'événement unbind_jquery

Explication détaillée des exemples d'utilisation de l'écouteur d'événement de liaison jQuery et de la suppression de l'écouteur d'événement unbind_jquery

WBOYoriginal: 2016-05-16 15:19:131997parcourir

Les exemples de cet article décrivent l'utilisation de la liaison de l'écouteur d'événement de liaison jQuery et la suppression de la dissociation de l'écouteur d'événement. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Ici, utilisez respectivement bind(eventType,[data],Listener)//data comme paramètre facultatif, l'événement lié par la méthode one() est automatiquement supprimé après avoir été déclenché une fois, unbind(eventType,Listener),

Exemple :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>unbind(eventType,listener)</title>
<style type="text/css">
<!--
img{
 border:1px solid #000000;
}
input{
 border:1px solid #570000;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
 var fnMyFunc1; //函数变量
 $("img")
 .bind("click",fnMyFunc1 = function(){ //赋给函数变量
  $("#show").append("<div>点击事件1</div>");
 })
 .bind("click",function(){
  $("#show").append("<div>点击事件2</div>");
 })
 .bind("click",function(){
  $("#show").append("<div>点击事件3</div>");
 });
 $("input[type=button]").click(function(){
 $("img").unbind("click",fnMyFunc1); //移除事件监听myFunc1
 });
});
</script>
</head>
<body>
 <img src="11.jpg"> <input type="button" value="移除事件1">
 <div id="show"></div>
</body>
</html>

Regardez à nouveau ce code de test :

<body>
<input type="button" name="aaa" value="点击我">
<input type="checkbox" name="checkbox1">
</body>

Code JQuery :

$().ready(function(){
for (var i = 0; i < 3; i++) {
$("input[type='button']").click(function(){
alert("aaaa");
});
}
}

alert("aaaa") sera exécuté trois fois. Dans les événements imbriqués, si vous ne souhaitez pas voir une telle situation, vous devez désactiver l'événement de niveau supérieur. À ce stade, vous pouvez introduire la liaison. et dissocier les fonctions pour résoudre le problème.

Présentation des fonctions :

for (var i = 0; i < 3; i++) {
$("input[type='button']").unbind("click");
$("input[type='button']").bind("click", function(){
alert("aaa");
});
}

alert("aaa"); exécuté une seule fois.

La méthode bind() ajoute un ou plusieurs gestionnaires d'événements à l'élément sélectionné et spécifie la fonction à exécuter lorsque l'événement se produit
La méthode unbind() supprime le gestionnaire d'événements de l'élément sélectionné. Possibilité de supprimer tous les gestionnaires d'événements ou certains, ou de mettre fin à l'exécution d'une fonction spécifiée lorsqu'un événement se produit.

event est le type d'événement, les types incluent : flou, flcus, chargement, redimensionnement, défilement, déchargement, clic, dblclikc, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change , select , submit, keydown, keypress, keyup, error, etc., bien sûr, il peut également s'agir d'un nom personnalisé.

data est un paramètre facultatif et la valeur de l'attribut event.data est transmise à l'objet de données supplémentaire de l'objet événement.
fonction est la fonction de traitement utilisée pour la liaison.

Grammaire :

$(sélecteur).bind(événement, données, fonction)

L'événement et la fonction doivent pointer vers les extraits de code suivants pour explication :

Exemple 1 : Supprimer tous les événements de p

Copier le code Le code est le suivant :

$("p").unbind();

Exemple 2 : Supprimer l'événement click de p

Copier le code Le code est le suivant :

$("p").unbind("click");

Exemple 2 : La fonction de test déclenchée après la suppression de l'événement click de l'élément p et la fonction de test déclenchée après l'ajout de l'événement click de l'élément p

$("p").unbind("click",test);
$("p").bind("click",test);

Remarque : Pour définir .bind(), vous devez spécifier quels événements et fonctions

Regardons maintenant une démo simple. Le div entier a un événement de clic pour réduire et développer. Si vous souhaitez cliquer sur le lien mais ne pas déclencher l'événement de clic du div, vous devez désactiver l'événement de clic du div lorsque le lien. est déclenché. Ici, l'événement link mouseenter est utilisé pour dissocier et supprimer l'événement div. Ce n'est pas encore la fin, tant que la souris entre dans la zone de lien, l'événement click du div sera également supprimé. Nous devons également ajouter la restauration de l'événement click div lorsque la souris sort de la. zone de liens. Le code est le suivant :

$(function(){ var Func = function(){
  $(".com2").toggle(200); }
  $(".test").click(Func)
  $(".test a").mouseenter(function(){
    $(".test").unbind(); //删除.test的所有事件
  });
  $(".test a").mouseleave(function(){
    $(".test").bind("click",Func); //添加click事件
  });
});

event est le type d'événement
…
function est la fonction de traitement utilisée pour la liaison.

Les lecteurs intéressés par plus de contenu lié aux événements jQuery peuvent consulter le sujet spécial de ce site : "Résumé de l'utilisation et des techniques courantes des événements jQuery"

J'espère que cet article sera utile à tous ceux qui programment jQuery.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Trucs et astuces jQuery que vous ne pouvez pas apprendre ailleurs (bienvenue à collectionner)_jqueryArticle suivant：Trucs et astuces jQuery que vous ne pouvez pas apprendre ailleurs (bienvenue à collectionner)_jquery

Articles Liés

Voir plus