要监听键盘按键事件，核心是使用addeventlistener方法绑定keydown或keyup事件到document或特定元素上。1. 优先使用keydown和keyup事件，它们分别在按键按下和释放时触发，能捕获所有物理按键，包括修饰键和功能键；2. 避免使用keypress，因其仅响应字符键且行为不一致；3. 通过event.key获取语义化键名（如”enter”），event.code获取物理键位（如”space”）；4. 判断组合键时结合event.ctrlkey、event.shiftkey等布尔属性；5. 使用event.preventdefault()阻止空格滚动、f5刷新等默认行为；6. 注意事件冒泡可能引发重复处理，可用event.stoppropagation()控制；7. 监听输入框时绑定到具体元素，全局快捷键则绑定到document；8. 避免内存泄漏，移除监听器时使用命名函数并调用removeeventlistener；9. 优先使用现代属性event.key和event.code，弃用已废弃的keycode；10. 根据场景选择keydown（即时响应）或keyup（输入结束校验），并考虑无障碍访问和用户体验。
JavaScript要监听键盘按键事件，核心在于使用
addEventListener
方法，将特定的键盘事件类型（如
keydown
、
keyup
）绑定到DOM元素上，通常是
document
对象或特定的输入框。这样，每当用户按下或释放键盘上的键时，我们就可以捕获到这个动作，并执行预设的函数逻辑。
解决方案
要捕获键盘事件，最直接的方式就是给
document
对象添加事件监听器。这能确保无论用户在页面的哪个位置按下按键，我们都能收到通知。
首先，我们得决定监听哪种类型的键盘事件：
keydown
: 当用户按下键盘上的一个键时触发。如果按住不放，它会连续触发。这个事件能捕获到所有的键，包括像Shift、Ctrl、Alt这样的修饰键，以及功能键（F1-F12）、方向键等。
keyup
: 当用户释放键盘上的一个键时触发。它只触发一次，无论按了多久。
keypress
: 这个事件现在已经不太推荐使用了，因为它主要关注字符输入，而不是物理按键的按下。它不响应像Shift、Ctrl这样的非字符键，而且其行为可能因浏览器和操作系统而异。
所以，通常我们主要会用到
keydown
和
keyup
。
这是一个基本的监听
keydown
事件的例子：
document.addEventListener('keydown', function(event) { console.log('键被按下了！'); console.log('按下的键是:', event.key); // 获取按下的字符或键名，如 'a', 'Enter' console.log('物理键码是:', event.code); // 获取物理键的位置，如 'KeyA', 'Enter' console.log('Ctrl键是否按下:', event.ctrlKey); // 判断Ctrl键是否同时按下 console.log('Shift键是否按下:', event.shiftKey); // 判断Shift键是否同时按下 // 阻止默认行为，比如按下空格键时页面滚动 if (event.key === ' ') { event.preventDefault(); console.log('阻止了空格键的默认滚动行为。'); }});// 如果你想在特定输入框监听，可以这样做：const myInput = document.getElementById('myInputField');if (myInput) { myInput.addEventListener('keyup', function(event) { console.log('输入框中的键被释放了！'); console.log('当前输入框的值:', this.value); });}
在事件处理函数中，我们接收到一个
event
对象，这个对象包含了大量关于事件的信息。
event.key
和
event.code
是两个非常重要的属性，它们能帮助我们准确判断用户按下了什么键。
event.key
通常返回一个可读的字符串，比如
'a'
、
'Enter'
、
'Shift'
。而
event.code
则更偏向于物理键盘上的位置，比如
'KeyA'
、
'Enter'
、
'ShiftLeft'
。当我们需要判断组合键时，
event.ctrlKey
、
event.altKey
、
event.shiftKey
、
event.metaKey
（对应Mac上的Command键）就显得非常方便了。
另外，
event.preventDefault()
是一个非常实用的方法。有些按键有默认的浏览器行为，比如按下空格键会滚动页面，按下Enter键可能会提交表单。如果我们希望完全接管这些按键的行为，就需要在事件处理函数中调用
event.preventDefault()
来阻止它们的默认效果。
JavaScript中keydown、keyup和keypress事件有什么区别？
这个问题，其实在实际开发中，尤其是处理用户输入和快捷键时，挺让人纠结的。我个人觉得，理解它们之间的细微差别，能帮你少踩很多坑。
简单来说，
keydown
和
keyup
关注的是“物理按键”的状态变化。当你按下键盘上的一个物理键，
keydown
就触发了；当你松开那个键，
keyup
就触发了。这就像你按电灯开关，按下是
keydown
，松开是
keyup
。它们能捕获所有按键，包括那些不产生字符的键，比如Shift、Ctrl、Alt、F1、方向键等等。而且，当你按住一个键不放时，
keydown
会重复触发，这就是所谓的“按键重复”（key repeat）。
而
keypress
呢，它就有点“过时”了，或者说它的设计初衷和前两者不太一样。
keypress
关注的是“字符的生成”。也就是说，只有当你按下一个键，并且这个键会产生一个字符（比如字母、数字、符号）时，
keypress
才会触发。像Shift、Ctrl、Alt这些不直接产生字符的键，
keypress
是不会响应的。更麻烦的是，
keypress
还受到键盘布局、大小写锁定等因素的影响，比如你按A键，如果开启了Caps Lock，
keypress
可能会报告’a’或’A’，这取决于浏览器实现。由于其行为的不确定性和局限性，现在多数现代前端开发都倾向于使用
keydown
或
keyup
来处理键盘事件。
所以，我的建议是：
需要监听所有按键，或者处理组合键（Ctrl+S保存，Shift+Delete删除等），或者需要判断按键是否持续按下（比如游戏中的角色移动），用
keydown
。需要知道用户何时停止按下某个键，比如在文本输入框中，当用户松开键后才去校验输入内容，用
keyup
。尽量避免使用
keypress
，除非你明确知道它的局限性，并且你的场景确实需要它那种“字符生成”的特性。
如何在JavaScript中准确判断用户按下了哪个键？
要准确判断用户按下了哪个键，关键在于理解
event
对象提供的几个属性：
key
、
code
，以及虽然不推荐但仍可能遇到的
keyCode
。
event.key
： 这是现代浏览器中推荐使用的属性。它返回一个表示按下的键的字符串，这个字符串通常是“人可读”的。比如，你按下字母’A’键，
event.key
就是
"a"
（如果未按Shift）或
"a"
（如果按了Shift）。按下回车键，它就是
"Enter"
；按下空格键，它是
" "
（一个空格字符）；按下左Shift键，它是
"Shift"
。它的好处是语义化强，易于理解和判断。大多数情况下，这是你的首选。
document.addEventListener('keydown', function(event) { if (event.key === 'Enter') { console.log('用户按下了回车键！'); } else if (event.key === 'Escape') { console.log('用户按下了Esc键！'); } else if (event.key === 'ArrowUp') { console.log('用户按下了向上方向键！'); }});
event.code
： 这个属性返回的是物理键盘上按键的“位置”或“代码”。它不关心你按下的键会产生什么字符，只关心你按下了键盘上的哪个物理键。例如，无论你按下左边的Shift键还是右边的Shift键，
event.key
可能都是
"Shift"
，但
event.code
会明确告诉你这是
"ShiftLeft"
还是
"ShiftRight"
。同样，对于字母键，无论你按下’A’还是’a’，
event.code
通常都是
"KeyA"
。这对于需要处理键盘布局无关的快捷键（比如游戏控制）非常有用。
document.addEventListener('keydown', function(event) { if (event.code === 'KeyW' && event.ctrlKey) { console.log('Ctrl + W 被按下了，这通常是关闭标签页的快捷键！'); event.preventDefault(); // 阻止浏览器默认行为 } else if (event.code === 'Space') { console.log('物理空格键被按下。'); }});
event.keyCode
： 这是一个比较老的属性，返回一个数字代码。虽然在很多旧代码中还能看到它的身影，但它已经被废弃了。它的值可能会因浏览器和操作系统而异，并且在处理非字母数字键时，其语义不如
key
或
code
清晰。因此，除非你必须兼容非常老的浏览器环境，否则强烈建议不要使用它。
// 尽量避免使用，仅作了解document.addEventListener('keydown', function(event) { if (event.keyCode === 13) { // 13 是回车键的 keyCode console.log('用户按下了回车键 (通过keyCode)。'); }});
判断组合键：除了
key
和
code
，
event
对象还提供了几个布尔属性来判断修饰键是否被按下：
event.altKey
: 如果Alt键（Option键在Mac上）被按下，为
true
。
event.ctrlKey
: 如果Ctrl键被按下，为
true
。
event.shiftKey
: 如果Shift键被按下，为
true
。
event.metaKey
: 如果Meta键（Command键在Mac上，Windows键在Windows上）被按下，为
true
。
结合这些属性，你就可以非常精确地判断用户按下了什么键或键的组合了。
处理键盘事件时常见的陷阱和最佳实践有哪些？
在JavaScript中处理键盘事件，看似简单，但实际操作起来，总会遇到一些意想不到的问题。我在这里分享一些我遇到过的“坑”和总结出来的“最佳实践”，希望能帮助你更顺畅地驾驭它们。
常见的陷阱：
事件冒泡（Event Bubbling）的困扰： 键盘事件会从触发的元素开始，一直向上冒泡到
document
。这意味着如果你在一个输入框上监听了
keydown
，同时也在
document
上监听了
keydown
，那么当你在输入框里按下键时，两个监听器都会被触发。有时候这正是我们想要的，但有时候会导致重复处理或逻辑冲突。
解决方案： 如果你只想在特定元素上处理事件，不希望它继续向上冒泡，可以使用
event.stopPropagation()
。
document.getElementById('myInput').addEventListener('keydown', function(event) { console.log('输入框内的事件'); event.stopPropagation(); // 阻止事件冒泡到document});document.addEventListener('keydown', function(event) { console.log('文档全局事件');});
浏览器默认行为（Default Actions）的干扰： 很多按键都有浏览器内置的默认行为。比如，按下空格键会滚动页面，按下Enter键在表单中可能会提交表单，按下F5会刷新页面。如果你想自定义这些按键的功能，而不希望浏览器执行其默认操作，就必须阻止它。
解决方案： 在事件处理函数中调用
event.preventDefault()
。这是非常关键的一步。
document.addEventListener('keydown', function(event) { if (event.key === ' ') { event.preventDefault(); // 阻止空格键的默认滚动行为 console.log('你按下了空格，但页面没有滚动！'); } if (event.key === 'F5') { event.preventDefault(); // 阻止F5刷新页面 console.log('你按下了F5，但页面没有刷新！'); }});
性能问题与重复触发： 如果在
keydown
事件中执行了复杂的DOM操作或大量计算，而用户又按住一个键不放，导致事件持续触发，可能会造成页面卡顿。
解决方案： 对于需要频繁触发的事件，考虑使用防抖（Debouncing）或节流（Throttling）。不过，对于简单的键盘快捷键或输入处理，通常不需要这么做。更多是针对
resize
、
scroll
这类事件。
焦点（Focus）问题： 键盘事件的触发与元素的焦点状态密切相关。如果你想监听用户在特定输入框中的输入，那么监听器就应该加在这个输入框上。如果监听器加在
document
上，那么无论焦点在哪里，事件都会触发，这可能不是你想要的。
内存泄漏： 如果你动态地添加了大量的事件监听器，但在元素被移除或不再需要时没有及时移除它们，就可能导致内存泄漏。
解决方案： 当不再需要监听器时，务必使用
removeEventListener()
来移除它。这在单页应用（SPA）中尤为重要，因为组件的生命周期管理需要特别注意。
function handleKeyDown(event) { console.log('事件被触发了');}document.addEventListener('keydown', handleKeyDown);// 当不再需要时// document.removeEventListener('keydown', handleKeyDown);
请注意，
removeEventListener
需要传入与
addEventListener
完全相同的函数引用。匿名函数则无法被移除。
最佳实践：
全局快捷键监听
document
： 如果你的键盘事件是用于实现全局的快捷键（比如Ctrl+S保存），那么将监听器添加到
document
对象上是最佳选择。这样无论用户当前焦点在哪里，都能捕获到事件。
局部输入监听特定元素： 对于输入框、文本区域等需要捕获用户输入的场景，将监听器直接添加到这些元素上，而不是
document
。这能更精确地控制事件的范围。
优先使用
event.key
和
event.code
： 抛弃
keyCode
，拥抱更语义化、更可靠的
event.key
和
event.code
。根据你的需求选择：需要识别字符用
key
，需要识别物理键位用
code
。
善用
event.preventDefault()
： 养成习惯，在处理键盘事件时，如果你的逻辑完全取代了浏览器的默认行为，就立即调用
event.preventDefault()
。这能避免很多意想不到的副作用。
考虑无障碍性（Accessibility）： 在设计键盘交互时，始终考虑那些可能不使用鼠标的用户。确保你的键盘快捷键是直观的，并且遵循常见的约定。例如，Tab键应该用于焦点导航，Enter键通常用于激活按钮或提交表单。
区分
keydown
和
keyup
的用途：
keydown
适合处理需要即时响应的场景，比如游戏中的按住移动，或者需要阻止默认行为（如回车提交）。
keyup
适合处理“最终”状态，比如输入完成后触发校验，或者处理组合键的释放。
通过理解这些陷阱和遵循这些实践，你可以写出更健壮、更用户友好的键盘交互代码。
以上就是js如何监听键盘按键事件的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1514759.html
微信扫一扫 
支付宝扫一扫 
