如何在一个div上使用'keydown'事件监听器？

Question

我正在尝试捕捉特定按键事件，其中某些按键对应着播放特定音频片段。我一直在搜索，但是陷入了困境。看起来keydown事件只能在window/document对象中使用。这是正确的吗？我看到有些人谈论jQuery插件，虽然我想避免使用jQuery。原生JS最理想。

我有2个DIV希望同时监听keydown事件。基于按下的按键，该函数播放相应的音频片段。

谢谢！

- rabbitwerks

---

欢迎来到 StackOverflow！考虑进行更多的研究和细化你的问题以解决特定问题，因为当前问题有些太广泛了。根据这里可以问哪些话题？ - “我们不允许询问关于书籍、工具、软件库、教程或其他外部资源的推荐或寻找问题，因为它们往往会吸引主观性答案和垃圾邮件。请描述问题以及已经采取的解决方法。” - Tyler Roper

正如您可能有充分的理由远离jQuery一样，我仍然想说，jQuery是传统JavaScript的重要补充。它具有许多优点，您无法通过传统JavaScript自己更好地实现。 （抱歉被“Vanilla JS is ideal”触发了） - Mark Baijens

没问题，我只是这么说是因为我专注于学习JavaScript本身。我不想陷入jQuery更容易所以就那样做的诱惑中。我想要在基础层面上理解这个过程。 - rabbitwerks

Answer 1

给<div>添加一个 tabindex 属性，这样它就可以被聚焦了。在您的情况下，使用 -1 的 tabindex 最好，因为它允许元素获得焦点但无法通过 tab 键访问。

tabindex 全局属性指定其元素是否可以获得焦点，以及是否以及何时参与连续的键盘导航（通常是使用 Tab 键，因此得名）。

负值（通常是 tabindex="-1"）表示该元素应该可以获得焦点，但不应该通过连续的键盘导航可到达。它主要用于使用 JavaScript 创建可访问小部件。

然后您可以将一个 keydown 事件监听器添加到该元素，并检查事件的 keyCode。

document.getElementById("someId").addEventListener("keydown", function(event){
    //do something on keydown
    if(event.keyCode==13){
     //enter key was pressed
    }
    if (event.keyCode >= 65 && event.keyCode <= 90){
       //input was a-z
    }
});

- Unmitigated

---

到目前为止，这对我非常有效。谢谢！使用条件语句来指定键的重要性是有意义的。这样，我只需要在窗口对象上使用 keydown。 - rabbitwerks

@TechtronixWeb 我很高兴能够帮到你！ - Unmitigated

Answer 2

你可以通过给元素添加 tab index 属性来使其能够接收焦点。

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

只要它在焦点上，就能捕获关键事件。 如果你想让元素可以用Tab键聚焦，给它一个大于-1的索引。 简单示例

- Andrei Nemes

---

啊，这很有道理。所以你一次只能有一个键按下事件处于活动状态，因为事件元素需要处于焦点状态吗？ - rabbitwerks

除非事件被取消，否则父元素仍会收到通知。这意味着您也可以在 document.body 或 window 中捕获事件。您可以在此处阅读更多信息 https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture - Andrei Nemes