CODEWITHSUNDEEP
javascriptevents
CoryDorning
CoryDorning

Reputation: 1914

Can't seem to removeEventListener after adding addEventListener

I'm trying to add a blur event to some form elements which will run some code for me. After the initial blur, I'm trying to remove the listener from that element so that it doesn't fire again.

The onblur event works fine, but for some reason the eventListener.remove never seems to fire, so blur doesn't get removed. Any ideas as to what I'm doing wrong?

UPDATED based on lincolnk's comments, but still NOT working in 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);
    }
}
})();

UPDATE: Fully operational in all browsers

(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);
    }
}
})();

Upvotes: 2

Views: 1782

Answers (2)

lincolnk
lincolnk

Reputation: 11238

you're trying to remove test2 as a handler of blur but you have not assigned it anywhere in this script. I'm also guessing the use of this within test1 is pointing to window which is probably not what you want.

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

also if you're viewing this in IE, you are creating a brand new function for attachEvent and then you create another brand new function for detachEvent and you're not going to get anywhere like that. there's nothing wrong with providing your original fn parameter to attachEvent/detachEvent just like you do for addEventListener.

Upvotes: 2

ArtBIT
ArtBIT

Reputation: 3989

You are trying to remove the wtHelper.test2 function, which was never defined as listener for 'blur' event. You probably wanted to do something like this:

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

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

Upvotes: 2

Related Questions