Vous faire comprendre l'événement de liaison (bind()) et l'événement de suppression (unbind()) dans JQuery-js tutoriel-php.cn

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

巴扎黑

Libérer： 2017-06-25 14:50:57

original

1859 Les gens l'ont consulté

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>

Copier après la connexion

partie html :

Le code est le suivant :

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

Copier après la connexion

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 < normal 🎜> 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>

Copier après la connexion

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>

Copier après la connexion

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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