onkeydown、onkeypress与onkeyup的区别及执行顺序详解
本文详细解析JavaScript中onkeydown、onkeypress和onkeyup三个键盘事件的区别。重点说明三者的触发时机、执行顺序（keydown最先，keypress其次，keyup最后）以及对输入流处理的不同影响。通过代码示例展示回车键在不同事件下的焦点行为差异，并指出onkeydown可拦截输入而onkeyup时输入已生效的特性，帮助开发者根据需求选择合适的事件处理函数。
键盘事件基本概念
名称与说明对照如下。
onkeypress
该事件在用户按下并松开任意字母或数字键时触发。系统按键（如方向键和功能键）无法触发此事件。
onkeyup
该事件在用户松开之前按下的任意键盘键时触发。
onkeydown
该事件在用户按下任意键盘键时触发，包括系统按键（如方向键和功能键）。
======================
代码示例与焦点行为
相关代码如下：
<html>
<script>
function checkForm(){
if(event.keyCode ==13){
event.keyCode =9;
}
}
</script>
<body>
<form name ="form1">
<input type="text" name = "text1" onkeydown = "checkForm()">
<input type="button" name = "button1" value="按钮">
</form>
</body>
</html>执行顺序与输入流处理
当按下回车键时，焦点会从文本框转移到按钮上。如果将事件替换为“onkeypress”，焦点既不会转移也不会丢失。但如果替换为“onkeyup”，则会导致焦点丢失，并触发页面重新加载。
测试结果表明，onkeydown事件最先执行，其次是onkeypress，最后是onkeyup；onkeydown和onkeypress的执行会影响onkeyup的行为。如果三个事件同时存在且都包含alert，通常只会弹出两个alert，onkeyup对应的alert不会弹出。
三者在事件响应机制上存在另一差异：在onkeydown和onkeypress响应时，输入的字符尚未被系统正式接收；而在响应onkeyup时，输入流已被系统接收。由于onkeydown比onkeypress先执行，结合上述示例可知，当onkeydown触发时，输入流即将进入系统，即onkeydown事件结束后，输入流便进入系统且无法更改。因此，通过onkeydown事件可以改变用户按下的键；而onkeypress事件在输入流进入系统后触发，但此时输入流暂未被系统处理，已无法改变输入流；onkeyup则是输入流被系统处理之后发生的事件。
JS怎么实现页面强制刷新
2026-11-05 14:53:38
点击JS链接直接运行不下载？前端实现.js文件强制下载的三种方法
2026-11-05 12:12:23
怎么封装一个通用的JS创建元素辅助函数
2026-11-05 11:41:41
Swiper.js 怎么监听滑动结束并获取当前索引
2026-11-05 10:57:15
HTML、CSS和JS的关系：Web前端三件套怎么协作
2026-11-04 15:41:40