Impossible de supprimerEventListener après avoir ajouté addEventListener

Question

J'essaie d'ajouter un événement de flou à certains éléments de formulaire qui vont exécuter du code pour moi. Après le flou initial, j'essaye de retirer l'écouteur de cet élément pour qu'il ne se déclenche plus. L'événement onblur fonctionne correctement, mais pour une raison inconnue, eventListener.remove ne semble jamais se déclencher, de sorte que le flou n'est pas supprimé. Des idées sur ce que je fais mal?

MISE À JOUR basé sur les commentaires de lincolnk, mais ne fonctionne toujours pas dans IE:

(function() { 
var els = [document.getElementsByTagName('input'), 
        document.getElementsByTagName('select')], 

     eventListener = { 
      add: function(el, ev, fn) { 
       if (window.addEventListener) { // Standard 
       el.addEventListener(ev, fn, false); 
       } else if (window.attachEvent) { // IE 
       var iefn = function() { fn.call(el) }; 
       el.attachEvent('on' + ev, iefn) 
       } else { return false }; 
      }, 

      remove: function(el, ev, fn) { 
       if (window.removeEventListener) { // Standard 
       el.removeEventListener(ev, fn, false) 
       } else if (window.detachEvent) { // IE 
       var iefn = function() { fn.call(el) }; 
       el.detachEvent('on' + ev, iefn) 
       } else { return false }; 
      } 
     }, 

     wtFormTracker = function() { 
      console.log(this.name); 
      eventListener.remove(this, 'blur', wtFormTracker); 
     }; 

for (var i = 0, j = els.length; i < j; i++) { 
    for (var y = 0, z = els[i].length; y < z; y++) { 
     eventListener.add(els[i][y], 'blur', wtFormTracker); 
    } 
} 
})(); 

MISE À JOUR: Pleinement opérationnelle dans tous les navigateurs

(function() { 
var els = [document.getElementsByTagName('input'), 
        document.getElementsByTagName('select')], 

     eventListener = { 
      add: function(el, ev, fn) { 
       if (window.addEventListener) { // Standard 
       el.addEventListener(ev, fn, false); 
       } else if (window.attachEvent) { // IE 
       el.attachEvent('on' + ev, fn) 
       } else { return false }; 
      }, 

      remove: function(el, ev, fn) { 
       if (window.removeEventListener) { // Standard 
       el.removeEventListener(ev, fn, false) 
       } else if (window.detachEvent) { // IE 
       el.detachEvent('on' + ev, fn) 
       } else { return false }; 
      } 
     }, 

     wtFormTracker = function(el) { 
      var target = el.target || el.srcElement; 
      console.log("'WT.ti','title-of-page','WT.ac', " + target.name); 
      eventListener.remove(target, 'blur', wtFormTracker); 
     }; 

for (var i = 0, j = els.length; i < j; i++) { 
    for (var y = 0, z = els[i].length; y < z; y++) { 
     eventListener.add(els[i][y], 'blur', wtFormTracker); 
    } 
} 
})(); 

Answer 1

vous essayez de supprimer test2 comme gestionnaire de blur mais vous ne l'avez pas affecté partout dans ce script. Je devine également l'utilisation de this au sein de test1 pointe à window qui n'est probablement pas ce que vous voulez.

test1: function(e) { 
      console.log('add'); 
      var target = e.target || e.srcElement; 
      eventListener.remove(target , 'blur', wtHelper.test1); // probably? 
     }, 

aussi si vous regarde ceci dans IE, vous créez une nouvelle fonction pour attachEvent et vous créez une nouvelle fonction pour detachEvent et vous n'allez arriver à quelque chose comme ça. il n'y a rien de mal à fournir votre fn paramètre d'origine à attachEvent/detachEvent comme vous le faites pour addEventListener.

Answer 2

Vous essayez de supprimer la fonction wtHelper.test2, qui n'a jamais été défini comme écouteur pour l'événement 'flou'. Vous vouliez sans doute faire quelque chose comme ceci:

wtHelper = { 
     test1: function() { 
      console.log('add'); 
      wtHelper.test2(); 
     }, 

     test2: function() { 
      console.log('remove'); 
      eventListener.remove(this, 'blur', wtHelper.test1); 
     } 
    };