Comment puis-je supprimer les écouteurs d'événements JavaScript de leurs propres définitions ?

Suppression des écouteurs d'événements JavaScript dans leurs définitions

Lorsque vous travaillez avec des écouteurs d'événements en JavaScript, il peut y avoir des scénarios dans lesquels vous devez supprimer un écouteur à partir de la définition d’un autre auditeur. Cette situation peut survenir lorsqu'une condition spécifique est remplie, comme atteindre un certain nombre de clics.

Solution :

Pour supprimer un écouteur d'événement selon sa propre définition, vous peut utiliser des fonctions nommées. Au lieu d'attribuer une fonction anonyme à la méthode addEventListener(), créez une fonction nommée et transmettez-la comme deuxième argument.

var click_count = 0;

function myClick(event) {
  click_count++;
  if (click_count == 50) {
    canvas.removeEventListener('click', myClick);
  }
}

canvas.addEventListener('click', myClick);

Dans cet exemple, myClick est une fonction nommée affectée à la méthode addEventListener(). . Lorsque l'événement click est déclenché, la fonction myClick incrémente la variable click_count. Si le nombre atteint 50, l'auditeur est supprimé à l'aide de removeEventListener().

Approche alternative :

Si vous devez utiliser une fonction anonyme ou fermer le compteur de clics variable, vous pouvez créer une fermeture. Une fermeture permet à une fonction interne d'accéder aux variables depuis sa portée externe, même après que la fonction externe a fini de s'exécuter.

var myClick = (function(click_count) {
  var handler = function(event) {
    click_count++;
    if (click_count == 50) {
      canvas.removeEventListener('click', handler);
    }
  };
  return handler;
})(0);

canvas.addEventListener('click', myClick);

Ici, la fonction myClick crée une fermeture interne qui encapsule la fonction de gestionnaire et la variable click_count .

Écouteurs multiples :

Si vous devez ajouter plusieurs auditeurs avec leur propres compteurs, vous pouvez créer une fonction d'ordre supérieur qui génère une nouvelle fonction avec son propre compteur.

var myClick = function(click_count) {
  var handler = function(event) {
    click_count++;
    if (click_count == 50) {
      canvas.removeEventListener('click', handler);
    }
  };
  return handler;
};

canvas.addEventListener('click', myClick(0));

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!