Pourquoi mon JavaScript RemoveEventListener() ne fonctionne-t-il pas ?

Javascript RemoveEventListener ne fonctionne pas

Dans ce code, un écouteur d'événement est ajouté à un élément à l'aide de la méthode addEventListener() :

area.addEventListener('click',function(event) ...,true);

Plus tard, dans une autre fonction, l'écouteur d'événement est tenté d'être supprimé à l'aide de la méthode removeEventListener() :

area.removeEventListener('click',function(event) ...,true);

Cependant, l'écouteur d'événement n'est pas supprimé. Pourquoi cela se produit-il ?

Le problème :
Le problème réside dans le fait que les deux fonctions anonymes passées en arguments aux méthodes addEventListener() et removeEventListener() sont deux différentes fonctions. Lorsque l'écouteur d'événement est ajouté avec le code suivant :

area.addEventListener('click',function(event) ...,true);

Le runtime crée un nouvel objet fonction anonyme unique et l'assigne au gestionnaire d'événement click de l'élément de zone.

Quand l'écouteur d'événement est supprimé avec le code suivant :

area.removeEventListener('click',function(event) ...,true);

Un différent nouvel objet de fonction anonyme unique est créé et attribué au gestionnaire d'événements de clic de l'élément de zone. La première fonction n'est pas supprimée, elle continue donc à gérer l'événement click.

Solution :
Pour supprimer correctement l'écouteur d'événement, il est nécessaire de fournir la méthode removeEventListener() avec une référence au même objet fonction qui a été transmis à la méthode addEventListener(). Pour ce faire, l'écouteur d'événements doit être défini comme une fonction nommée, puis la fonction nommée doit être utilisée comme argument aux méthodes addEventListener() et removeEventListener(). Par exemple :

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

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!