本文详细解析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则是输入流被系统处理之后发生的事件。