JS中keydown、keyup和keypress有什么区别

一、三者的核心差异概览

键盘事件是网页实现快捷键响应、游戏操作、辅助无障碍导航等交互的核心途径。许多初学者常对 keydown、keypress 和 keyup 的区别感到困惑，其根本差异体现在触发时序、按键支持范围以及长按表现三个维度：

• keydown（键按下）：当手指按紧键盘上的任意物理键时触发。它无论按下的键是否会打出可见文字（无论是字母 A、数字 1，还是 Shift、Ctrl、Alt、Backspace、F1~F12 等控制键）都会立即响应。如果按住按键不放，该事件会按系统的重复速率持续重复触发。
• keypress（字符键产生，已废弃）：在历史规范中用于捕捉“实际产生字符值的击键”。它无法捕捉单纯的修饰键（Shift、Ctrl、Alt）或导航键（方向键、PageUp）。更为重要的是，由于各大浏览器对字符编码返回属性（charCode 与 keyCode）的解析长期存在分歧，W3C 在 DOM Level 3 Events 规范中已明确将其标记为废弃（Deprecated）。
• keyup（键松开）：当手指释放并离开物理键的瞬间触发。与 keydown 一样，它支持键盘上的所有按键。但无论用户此前按住按键多久，一次完整的按下到释放动作中，keyup 只会且必定触发一次。

二、事件触发时序与生命周期

理解三个事件在物理击键过程中的前后调用顺序，是准确编写交互逻辑的前提。一个常规的击键流程遵循严格的管道时序：

图 1：单次击键与长按连发过程中的事件流转与 DOM 更新时序

如图 1 所示，整个击键过程经历如下关键节点：

1. keydown 触发：物理按键触底，系统首先抛出 keydown。此时在输入框（如 <input>）中，文本尚未被写入，其 value 依然是输入前的内容。如果此时调用 event.preventDefault()，浏览器将放弃后续的字符生成与 DOM 更新。
2. keypress 触发（历史遗留）：如果按下的按键可以产生字符（且 keydown 未被阻止），浏览器会触发旧版的 keypress。
3. DOM 内容变更与 input 事件：字符被正式写入 DOM 结构，输入框的值发生变化，紧接着触发标准的 input 事件。
4. 长按连发（Auto-Repeat）：若用户持续按住按键不松手，系统进入自动重复循环，会连续交替派发 keydown（以及历史的 keypress），每次派发时事件对象的 event.repeat 属性均为 true。
5. keyup 触发：用户松开手指，物理弹片复位，派发 keyup 事件。此时在输入框内已经可以完整获取到本次输入后的最新内容。

三、多维度技术特性对比矩阵

为了让不同场景下的选型更加直观，以下将三大事件的技术指标以矩阵形式进行对照：

图 2：三大键盘事件多维度技术特性对照矩阵

通过对比可以看出，keypress 处于被替代的过渡态，在现代标准下没有任何不可替代的优势，反而充斥着兼容包袱；而 keydown 与 keyup 则是现代事件体系中的基石。

四、属性演进：从 keyCode 到 key 与 code

在早期的 JavaScript 代码中，我们常常见到使用数值码判断按键的写法，例如 e.keyCode === 13 判断回车键。这种做法存在显著的隐患：不同系统、不同浏览器对特殊按键的数值映射不完全一致，且无法直观从代码中看懂按键意图。

图 3：现代标准键值属性（key / code）与历史弃用数字属性对比

1. 现代标准推荐属性

• event.key：返回按键所代表的语义字符值（考虑当前 Shift 状态、大小写锁定及输入法）。例如按下大写状态的 A 得到 "A"，回车得到 "Enter"，ESC 键得到 "Escape"。绝大多数业务判断（如快捷键匹配、特定指令响应）都应该使用 event.key。
• event.code：返回键盘上的物理按键标识，完全不受键盘语言布局、大小写或输入法状态的影响。例如键盘上的第一排 Q 键位置恒为 "KeyQ"。这在开发游戏（如 WASD 控制角色移动）或与物理布局严格锁定的快捷键中非常有用。

2. 历史废弃属性（切勿在新项目中使用）

W3C 已经正式废弃了 event.keyCode、event.which 与 event.charCode。现代浏览器保留它们仅为维持二十年前老网站的正常运行。在现代代码中，应当全面替换为语义化的 event.key 与 event.code。

// ❌ 历史旧写法（已废弃，兼容性脆弱）
document.addEventListener('keydown', function(e) {
  if (e.keyCode === 13) {
    submitForm();
  }
});

//  现代标准写法（语义明确，跨平台一致）
document.addEventListener('keydown', function(e) {
  if (e.key === 'Enter') {
    submitForm();
  }
});

五、实战选型指南与避坑建议

在真实的业务开发中，开发者面临的不仅是按键类型的区分，还包括中文输入法（IME）、剪贴板粘贴等混合操作。通过决策树可以快速明确选型方向：

图 4：现代前端键盘与文本输入事件综合选型决策树

1. 全局快捷键与拦截：选 keydown

如果需要实现类似保存文档（Ctrl+S / Cmd+S）、按 ESC 关闭模态弹窗或按方向键翻页的功能，应当统一使用 keydown。因为 keydown 响应最迅速，并且能够通过 e.preventDefault() 阻止浏览器的默认行为（如阻止页面向下滚动或阻止浏览器默认保存对话框）。

// 监听全局 ESC 关闭弹窗示例
window.addEventListener('keydown', (event) => {
  if (event.key === 'Escape') {
    closeModal();
  }
});

2. 监控表单文本输入：不要用键盘事件，用 input 事件

这是一个极具代表性的高频误区。当开发者希望在用户输入文本时做字数限制或搜索建议时，如果监听 keydown 或 keyup，将无法捕捉到用户使用鼠标右键点击“粘贴”、拖拽文字进输入框，或使用系统语音输入的情形。因此，针对 <input> 和 <textarea> 的文本变化，统一使用 input 事件才是唯一完备的做法。

3. 规避中文输入法（IME）合成阶段的回车冲突

当用户开启中文输入法在输入框内打拼音时，按下回车键通常是为了把英文拼音上屏，而不是提交表单。如果在 keydown 中直接判断 e.key === 'Enter'，就会导致误提发表单。正确的处理方式是检查 event.isComposing 属性：

const searchInput = document.querySelector('#search');

searchInput.addEventListener('keydown', (event) => {
  // 如果正在使用输入法拼写（正在组合字符），跳过处理
  if (event.isComposing) {
    return;
  }

  if (event.key === 'Enter') {
    handleSearch(searchInput.value);
  }
});

六、总结

简要总结本文的核心知识要点：

1. keydown：按键压下时触发，覆盖全部物理按键，长按持续连发，是处理快捷键与拦截默认行为的首选。
2. keyup：按键弹起时触发，覆盖全部物理按键，一次击键仅触发一次，是重置状态与停止连续动作的合适时机。
3. keypress：历史遗留产物，只响应字符按键，已被 W3C 规范废弃，新项目应彻底杜绝使用。
4. 属性标准：淘汰 keyCode 与 charCode，优先使用语义一致的 event.key 与物理位置无关的 event.code。