Problème de suppression d'EventListener en JavaScript : pourquoi RemoveEventListener() échoue

En JavaScript, les écouteurs d'événements permettent aux développeurs de surveiller les événements des éléments DOM tels que les clics, les mouvements de la souris, etc. plus. Bien qu'attacher un écouteur d'événement soit assez simple, le supprimer peut parfois poser des problèmes.

Le code

Le code d'origine ajoute un écouteur d'événement à un élément nommé zone lorsque vous cliquez dessus.

area.addEventListener('click', function(event) {
  app.addSpot(event.clientX, event.clientY);
  app.addFlag = 1;
}, true);

Le problème

Le problème survient lors de la tentative de suppression de l'écouteur d'événement plus tard dans le code.

area.removeEventListener('click', function(event) {
  app.addSpot(event.clientX, event.clientY);
  app.addFlag = 1;
}, true);

Cependant, l'écouteur d'événement reste attaché, empêchant sa suppression.

La solution

La raison de ce problème réside dans la manière dont les écouteurs d'événement sont attachés. Chaque instance de fonction différente crée un écouteur d'événement distinct. Dans ce cas, deux fonctions anonymes sont utilisées pour ajouter et supprimer l'écouteur.

Pour résoudre le problème, assurez-vous que la référence de fonction utilisée pour la suppression est identique à celle utilisée pour ajouter l'écouteur.

function handleClickListener(event) {
  app.addSpot(event.clientX, event.clientY);
  app.addFlag = 1;
}

// Add event listener
area.addEventListener('click', handleClickListener, true);

// Remove event listener
area.removeEventListener('click', handleClickListener, true);

En utilisant la même référence de fonction pour les deux opérations, JavaScript peut supprimer correctement l'écouteur d'événement lorsqu'il est appelé.