Question

I using the code below to add an event listener to the body but I can’t remove it

this.events = {
    addEventListener : function(element, eventName, eventHandler, scope) {
        var scopedEventHandler = scope ? function(e) { eventHandler.apply(scope, [e]); } : eventHandler;
        if(document.addEventListener)
            element.addEventListener(eventName, scopedEventHandler, false);
        else if(document.attachEvent)
            element.attachEvent("on"+eventName, scopedEventHandler);
    }
}
this.events.addEventListener( document.body, "keydown", this.keyEvent, this);

Answer 1

By modifying the event handler in your this.events object, the event handlers are no longer the same.

http://jsfiddle.net/asXzA/1/

I suggest you create a registry of events added via your this.events system, that way you can pull stuff out easily.

this.events = {
    eventRegistry : {},

    addEventListener : function(element, eventName, eventHandler, scope) {
        var scopedEventHandler = scope ? function(e) { eventHandler.apply(scope, [e]); } : eventHandler;

        // save the scoped event handler
        if (typeof eventRegistry == "undefined")                
            eventRegistry = {};

        if (typeof eventRegistry[eventName] == "undefined")
            eventRegistry[eventName] = {};

        eventRegistry[eventName][eventHandler] = scopedEventHandler;

        if(document.addEventListener)
            element.addEventListener(eventName, scopedEventHandler, false);
        else if(document.attachEvent)
            element.attachEvent("on"+eventName, scopedEventHandler);
    },

    removeEventListener : function(element, eventName, eventHandler, scope) {

        // retrieve saved event handler
        var scopedEventHandler = eventRegistry[eventName][eventHandler];

        if(document.removeEventListener)
            element.removeEventListener(eventName, scopedEventHandler, false);
        else if(document.detachEvent)
            element.detachEvent("on"+eventName, scopedEventHandler);
    }
};

this.keyEvent = function () { alert("keypressed"); this.events.removeEventListener(document.body, "keydown", this.keyEvent, this); alert("removed"); };
this.events.addEventListener( document.body, "keydown", this.keyEvent, this);​