Javascript event listener called with class method

Question

So I have following code:

class SquareBlock {
constructor(){
    this.startPosition = rand(1, boardHeight - 3);
    this.block = [{x: 1, y: this.startPosition}];
    this.block.push({x: 1, y: this.startPosition + 1});
    this.block.push({x: 2, y: this.startPosition});
    this.block.push({x: 2, y: this.startPosition + 1});

    document.addEventListener('keydown', () => {return this.move();}, true);

    for(var n in this.block){
        fields[getFieldId(this.block[n].x, this.block[n].y)].hasBlock = true;
        pointColor(this.block[n].x, this.block[n].y, 'blue');
    }

    this.start();
}

start(){        
    for(var n in this.block){
        fields[getFieldId(this.block[n].x, this.block[n].y)].hasBlock = false;
        pointColor(this.block[n].x, this.block[n].y, 'transparent');
    }
    for(var n in this.block){
        this.block[n].x += 1;
    }
    for(var n in this.block){
        fields[getFieldId(this.block[n].x, this.block[n].y)].hasBlock = true;
        pointColor(this.block[n].x, this.block[n].y, 'blue');
    }

    if(this.isSettledValidate() != 'stop'){
        setTimeout(() => {this.start()}, 100);
    }
}

isSettledValidate(){
    if(this.block[2].x == boardWidth - 2 || this.block[3].x == boardWidth - 2){
        return 'stop';
    }
    if(fields[getFieldId(this.block[2].x + 1, this.block[2].y)].hasBlock == true){
        return 'stop';
    }
    if(fields[getFieldId(this.block[3].x + 1, this.block[3].y)].hasBlock == true){
        return 'stop';
    }
}

move(ev){
    switch(ev.which){
        case 37:
        for(var n in this.block){
            if(this.block[n].y - 1 != 0){
                this.block[n].y -= 1;
            }
        }
        break;
        case 39:
        for(var n in this.block){
            if(this.block[n].y + 1 != boardHeight - 1){
                this.block[n].y += 1;
            }
        }
        break;
    }
}

}

And I have problem with document.addEventListener in constructor. What I want to achieve is to move SquareBlock one space left or right with move() class method. When I use code "document.addEventListener('keydown', move, true)" square won't move because "this" in move function points at "document" object. When I tried to fix this with arrow function (as in code above), "this" correctly points at square object but then it won't move either because square object doesn't have "which" property and I can't use it to scan keycodes. Forgive me if it's dumb question with simple solution but I'm novice programmer. I've read related topic about this in event handlers but I couldn't find an ansewr there.

Me.Name · Accepted Answer · 2016-06-30 12:32:18Z

1

The fastest quick fix for the current setup is to pass the eventargs in the arrow function: e => this.move(e):

document.addEventListener('keydown', e => this.move(e), true);

Simplified example for testing:

class SquareBlock {
  constructor(){
      document.addEventListener('keydown', e => this.move(e), true);      
  }

  move(ev){
    console.log(this , ev);
  }
}

new SquareBlock();

Alternatively, you can bind the function:

document.addEventListener('keydown',this.move.bind(this), true);

edited Jun 30, 2016 at 12:32

answered Jun 30, 2016 at 12:19

Me.Name

12.6k3 gold badges34 silver badges48 bronze badges

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

Comments

leetibbett · Accepted Answer · 2016-06-30 12:10:39Z

0

The value of this changes in javascript and it can be confusing. Have a look at apply and call for examples of manipulating the value of this when calling a method. In your example you might be able to get away with setting a variable to represent your current SquareBlock instance like this:

var me = this;
document.addEventListener('keydown', () => {return me.move();}, true);

The reasoning here (at least to my understanding) is that the event is raised from within a different context (document). By setting this into a variable me you can refer back to that context later.

answered Jun 30, 2016 at 12:10

leetibbett

8434 silver badges16 bronze badges

Collectives™ on Stack Overflow

Javascript event listener called with class method

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related