Кажется, не могу удалитьEventListener после добавления addEventListener

Question

Я пытаюсь добавить событие размытия к некоторым элементам формы, которое будет запускать некоторый код для меня. После начального размытия я пытаюсь удалить слушателя из этого элемента, чтобы он не срабатывал снова.

Событие onblur работает нормально, но по какой-то причине eventListener.remove никогда не срабатывает, поэтому размытие не удаляется. Есть идеи, что я делаю не так?

ОБНОВЛЕНО на основе комментариев Линкольнка, но все еще НЕ работает в 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);
    }
}
})();

ОБНОВЛЕНИЕ: полностью работает во всех браузерах

(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

вы пытаетесь удалить test2 как обработчик blur, но вы не назначили его нигде в этом сценарии. Я также предполагаю, что использование this в test1 указывает на window, что, вероятно, не то, что вы хотите.

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

также, если вы просматриваете это в IE, вы создаете совершенно новую функцию для attachEvent, а затем создаете еще одну совершенно новую функцию для detachEvent, и вы не получите ничего подобного. нет ничего плохого в том, чтобы предоставить исходный параметр fn для attachEvent/detachEvent, как вы делаете для addEventListener.

Answer 2

Вы пытаетесь удалить функцию wtHelper.test2, которая никогда не определялась как прослушиватель события 'blur'.Вы, вероятно, хотели сделать что-то вроде этого:

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

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