2

I'm trying to genericly subscribe and unsubscribe to events. Thus I was wondering, is it possible to store an event listener into an variable and later unbind it by variable reference?

// AddEventListener
var listener = function() {console.log("listener");};
var listener_reference = window.addEventListener("message", my_function );

// RemoveEventListener
window.removeEventListener(listener_reference); 
// or
listener_reference.removeEventListener();

I DO know how to know how to subscribe and unsubscribe events in the classical way, e.g. as described on MDN, however I'm looking for an way to do it by assigning the listener to an variable. Thus this classical way is NOT the answer to my question:

var div = document.getElementById('div');
var listener = function (event) {
  /* do something here */
};
div.addEventListener('click', listener, false);
div.removeEventListener('click', listener, false);

I endet up building two prototypes EventListener and EventManager:

function EventListener (obj, eventtype, listener, useCapture) {
    this.obj = obj;
    this.eventtype = eventtype;
    this.listener = listener;
    this.useCapture = useCapture || false;

    this.removeEventListener = function () {
        console.log("remove",this);
        this.obj.removeEventListener(this.eventtype,this.listener,this.useCapture);
    }
    this.obj.addEventListener(this.eventtype, this.listener, this.useCapture)
};

function EventManager() {

    var eventlisteners=[];

    this.addEventListener = function (obj, eventtype, listener, useCapture) {
        var eventlistener = new EventListener(obj, eventtype, listener, useCapture);
        eventlisteners.push(eventlistener);
        return eventlistener;
    };
    this.removeAllEventListeners = function () {
        for (var i = 0; i < eventlisteners.length; i++) {
            if(eventlisteners[i] instanceof EventListener ) {
                eventlisteners[i].removeEventListener();
                delete eventlisteners[i];
            }
        }
    };
}



var listener = function(){console.log("Hello World!")};
var clicks = new EventListener(window,"click",listener);
clicks.removeEventListener();

var manager = new EventManager();
var listener2 = function(){console.log("Hello World 2!")};
var clicks2 = manager.addEventListener(window,"click",listener);
manager.removeAllEventListeners();
Manuel
  • 9,112
  • 13
  • 70
  • 110
  • [EventTarget.removeEventListener()](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener) – t.niese Nov 13 '15 at 15:47
  • I DO know how to add and remove event listeners. However I explicitly ask for an way to do it by a variable reference since I'm annoyed of saving all event listeners I assign to an array to delete them on screen change to not flood the browsers with hundreds of event listeners!! – Manuel Nov 14 '15 at 12:06
  • Well this kind of misunderstanding can happen, but can be always solved with clarification, and will always result into an answer. Then you need to so something like this: [jsfiddle demo](https://jsfiddle.net/zy7fsd9h/) – t.niese Nov 14 '15 at 12:23
  • The misunderstanding is mainly because you write `[...]store an event listener into an variable[...]` because the listener is the function which you can indeed can store in a variable. What you are looking for is the combination of listener and eventtarget. Afterwards it is clear what you are asking, and by taking even more time in the initial read it might have been obvious on the first read, but as I said this can always happen. – t.niese Nov 14 '15 at 12:39
  • Thx for the fiddle t.niese. I build around your suggestion a small EventManager Prototype. However I was hoping that this is already part of modern Webbrowsers. See my own answer belows – Manuel Nov 14 '15 at 13:26
  • ... just realized I cannot answer right now. Added it to a fiddle http://jsfiddle.net/ManuelFink/fvvcfy8y/ – Manuel Nov 14 '15 at 13:29
  • Personally I prefer that the core API is minimal, and that additional features a supplied by libraries. Because if this kind of feature is useful depend on how you deal with events. And it might clutter up the API if you include everthing. I prefer to use event delegation but I'm happy with using a library or own code for that. – t.niese Nov 14 '15 at 13:36

0 Answers0