Comment implémenter la suppression d'événements dans DOM dans JQuery_jquery

L'exemple de cet article décrit la méthode de suppression d'événements dans le DOM dans JQuery. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Vous pouvez lier plusieurs événements au même élément, ou vous pouvez lier le même événement à plusieurs éléments. Supposons qu’il existe un élément bb9345e55eb71822850ff156dfde57c8 sur la page Web. Utilisez le code suivant pour lier plusieurs événements identiques à l’élément.

$(function(){
 $('#btn').bind("click", function(){
     $('#test').append("<p>我的绑定函数1</p>");
   }).bind("click", function(){
     $('#test').append("<p>我的绑定函数2</p>");
   }).bind("click", function(){
     $('#test').append("<p>我的绑定函数3</p>");
  });
})

1． Supprimer les événements précédemment enregistrés sur les éléments du bouton

Jetez d'abord un œil au code ci-dessous. Cliquez sur le bouton "Supprimer tous les événements" pour supprimer les événements btn ci-dessus :

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

<button id="btn">点击我</button>
<div id="test"></div>
<button id="delAll">删除所有事件</button>

Jetons un coup d'œil à la structure syntaxique de la méthode unbind() : unbind([type] [, data]);

Le premier paramètre est le type d'événement et le deuxième paramètre est la fonction à supprimer. Les détails sont les suivants :

S'il n'y a aucun paramètre, supprimez tous les événements liés.
Si un type d'événement est fourni en tant que paramètre, seuls les événements liés de ce type sont supprimés.
Si la fonction de gestionnaire transmise lors de la liaison est transmise comme deuxième paramètre, seul ce gestionnaire d'événements spécifique sera supprimé.

2． Supprimez un des événements de l'élément bb9345e55eb71822850ff156dfde57c8 Vous devez d'abord spécifier une variable pour ces fonctions de traitement anonymes.

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

<button id="btn">点击我</button>
<div id="test"></div>
<button id="delTwo">删除第二个事件</button>

De plus, pour les situations où la liaison ne doit être déclenchée qu'une seule fois puis immédiatement déliée, JQuery fournit une méthode abrégée - la méthode one(). La méthode one() peut lier une fonction de gestionnaire à un élément. Lorsque la fonction de traitement est déclenchée une fois, elle est immédiatement supprimée. Autrement dit, sur chaque objet, la fonction de gestionnaire d'événements ne sera exécutée qu'une seule fois.

La structure de la méthode one() est similaire à la méthode bind(), et son utilisation est la même que celle de la méthode bind(). Sa structure syntaxique est la suivante : one (type, [data], fn). ;

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

<button id="btn">点击我</button>
<div id="test"></div>

Après avoir utilisé la méthode one() pour lier un événement de clic à l'élément bb9345e55eb71822850ff156dfde57c8, la fonction de traitement ne sera exécutée que lorsque l'utilisateur clique sur le bouton pour la première fois, et les clics suivants ne fonctionneront plus.

J'espère que cet article sera utile à la programmation jQuery de chacun.