使用 element.addEventListen("keydown", function) 而不是 document.addEventListener("keydown", function) 的问题

Question

我有一个按钮元素的 NodeList numbers。我希望每个元素都根据自己的 textContent 监听 keydown 事件。

当我使用 document.addEventHandlers("keydown", function) 时，它工作正常。

方法一：

document.addEventListener("keydown", (e)=>{
numbers.forEach(number=>{
    if (number.textContent === e.key){
        addNumber(number)
    }})})

但是，当我改用它时它停止工作：

方法二：

numbers.forEach(number=>number.addEventListener("keydown", (e)=>{
    if (number.textContent === e.key){
        addNumber(number);
    }}))

第一种方法对我来说似乎效率不高，因为每次触发“keydown”时它都必须与数字中的每个项目进行比较。谁能告诉我为什么方法 2 不能像方法 1 那样工作？

Answer 1

    document.addEventListener("keydown", (e)=>{
    numbers.forEach(number=>{
        if (number.textContent === e.key){
             addNumber(number)
        }})})

在上面的代码中，您为文档本身添加了一个 keydown 侦听器，因此每当您按下键盘上的某个键时，都会触发此事件。

     numbers.forEach(number=>number.addEventListener("keydown", (e)=>{
         if (number.textContent === e.key){
             addNumber(number);
         }}))

在此代码中，您将向单个元素添加一个 keydown 侦听器，因此只有当该元素获得焦点时，才会为该元素触发 keydown 事件

Answer 2

如果问题出在性能上，您可以将数字映射到 map/dictionary 中，将它们的 textContent 作为键，将数字对象作为值。那么：

document.addEventListener("keydown", (e) => {
    var number = numbersByKey[e.Key];
    if (number)
        addNumber(number);
})

使用 element.addEventListen("keydown", function) 而不是 document.addEventListener("keydown", function) 的问题

Problem of using element.addEventListen("keydown", function) over document.addEventListener("keydown", function)

javascript

event-handling

addeventlistener