JavaScript：“keydown”EventListener不工作，除非我先单击实际按钮？
我正在制作一个浏览器中的普通JavaScript计算器，并试图赋予它键盘功能。我遇到的问题是让EventListener使用keydown操作。 下面是我的JS代码：JavaScript：“keydown”EventListener不工作，除非我先单击实际按钮？,javascript,Javascript,我正在制作一个浏览器中的普通JavaScript计算器，并试图赋予它键盘功能。我遇到的问题是让EventListener使用keydown操作。 下面是我的JS代码： const buttonchoices = Array.from(document.querySelectorAll("button[data-key]")); buttonchoices.forEach(key => key.addEventListener("keydown", e =>{ const ke
const buttonchoices = Array.from(document.querySelectorAll("button[data-key]"));
buttonchoices.forEach(key => key.addEventListener("keydown", e =>{
const key = document.querySelector(`button[data-key="${e.keyCode}"]`);
console.log(e)
}));
<html>
<head>
<title></title>
</head>
<body>
<div id="calculator" class="allbtns">
<input type="text" name="display" id="display" style="grid-area: display" disabled>
<!--Numbers-->
<button id="9" data-key="57" value="9" class="number" style="grid-area:nine">9</button>
<button id="decimal" data-key="190" class ="number" style="grid-area:decimal" value=".">.</button>
<!--Operations-->
<button id="+" data-key="187" value="+" class="number operations" style="grid-area:add">+</button>
<button id="operate" data-key="13" value="=" class="number operate" style="grid-area:operate">=</button>
</div>
</body>
<script type="text/javascript" src="calculator.js"></script>
</html>
所以到现在为止，当我按下任何一个键时，什么都没有发生 我对代码中的内容做了一些修改，使其更易于理解： 我将所有按键处理代码移动到一个handleKey函数，该函数接受按下的键的值或单击的按钮的值。这比查找关键代码更容易，并将这些信息公开给我们 我选择将keydown侦听器添加到documentElement html元素，因为我年纪大了，这是我习惯的。基本上，在这个监听器中，您所做的就是处理按下的键并阻止默认值 阻止默认设置会阻止密钥执行它通常执行的操作：键入数字、提交表单等等，因此请小心使用。您可能希望仅将密钥筛选到您在handleKey函数中实际使用的密钥，或者制作一个handleKey数组，并检查e.key是否在其中，如果在其中，则仅调用e.preventDefault。 然后，我使用了与您之前用于向按钮添加keydown事件监听器的代码基本相同的代码来向按钮添加click事件监听器，这只是遵从handleKey函数。我又用了e。如果将type=button添加到所有按钮，则可以删除该按钮 功能手柄钥匙{ const display=document.getElementById'display'； 开关钥匙{ 案例“9”：display.value+=“9”；中断； 大小写“.”：display.value+=display.value.includes.“？：”；中断； 案例“+”：console.log'add'；break； 大小写“回车”：console.log“等于”；break； } } document.documentElement.addEventListener'keydown'，e=>{ handleKeye.key； e、 防止违约； }; document.queryselectoral'button[data key]”。forEachbutton=> 按钮。addEventListener'click'，e=>{ handleKeye.target.value； e、 防止违约； } ; 9 . + =
keydown事件在具有焦点的任何元素上触发，然后在配置为时使DOM冒泡。这就是为什么你必须点击它或点击它，它才能听到事件。我不知道为什么在窗口上使用事件侦听器时不能调用任何函数。也许可以将事件侦听器添加到document.documentElement或document.body？@HereticMonkey这肯定是一个答案，因为这是最好的方法。@Syedmm我正在等待OP澄清为什么他们不能从连接到窗口的事件侦听器调用函数，因为这意味着在任何答案上来回的次数都会减少。我也确信有一个重复的地方…@HereticMonkey@syedmh我相信我的函数e vs key的输入是错误的，但现在它可以在窗口上使用事件侦听器。那么，我是否必须取消选择/取消对另一个元素的关注，以收听更具体的元素？监听整个窗口而不是常量定义的按钮数组是否更好？如果监听窗口上的keydown，只需为按钮元素上的click事件添加事件监听器。我会在回答中解释更多。谢谢你的解释。我想我现在明白了背后的逻辑。非常感谢！