Supprimer EventListener dans JavaScript après qu'un événement s'est produit?

Question

Il y a 24 div-objets en attente/en écoute pour un clic de souris. Après avoir cliqué sur un objet div, je veux enlever le EventListener de tous les 24 div-objets.

for (var i=1;i<=24;i++){ 
    document.getElementById('div'+i).addEventListener('click',function(event){ 
     for (var z=1;z<=24;z++){ 
      document.getElementById('div'+z).removeEventListener()//Problem lies here 
     } 

     //Some other code to be run after mouseclick 

     },false); 

} 

Le problème est que le removeEventListener est niché dans addEventListener et je dois définir le type, l'auditeur, la légende sous forme d'attributs à la méthode removeEventListener. Et je pense qu'il est impossible de définir l'auditeur à cause de l'imbrication.

J'ai essayé aussi de définir un nom de fonction, mais il n'a pas travaillé:

for (var i=1;i<=24;i++){ 
    document.getElementById('div'+i).addEventListener('click',function helpme(event){ 
     for (var z=1;z<=24;z++){ 
      document.getElementById('div'+z).removeEventListener('click',helpme,false); 
     } 

     //Some other code to be run after mouseclick 

     },false); 

} 

Answer 1

Il devrait fonctionner avec une fonction nommée. Si votre deuxième approche ne fonctionne pas correctement, essayez de stocker l'écouteur initial dans une variable, comme ceci:

var handler = function(event) { 
    for(...) { 
     removeEventListener('click', handler, false); 
    } 
}; 

addEventListener('click', handler, false); 

Ps. Si vous vous souciez de la vitesse, vous pouvez envisager d'utiliser un seul gestionnaire d'événements. Vous pouvez placer le gestionnaire dans l'élément parent des divs, puis déléguer l'événement à partir de là. Avec 24 gestionnaires, votre approche actuelle n'a probablement pas beaucoup de succès, mais c'est quelque chose que vous devriez garder à l'esprit si jamais elle se sent lente.