javascript - eventListener 无法读取 keyCode

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 语句中传递参数。

谢谢， 亚历克斯

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 .

将它绑定(bind)到哪种元素也很重要。一个元素，例如 <input>在这里没有问题，但普通的不可聚焦元素需要 tabindex属性以便集中注意力并响应 keydown :

<div id="game_background" tabindex="-1">
</div>

您需要单击该元素一次以将焦点放在它上面，然后您的事件应该被捕获。更多信息 at this answer .