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

addEventListener未按预期工作

1 个答案: