javascriptevent-handlinganonymous-function

How to removeEventListener that is addEventListener with anonymous function?


function doSomethingWith(param)
{
    document.body.addEventListener(
        'scroll',
        function()
        {
            document.write(param);
        },
        false
    ); // An event that I want to remove later
}
setTimeout(
    function()
    {
        document.body.removeEventListener('scroll', HANDLER ,false);
            // What HANDLER should I specify to remove the anonymous handler above?
    },
    3000
);
doSomethingWith('Test. ');

Solution

  • 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