HTML元素上的Javascript onkeydown事件

我正在尝试使用WASD制作一个移动WebGL（three.js）摄像头的应用程序。但是，当我使用

onkeydown = function(e) { alert("a") }

并尝试在同一页上键入文本框，它会触发侦听器。我将代码更改为如下所示：

var container = document.getElementById("container");
container.onkeydown = function(e) { alert("a") }

document.addEventListener('DOMContentLoaded', function() {
    var container = document.getElementById('container');
    container.addEventListener('keydown', function(e) { alert("a") });
});

但这不起作用，因为HTML内容尚未加载，所以我添加了jQuery：

var container;
$(function() {
  container = document.getElementById("container");
  container.onkeydown = function(e) { alert("a") }
});

---

现在，监听器根本不工作，那么有可能使其工作吗？

为了使其工作，您的元素必须是：

当一个元素被聚焦时，文档接收到的关键事件必须 要针对那个元素。可能没有重点关注的元素；当没有 元素为焦点，文档接收到的关键事件必须 针对

但是，为了能够聚焦元素，必须：

如果满足以下所有条件，则元素可聚焦：

• 元素的属性已设置
• 该元素是该元素的子元素，或者是该元素的子元素
• 元素不是
• 元素不是

通常，问题是缺少tabindex focus标志。您可以通过使用整数值添加来设置“添加”

一旦元素可聚焦，就需要聚焦它。有多种方法可以做到这一点，例如：

• 使用JavaScript，使用方法
• 用鼠标单击它（不取消

  mousedown

  事件）
• 按tab键在可聚焦元素中导航。如果使用非负的

  选项卡index

  ，元素最终将成为焦点

例如：

var container=document.getElementById（“容器”）；
container.onkeydown=函数（e）{alert（“Key detected”）}

#容器{边框：3px实心红色；填充：10px；}
#容器：焦点{边框颜色：绿色；}
#容器：在{content:“现在我没有专注，所以它不会工作。单击我。”；}
#container:focus:after{content:“现在我专注了，所以它会工作。按一个键。”；}

---

您需要使用

DOMContentLoaded

事件延迟执行，直到加载HTML之后。在纯JavaScript中，它将如下所示：

var container = document.getElementById("container");
container.onkeydown = function(e) { alert("a") }

document.addEventListener('DOMContentLoaded', function() {
    var container = document.getElementById('container');
    container.addEventListener('keydown', function(e) { alert("a") });
});

对于jQuery，它基本相同，但略短：

$(document).ready(function() {
    var container = document.getElementById('container');
    $(container).keydown(function(e) { alert("a") });
});

（加上Oriol对

tabindex

的评论）

函数myFunction（）{
警报（“a”）；
}

谢谢您的快速回答。这也适用于画布吗？@Firephoenix是的，它应该适用于画布（但不适用于画布中绘制的形状）。出于测试目的，我尝试在代码中聚焦元素，然后按下按钮。然而，它并没有检测到键控，所有聚焦的条件都得到了满足。你是说我的代码片段吗？还是关于你的代码？然后提供一个。我使用了addEventListener、jQuery监听器和onkeydown监听器，但只有第一个有效。我不知道这是为什么，但最终它起了作用。虽然这是有意义的，但当我尝试时，它不起作用。如果我错了，请纠正我，但是如果侦听器不在全局范围内，则无法触发它。我不确定不在全局范围内是什么意思。也许你遗漏了一些关于你的代码的重要细节？另外，确保容器像Oriol说的那样是可聚焦的。如果这让你感到困惑，我很抱歉。我的意思是：

函数a（）{//当}

//它在函数外部被触发时，我不能期望函数内部的侦听器被触发

，我仍然不确定我是否理解，但让我试着猜测一下。如果你说在函数中设置的侦听器在函数完成后不能被触发，那你就错了。通过设置侦听器，您正在更改全局状态。不管你在哪里做，由于某种原因，当我尝试使用jQuery监听器时，它没有起作用。然而，它与普通JS一起工作。