在document.addEventListener("keydown"，函数)上使用element.addEventListen("keydown"，函数)的问题

Question

我有一个按钮元素的NodeList数字。我希望每个元素在各自的textContent中侦听keydown事件。

当我使用document.addEventHandlers("keydown"，函数(时，它工作得很好。

方法1:

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

然而，当我使用时，它就停止工作了

方法2:

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

如果问题在于性能，您可以将数字映射到映射/字典中，将其textContent作为键，将数字对象作为值。然后：

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