I got my keyboard working in a simple way:

rightPressed = false;

onKeyDown = function(pressEvent) {
  if (pressEvent.keyCode == 39) rightPressed = true;
}
onKeyUp = function(pressEvent) {
  if (pressEvent.keyCode == 39) rightPressed = false;
}

$(document).keydown(onKeyDown);
$(document).keyup(onKeyUp);

And it worked. Then i tried to put it all in a class:

function Tkeyboard(){
this.rightPressed = false;

this.onKeyDown = function(pressEvent) {
  if (pressEvent.keyCode == 39) { this.rightPressed = true; alert("boom!"); }
}
this.onKeyUp = function(pressEvent) {
  if (pressEvent.keyCode == 39) { this.rightPressed = false; }
}

$(document).keydown(this.onKeyDown);
$(document).keyup(this.onKeyUp);
}

In initialization I created an object:

keys = new Tkeyboard;

In main loop i put action:

if ( keys.rightPressed ) { rx+=1;}

And now it fails. The interesting part of the problem is that alert("boom!") is called, so variable should get modified too...

I would be grateful for any ideas.

I got my keyboard working in a simple way:

rightPressed = false;

onKeyDown = function(pressEvent) {
  if (pressEvent.keyCode == 39) rightPressed = true;
}
onKeyUp = function(pressEvent) {
  if (pressEvent.keyCode == 39) rightPressed = false;
}

$(document).keydown(onKeyDown);
$(document).keyup(onKeyUp);

And it worked. Then i tried to put it all in a class:

function Tkeyboard(){
this.rightPressed = false;

this.onKeyDown = function(pressEvent) {
  if (pressEvent.keyCode == 39) { this.rightPressed = true; alert("boom!"); }
}
this.onKeyUp = function(pressEvent) {
  if (pressEvent.keyCode == 39) { this.rightPressed = false; }
}

$(document).keydown(this.onKeyDown);
$(document).keyup(this.onKeyUp);
}

In initialization I created an object:

keys = new Tkeyboard;

In main loop i put action:

if ( keys.rightPressed ) { rx+=1;}

And now it fails. The interesting part of the problem is that alert("boom!") is called, so variable should get modified too...

I would be grateful for any ideas.

• javascript
• events
• object
• keyboard

• possible duplicate of How do I run an object's method onEvent in javascript? – outis Commented Mar 5, 2011 at 21:10

4 Answers 4

The keydown/up callback loses its original scope when the it is actually run. You'll need to bind the callback to this. In the Prototype Framework, you would do this:

function Tkeyboard() {
    this.rightPressed = false;

    $(document).keydown(this.onKeyDown.bind(this));
    $(document).keyup(this.onKeyUp.bind(this));
}

Tkeyboard.prototype.onKeyDown = function(pressEvent) {
  if (pressEvent.keyCode == 39) { this.rightPressed = true; alert("boom!"); }
};
Tkeyboard.prototype.onKeyUp = function(pressEvent) {
  if (pressEvent.keyCode == 39) { this.rightPressed = false; }
};

It should be similar in jQuery.

If you need an idea of how to build a full fledged keyboard class, check out the one I wrote.

In an event handler in jQuery (and in DOM events), this refers to the element the event is subscribed on (document in the sample). Use a closure if you want to refer to the original object.

function Tkeyboard(){
    var self = this;
    this.rightPressed = false;

    this.onKeyDown = function(pressEvent) {
      if (pressEvent.keyCode == 39) { self.rightPressed = true; alert("boom!"); }
    }
    this.onKeyUp = function(pressEvent) {
      if (pressEvent.keyCode == 39) { self.rightPressed = false; }
    }

    $(document).keydown(this.onKeyDown);
    $(document).keyup(this.onKeyUp);
}

this is set to the DOM element (in this case document) from which the event handler is called. In general, this is not bound to the object in javascript:

var a = {
    f: function () {}
};
var b = { f: a.f};
var f = a.f;
a.f(); // this === a
b.f(); // this === b
f(); // this === window

One monly used workaround is to bind this to a wrapper function:

function bind(func, that) {
    return function() {
        func.apply(that, arguments);
    }
}

//...
$(document).keydown(bind(this.onKeyDown, this));

Or you could use closures:

function Tkeyboard() {
    var that = this;
// use 'that' from here on

you can initiate new function it will work

    function Tkeyboard() {
    this.rightPressed = false;
    this.onKeyDown = function (pressEvent) {
        if (pressEvent.keyCode == 39) {
            this.rightPressed = true;
            console.log(this.rightPressed )
            alert('boom')
        }
    }
    this.onKeyUp = function (pressEvent) {
        if (pressEvent.keyCode == 39) {
            this.rightPressed = false;
            console.log(this.rightPressed )
        }
    }

    this.events = function(){
        document.addEventListener('keydown', this.onKeyDown);
        document.addEventListener('keyup', this.onKeyUp);

    }
}
const keys = new Tkeyboard;
keys.events();