js如何监听键盘按键事件-js教程-PHP中文网

要监听键盘按键事件，核心是使用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（输入结束校验），并考虑无障碍访问和用户体验。

js如何监听键盘按键事件

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
```
  登录后复制
  适合处理“最终”状态，比如输入完成后触发校验，或者处理组合键的释放。