How to removeEventListener that is addEventListener with anonymous function?

by

You can’t. You have to use a named function or store the reference somehow.

var handler;

function doSomethingWith(param) {
    handler = function(){
        document.write(param);
    };  
    document.body.addEventListener('scroll', handler,false);
}
setTimeout(function() {
     document.body.removeEventListener('scroll', handler ,false);
}, 3000);

The best would be to do this in a structured way, so that you can identify different handlers and remove them. In the example above, you obviously could only remove the last handler.

Update:

You could create your own handler handler (:)) :

var Handler = (function(){
    var i = 1,
        listeners = {};

    return {
        addListener: function(element, event, handler, capture) {
            element.addEventListener(event, handler, capture);
            listeners[i] = {element: element, 
                             event: event, 
                             handler: handler, 
                             capture: capture};
            return i++;
        },
        removeListener: function(id) {
            if(id in listeners) {
                var h = listeners[id];
                h.element.removeEventListener(h.event, h.handler, h.capture);
                delete listeners[id];
            }
        }
    };
}());

Then you can use it with:

function doSomethingWith(param) {
    return Handler.addListener(document.body, 'scroll', function() {
        document.write(param);
    }, false);
}

var handler = doSomethingWith('Test. ');

setTimeout(function() {
     Handler.removeListener(handler);
}, 3000);

DEMO

More Related Contents:

  1. onclick=”” vs event handler
  2. JavaScript: remove event listener
  3. How to debug JavaScript / jQuery event bindings with Firebug or similar tools?
  4. How can I be notified when an element is added to the page?
  5. How can I capture the right-click event in JavaScript? [duplicate]
  6. How can I trigger an onchange event manually? [duplicate]
  7. removeEventListener on anonymous functions in JavaScript
  8. How does a function in a loop (which returns another function) work? [duplicate]
  9. Is there a difference between (function() {…}()); and (function() {…})();? [duplicate]
  10. How can I show a hidden div when a select option is selected?
  11. Javascript: closure of loop?
  12. JavaScript: Listen for attribute change?
  13. Capture click on div surrounding an iframe
  14. Reason behind this self invoking anonymous function variant
  15. javascript: recursive anonymous function?
  16. jQuery: $().click(fn) vs. $().bind(‘click’,fn);
  17. Are event handlers in JavaScript called in order?
  18. How adding event handler inside a class with a class-method as the callback?
  19. Implementing jQuery’s “live” binder with native Javascript
  20. Javascript anonymous function call [duplicate]
  21. jQuery: more than one handler for same event
  22. JavaScript add events cross-browser function implementation: use attachEvent/addEventListener vs inline events
  23. Is event a global variable that is accessible everywhere inside the callback chain?
  24. submit event does not fire if submit initiated programmatically
  25. Javascript click event handler – how do I get the reference to the clicked item?
  26. How to register multiple external listeners to the same selection in d3?
  27. How can I pass a reference to a function, with parameters? [duplicate]
  28. How to click a browser button with JavaScript automatically?
  29. jQuery .on() method doesn’t see new elements
  30. Explain ExtJS 4 event handling

Leave a Comment