js中onkeyuponkeydown和onkeypress的区别

Posted 执手听风吟

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js中onkeyuponkeydown和onkeypress的区别相关的知识，希望对你有一定的参考价值。

onkeyup、onkeydown与onkeypress三者在事件的响应上各有不同：
onkeydown 、onkeypress事件响应时，输入的字符并没有被系统接受，而响应onkeyup时，输入流已经被系统接受

 

onkeyup是在键盘按下去并松开后执行

onkeydown在键盘下去就会执行，不管是数字键还是字母键还是任何的功能键(所有键)

onkeypress在键盘下去就会执行，但是按下功能键(F1到F12还有下箭头键下箭头键等这些功能键)不会执行

 

测试代码：

<html>

<body>

    <h1>测试下onkeyup、onkeydown和onkeypress的区别</h1>
    测试onkeyup：<input type="text" id="test1" onkeyup="testKeyUp()"><br><br>
    测试onkeydown：<input type="text" id="test2" onkeydown="testKeyDown()"><br><br>
    测试onkeypress：<input type="text" id="test3" onkeypress="testKeyPress()"><br><br>
    测试onkeyup、onkeydown和onkeypress：<input type="text" id="test4" onkeyup="testKeyUp()" onkeydown="testKeyDown()"
        onkeypress="testKeyPress()"><br><br>

    </h3>

</body>
<script>
    function testKeyUp() {
        alert("我是onkeyup");
    }

    function testKeyDown() {
        alert("我是onkeydown");
    }

    function testKeyPress() {
        alert("我是onkeypress");
    }
</script>

</html>

　　

 测试发现onkeydown 事件最先执行，其次是onkeypress，最后是onkeyup；onkeydown 和onkeypress会影响onkeyup的执行。
三个事件同时存在时，都是alert的话，只会弹出2个alert，up事件的alert不会弹出。

 

总结：
onkeydown 、onkeypress事件响应时输入的字符并没有被系统接受，而响应onkeyup时，输入流已经被系统接受。
由于onkeydown 比onkeypress先执行，onkeydown 触发时输入流正要进入系统，即onkeydown 事件一完，输入流就进入了系统，无法改变。
所以通过onkeydown 事件可以改变用户是按了哪个键；
而onkeypress事件则是在输入流进入系统后触发的，但输入流暂未被系统处理，此时已经不能改变输入流了；
onkeyup则是输入流被系统处理后发生的。

 

本文原始链接：http://www.jbxue.com/article/12977.html

以上是关于js中onkeyuponkeydown和onkeypress的区别的主要内容，如果未能解决你的问题，请参考以下文章

Android Bug（？）：onKey 之后声明它是 KeyEvent.ACTION_UP [重复]

为啥没有出现 Apple Push Notification Authentication Key (Sandbox & Production)

有关Excel中Enter键按键事件的问题，只想对定指的表起作用，如何设置？谢谢！【注：本人vba很菜】

头条前端笔试最后一道题

dialogfragment监听返回键

dialogfragment监听返回键