Register prototype function as callback

Question

I've added a keydown event listener with document.addEventListener, and I wanted to remove it later somewhere else by calling document.removeEventListener.

I know this sounds quite easy, but since I'm editing some generated code, and the generator seems love prototype, so the whole bunch of code are based on prototype. Here's the simplified version:

First, I have this object say function A() {XXX}, I've added a listener function to the prototype:

A.prototype.listener = function () {console.log(this);}

And there's a listen method in the prototype,

A.prototype.listen = function() {
    document.addEventListener "keydown", KeyboardInputManager.prototype.listener
}

Finally, there's a stopListen method:

A.prototype.stopListen = function() {
    document.removeEventListener "keydown", KeyboardInputManager.prototype.listener
}

There are two issues here, first, even though the stopListen method is called, the event still got posted, and second, in my listener method, I wanted to call some other prototype methods of A, but the this var in it is the document that is passed to the listener (this is my guess, correct me if I'm wrong).

So, I'm confused how to fix this, please help me out of here!

Answer 1

There are two issues here, first, even though the stopListen method is called, the event still got posted,

The posted code has syntax errors:

> document.removeEventListener "keydown", KeyboardInputManager.prototype.listener

should be:

document.removeEventListener("keydown", KeyboardInputManager.prototype.listener);

Why this doesn't work can't be determined without seeing more code.

I wanted to call some other prototype methods of A, but the this var in it is the document that is passed to the listener

Because when a function is attached as a listener using addEventListener, then this within the function is the DOM object that the listener was attached to. If you want some other object, you can set it in the call, e.g.

A.prototype.listen = function() {
    document.addEventListener("keydown", function() {
                                           KeyboardInputManager.prototype.listener.call(A);
                                         });
}

However, how you don't have a function to reference to remove the listener. See Suman's answer for ideas on how to fix that (i.e. attached a named function that calls the listener and sets this to the value you want).

Answer 2

When you attach the method(object.methodName) with addEventListener() on particular event, the object would lost when that event will occurred and this reference would be global object document,

function A() {
    console.log("someProperty");
}

A.prototype.newMethod = function () {
    console.log('new method');
}

A.prototype.listener = function () {
    this.newMethod();
}

A.prototype.listen = function() {
    document.addEventListener( "keydown",  callFunc);
}

function callFunc(){
    myObj.listener(); //now inside listener() this refers actual object 
}

A.prototype.stopListen = function() {
    document.removeEventListener("keydown", callFunc);
}

var myObj = new A();
myObj.listen();
myObj.stopListen();

DEMO