onkeydown、onkeypress、onkeyup的区别

简介: onkeydown、onkeypress、onkeyup的区别
<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的话,只会弹出2个alert,up事件的alert不会弹出。


三者在事件的响应上还有一点不同,就是onkeydown 、onkeypress事件响应的时候输入的字符并没有被系统接受,而响应onkeyup的时候,输入流已经被系统接受。由于onkeydown 比onkeypress先执行,再根据上面的例子可以知道,onkeydown 触发的时候输入流正要进入系统,也就是说onkeydown 事件一完,输入流就进入了系统,无法改变。所以通过onkeydown 事件可以改变用户是按了哪个键;而onkeypress事件则是在输入流进入系统后触发的,但输入流暂未被系统处理,此时已经不能改变输入流了;onkeyup则是输入流被系统处理后发生的。

用如下流程图就能够清晰明白三者的运行顺序:

onkeydown---输入流准备进入系统---→onkeypress---输入流已进入系统(未被系统处理)------输入流被系统处理---→onkeyup


相关文章
|
1月前
|
Web App开发 JavaScript 前端开发
javascript onkeydown事件
javascript onkeydown事件
|
3天前
|
设计模式 JavaScript 前端开发
addEventlistener和正常的onclick=()=> 的区别
【10月更文挑战第29天】`addEventListener` 是一种更推荐的添加事件处理函数的方式,它提供了更好的灵活性、可维护性和代码结构,能够满足复杂的事件处理需求,而 `onclick` 属性则更适合简单的、一次性的事件绑定场景,且在现代的JavaScript开发中,应尽量避免在HTML中直接使用 `onclick` 属性,以提高代码的质量和可维护性。
|
4月前
|
JavaScript 前端开发 Java
获取键盘事件的keyCode属性
获取键盘事件的keyCode属性
|
6月前
|
Java API 容器
java和VB中按键事件处理:解析 KeyCode、KeyAscii; KeyDown/KeyUp/KeyPress 的关系区别及应用
java和VB中按键事件处理:解析 KeyCode、KeyAscii; KeyDown/KeyUp/KeyPress 的关系区别及应用
事件对象(event)
1.event 就是一个事件对象,写到侦听函数的小括号里,当作形参来看。 2.事件对象只有有了事件才会存在,它是系统给我们自动创建的,不需要我们传递参数。 3.事件对象是我们事件的一系列跟事件相关的数据的集合。比如鼠标点击事件里面就包含了鼠标的相关信息,如鼠标的坐标,如果是键盘事件里面就包含的是键盘事件的信息,如判断用户按下哪个按键。
|
JavaScript 程序员
【JavaScript-事件】target和this的区别?如何阻止冒泡事件?常见的鼠标事件和键盘事件有哪些?
【JavaScript-事件】target和this的区别?如何阻止冒泡事件?常见的鼠标事件和键盘事件有哪些?
160 0
【JavaScript-事件】target和this的区别?如何阻止冒泡事件?常见的鼠标事件和键盘事件有哪些?
14、事件类型(鼠标事件、键盘事件、触屏事件)
14、事件类型(鼠标事件、键盘事件、触屏事件)
151 0
|
JavaScript
click与addEventListener和removeEventListener事件详解
click与addEventListener和removeEventListener事件详解
click与addEventListener和removeEventListener事件详解