Removing DOM Event Observer

Question

I'm working in a javascript based system with some legacy code (ominous music), and this legacy code adds event listeners like this

foo.addEventListener("click",function(){
    //do some stuff
});

Is there a way for me to programmatically remove event listeners that have been added like this? I know about removeEventListener, but's it's not clear from the documentation how (if at all) to remove a listener which a programmer added via an anonymous function.

score 2 · Answer 1 · edited May 23 '17 at 12:21

As far as I can tell, you can't use an anonymous function if you want to call removeEventListener because you need a reference to the same function that you used with addEventListener and the only way to do that is to have a name for the function (e.g. not anonymous).

Similar question and conclusion here: removeEventListener on anonymous functions in JavaScript

Without changing the structure of your code, you can give it a name and then use that name later.

foo.addEventListener("click", function fooClickHandler(){
    //do some stuff
});

// then later
foo.removeEventListener("click", fooClickHandler);

score 1 · Answer 2 · edited Jan 04 '19 at 09:56

If you want to get rid of all eventlisteners before adding your own you can use clonenode and remove original. The copy will not have the eventlisteners copied with it.

  var fee = foo.cloneNode();
  foo.parentNode.replaceChild(fee, foo);

Should look the same but without eventlistener.

Got a fiddle here that proves my point: http://jsfiddle.net/U7w7M/1/

Notice how the formatting stays, the position is the same, but click action is removed after first click

score 1 · Answer 3 · answered Nov 06 '13 at 22:59

You can remove them the same way that you add them by passing in the handler that you created it with. The handler ceases to be an anonymous function at this point though:

var handler = function() {
  // do some stuff
};

foo.addEventListener("click", handler);
foo.removeEventListener("click", handler);

You can do some funky stuff like this to remove handlers with anonymous functions although I don't recommend it, but it is possible and you can't access callee in strict mode:

document.addEventListener('click', function(e) {
    console.log('click');

    if(e.unbind) {
        document.removeEventListener('click', arguments.callee);
    }
});

var event;

// First actual real event
event = new Event('click');
document.dispatchEvent(event);

// Unbinding event
event = new Event('click');
event.unbind = true;
document.dispatchEvent(event);

// Should not fire
event = new Event('click');
document.dispatchEvent(event);

Removing DOM Event Observer

3 Answers3