addEventListener не работает должным образом

Question

Я превращаю учебную игру в более сильный шаблон приложения и сталкивался с проблемой рефакторинга моих слушателей событий.

В исходном коде, я слушатели установить и обратные вызовы определяются в главной функции:

(function() { 
    "use strict"; 
    GAME.init(); 
    function main() { 
     GAME.stopMain = window.requestAnimationFrame(main); 

     GAME.draw(); 

     GAME.update(); 
    } 

    document.addEventListener("keydown", keyDownHandler, false); 
    document.addEventListener("keyup", keyUpHandler, false); 

    function keyDownHandler(e) { 
     if (e.keyCode === 39) { 
      GAME.inputs.rightPressed = true; 
     } else if (e.keyCode === 37) { 
      GAME.inputs.leftPressed = true; 
     } 
    } 

    function keyUpHandler(e) { 
     if (e.keyCode === 39) { 
      GAME.inputs.rightPressed = false; 
     } else if (e.keyCode === 37) { 
      GAME.inputs.leftPressed = false; 
     } 
    } 

    main(); 
})(); 

Когда я сменил свои слушатель и обратные вызовы за вызов GAME.inputs.init(); и создал этот метод GAME.inputs:

GAME.inputs: { 
    keyDownHandler: function(e) { 
     if (e.keyCode === 39) { 
      this.rightPressed = true; 
     } else if (e.keyCode === 37) { 
      this.leftPressed = true; 
     } 
    }, 

    keyUpHandler: function(e) { 
     if (e.keyCode === 39) { 
      this.rightPressed = false; 
     } else if (e.keyCode === 37) { 
      this.leftPressed = false; 
     } 
    }, 

    init: function() { 
     document.addEventListener("keydown", this.keyDownHandler, false); 
     document.addEventListener("keyup", this.keyUpHandler, false); 
    } 
}; 

Слушатели событий прекратили регистрацию. У меня была эта проблема раньше, и я просто вернулся к старому, но я хотел бы понять, ПОЧЕМУ это не работает.

Answer 1

Вам необходимо позвонить bind, чтобы область действия не являлась документом.

document.addEventListener("keydown", this.keyDownHandler.bind(this), false); 
document.addEventListener("keyup", this.keyUpHandler.bind(this), false); 

и в зависимости от того, как она инициализируется, это может быть на самом деле

document.addEventListener("keydown", this.inputs.keyDownHandler.bind(this), false); 
document.addEventListener("keyup", this.inputs.keyUpHandler.bind(this), false);