Question

I’m having trouble adding an event listener. I’m basically encapsulating all keyboard-related functions into a JavaScript class like so:

function Keyboard()
{
    this.key = new Array();

    for(x=0;x<255;x++)
    {
        this.key[x] = false;
    }

    function keyDown(evt)
    {
        this.key[evt.keyCode] = true;
        console.log("Keydown bioch");
    }

    function keyUp(evt)
    {
        this.key[evt.keyCode] = false;
    }

    window.addEventListener('keydown', this.keyDown, true);
    window.addEventListener('keyup', this.keyUp, true);
}

Except that it doesn’t work – at all. When I remove the Keyboard function and make everything global (key[], keyDown, keyUp, and addEventListener calls), everything works.

What am I doing wrong?

Answer 1

You’re using the this keyword where it’s not appropriate. Also, your objects have no keyDown/keyUp properties.

You will need to dereference the array, as this in a listener would point to the event-receiving (dom) element – which has no key property. And to reference your local functions, just use their names:

function Keyboard() {
    var arr = this.key = new Array();
    for(x=0;x<255;x++)
        arr[x] = false;

    function keyDown(evt) {
        arr[evt.keyCode] = true;
        console.log("Keydown bioch");
    }
    function keyUp(evt) {
        arr[evt.keyCode] = false;
    }

    window.addEventListener('keydown', keyDown, true);
    window.addEventListener('keyup', keyUp, true);
}