Maison > Article > interface Web > Vous faire comprendre l'événement de liaison (bind()) et l'événement de suppression (unbind()) dans JQuery

Vous faire comprendre l'événement de liaison (bind()) et l'événement de suppression (unbind()) dans JQuery

巴扎黑original: 2017-06-25 14:50:571825parcourir

Cet article présente principalement l'utilisation et le partage d'exemples de l'événement de liaison de jQuery et de l'événement de suppression Il est recommandé ici pour référence par les amis dans le besoin.

Parfois après l'exécution de l'événement, si vous souhaitez annuler l'effet de l'événement, vous pouvez le gérer via certaines méthodes. Par exemple, les méthodes bind() (événement de liaison) et unbind() (suppression des événements ajoutés via la méthode bind()) sont utilisées pour supprimer les effets des événements.

Par exemple, dans le cas suivant :

Le code est le suivant :

<script type="text/
javascript
">
    $(function(){
       $(&#39;#btn&#39;).bind("click", function(){
                     $(&#39;#test&#39;).append("<p>绑定函数1</p>");
              }).bind("click", function(){
                     $(&#39;#test&#39;).append("<p>绑定函数2</p>");
              }).bind("click", function(){
                     $(&#39;#test&#39;).append("<p>绑定函数3</p>");
              });
    })
</script>

partie html :

Le code est le suivant :

<body>
    <button id="btn">Click Me</button>
    <p id="test"></p>
</body>

Lorsque le bouton btn est cliqué, trois événements de clic sont déclenchés. La méthode append() transmet ici le contenu de trois paragraphes à la couche p.

La méthode append() ajoute le contenu spécifié à la fin de l'élément sélectionné (toujours à l'intérieur). Elle est toujours différente de la méthode html(). La méthode html() modifie le contenu de l'élément entier plutôt que d'ajouter du contenu à la fin de l'élément. La méthode text() est similaire à la méthode html(), mais la différence est que le code html peut être écrit dans la méthode html() et peut être analysé correctement, tandis que text() ne peut traiter le code html que comme un chaîne .

Chaque fois que vous cliquez ici, un événement sera exécuté, et vous souhaitez ajouter un paragraphe à la fin du calque p. Le code suivant annule l'effet d'événement. Vous pouvez supprimer l'événement

via pour invalider l'effet de clic :

Le code est le suivant : .unbind("click");La fonction de ceci Le code consiste à annuler l'événement click sous l'élément btn. Ce n'est pas seulement valable pour la méthode bind(), c'est également valable pour la méthode click(). D'un certain point de vue, bind("click", function(){}) et click(function(){}) sont équivalents.

Vous pouvez également supprimer des événements spécifiques pour des méthodes spécifiques. Vous pouvez vous référer au code suivant :

<script type="text/javascript">
    $(function(){
       $(&#39;#btn&#39;).bind("click", function(){
                     $(&#39;#test&#39;).append("<p>绑定函数1</p>");
              }).bind("click", function(){
                     $(&#39;#test&#39;).append("<p>绑定函数2</p>");
              }).bind("click", function(){
                     $(&#39;#test&#39;).append("<p>绑定函数3</p>");
              });
       $(&#39;#delAll&#39;).click(function(){
              $(&#39;#btn&#39;).unbind("click");
       });
    })
</script>

Le code est le suivant :

Le deuxième paramètre de la méthode unbind() est le nom de la fonction d'exécution correspondant à l'événement. Après exécution, il n'y a que myFun2. L'événement a été supprimé et les deux autres événements de clic ont été exécutés normalement.

Il existe également une méthode one() qui est similaire à la méthode bind(). La différence est que la méthode one() n'est exécutée qu'une seule fois. Liez une fonction

<script type="text/javascript">
    $(function(){
       $(&#39;#btn&#39;).bind("click", myFun1 = function(){
                     $(&#39;#test&#39;).append("<p>绑定函数1</p>");
              }).bind("click", myFun2 = function(){
                     $(&#39;#test&#39;).append("<p>绑定函数2</p>");
              }).bind("click", myFun3 = function(){
                     $(&#39;#test&#39;).append("<p>绑定函数3</p>");
              });
       $(&#39;#delTwo&#39;).click(function(){
              $(&#39;#btn&#39;).unbind("click",myFun2);
       });
    })
</script>

gestionnaire d'événements

unique à un événement spécifique (comme un clic) de chaque élément correspondant. Le code est le suivant :

Le code est le suivant :

Après avoir cliqué, il ne sera exécuté qu'une seule fois. Cliquer à nouveau ne déclenchera pas l’effet. C'est la seule méthode.

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!

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：Partage d'expérience sur l'utilisation de triggerHandler() dans jQueryArticle suivant：Partage d'expérience sur l'utilisation de triggerHandler() dans jQuery

Articles Liés

Voir plus