Question

所以我正在开发一款接受用户输入的游戏（向上向下向右箭头键）。为此，我将添加一个事件监听器，用于检查用户何时按下所述键。我按以下方式设置它：

function gameStart(){

    //Generates four random numbers on board
    for(gameStart_i = 0; gameStart_i < 4; gameStart_i++){
        generateNumber();
    }

    document.getElementById("start_button").innerHTML = "Reset Game";
    document.getElementById("start_button").setAttribute('onclick', 'reset()');
    document.getElementById("start_button").id = 'reset_button';

    var board = document.getElementById("game_background");


    console.log("1");
    board.addEventListener("keydown", inputListen(), false);
    console.log("1.1");
}

function inputListen(e){
    console.log("2");
    var code = e.keyCode;
    switch(code){
        case 37:
            alert("left");
            break;
        case 38:
            alert("up");
            break;
        case 39:
            alert("right");
            break;
        case 40:
            alert("down");
            break;
    }
}

这似乎与教程如何显示一致。但是，有些教程会使用如下所示的内容更改addEventListener行：

  board.addEventListener("keydown", inputListen, false); //removes the () after the function

然而，当我查看我的控制台时，这对我来说似乎不起作用。

当我运行我的代码时，我的控制台给了我以下错误：

  1
  2
Uncaught TypeError: Cannot read property 'keyCode' of undefined
    at inputListen (script.js:86)
    at gameStart (script.js:16)
    at HTMLButtonElement.onclick (2048Game.html:114)

我认为这是因为我没有将任何参数传递给我的函数，但是没有一个在线教程在addEventListener语句中传递paraements。

谢谢你，亚历

Answer 1

执行此操作的正确方法确实是在()之后移除inputListen。使用()会立即调用该函数，该函数会向您提供前面提到的Cannot read property 'keycode' of undefined，因为没有给出输入参数。

您应该在两个console.log行之间的控制台中收到错误，这证明错误来自addEventListener行。

您希望在不使用您发布的行调用它的情况下传递该函数：

board.addEventListener("keydown", inputListen, false); //removes the () after the function

看看这个JSFiddle：

function gameStart(){
  console.log("before");
  document.getElementById("game_background").addEventListener("keydown", inputListen, false);
  console.log("after");
}

这应打印到控制台

before
after

然后在检测到keydown之前别无其他。

将此绑定到哪种元素也很重要。 <input>之类的元素在这里没有问题，但普通的不可聚焦元素需要{{1} }}属性，以便集中注意并回复tabindex：

keydown

您需要单击该元素一次以关注它，然后应捕获您的事件。更多信息at this answer。

Answer 2

是删除()，您正在将函数本身用于事件侦听器，而不是函数调用的结果。
keydown事件很可能发送到页面中的任意<div>。如果您不希望用户手动点击以关注它，请将事件监听器添加到窗口本身。

window.addEventListener('keydown', inputListen);

eventListener无法读取keyCode

2 个答案: