JavaScript键盘事件keydown、keypress与keyup的触发顺序详解

作者：小圆点

时间：2026-10-23

本文详细解析JavaScript中键盘事件的触发顺序。字符键按下时会依次触发keydown、keypress和keyup事件；而非字符键（如功能键）仅触发keydown和keyup。通过示例代码展示了如何获取这些事件及其keyCode，帮助开发者准确处理键盘交互逻辑。

文章目录

本文通过具体代码示例，展示JavaScript中键盘事件的触发机制，供读者参考学习。

键盘事件的响应顺序

当用户按下键盘按键时，系统会按特定顺序触发多个相关事件。

针对字符键，键盘事件的触发顺序如下：

1. keydown 2. keypress 3. keyup

对于非字符键（例如功能键或特殊符号键），键盘事件的响应顺序有所不同：

1. keydown 2. keyup

若用户持续按住字符键，keydown和keypress事件会交替重复触发，直到按键松开。若持续按住非字符键，则仅keydown事件会持续触发，直至按键释放。

获取键盘事件响应顺序示例

以下示例代码用于获取并显示键盘事件的响应顺序：


<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <body>
 <textarea id="text" cols="26" rows="16"></textarea>
 <script>
 var n = 1;
 var text = document.getElementById("text");
 text.onkeydown = f;
 text.onkeyup = f;
 text.onkeypress = f;
 
 function f(e){
 var e = e || window.event;
 text.value += (n++) + "=" + e.type + " (keyCode=" + e.keyCode + ")\n";
 }
 </script>
 </body>
</html>

在输入框中分别输入字符a、b、c

键盘事件的响应顺序