当我将 EventListener 从 "click" 更改为 "keydown" 时代码停止工作

Question

当您单击（在网格上）时，下面的代码成功地改变了网格中块的位置。

但是，我打算在按下某个键时执行此操作。碰巧当我将 EventListener 从“click”更改为“keydown”时，如果我在运行脚本时按笔记本电脑的任何键，我都得不到任何响应。

我假设元素有问题（我需要聚焦它？如何？），或者文档不知何故无法识别键输入。我该怎么做才能解决这个问题？

let x = 5;
let y = 5;

function CreateSnake(){
  tabuleiro.appendChild(snake);
   snake.style.gridColumnStart = x;
   snake.style.gridRowStart = y;

   snake.classList.add("snake");
  };

  tabuleiro.addEventListener("click" , function(){
      moveSnakeRight();
      remove()
    });

function moveSnakeRight(){
  if ( x < 10)
  console.log(x++)
;
}

function remove(){
  snake.remove()
}

Answer 1

我的猜测是您在错误的元素上设置了 keydown 事件侦听器。为了处理 keydown 事件，元素必须能够接收焦点（设置 tabindex）。请参阅以下演示：https://jsfiddle.net/mqe59dL6/

const noFocus = document.getElementById('noFocus');
const focus = document.getElementById('focus');

function handler(event) {
    event.cancelBubble = true;
    console.log(event.target.id || 'document', event.keyCode);
}

noFocus.addEventListener('keydown', handler);
focus.addEventListener('keydown', handler);
document.addEventListener('keydown', handler);

#noFocus {
  height: 60px;
  background-color: #aff;
  padding: 10px;
}

#focus {
  height: 60px;
  background-color: #faf;
  padding: 10px;
}

<div id="noFocus">
  I can't receive focus. Events will go to the document.
</div>
<div id="focus" tabindex="0">
  I can receive focus, click on me first.
</div>

另一种方法是处理 document 上的事件。试试 document.addEventListener("keydown", ...).

当我将 EventListener 从 "click" 更改为 "keydown" 时代码停止工作

Code stops working when I change the EventListener from "click" to "keydown"

addeventlistener

keydown

onkeydown