Javascript keyboard event in an object

Question

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.

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

Community · Accepted Answer · 2017-05-23 12:04:11Z

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.

edited May 23, 2017 at 12:04

CommunityBot

11 silver badge

answered Mar 5, 2011 at 21:03

JoJo

20.2k37 gold badges112 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

outis · Accepted Answer · 2011-03-05 21:08:47Z

2

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);
}

edited Mar 5, 2011 at 21:08

answered Mar 5, 2011 at 21:01

outis

77.7k23 gold badges155 silver badges228 bronze badges

Comments

Tgr · Accepted Answer · 2011-03-05 21:09:08Z

1

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 commonly 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

answered Mar 5, 2011 at 21:09

Tgr

28.4k13 gold badges88 silver badges123 bronze badges

Comments

Akram Elhaddad · Accepted Answer · 2019-03-29 06:47:18Z

0

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();

answered Mar 29, 2019 at 6:47

Akram Elhaddad

3145 silver badges9 bronze badges

Collectives™ on Stack Overflow

Javascript keyboard event in an object

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related