码迷,mamicode.com
首页 > Web开发 > 详细

js中onkeyup、onkeydown和onkeypress的区别

时间:2020-07-18 15:51:54      阅读:80      评论:0      收藏:0      [点我收藏+]

标签:存在   处理   的区别   不能   接受   字母   代码   javascrip   就会   

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中onkeyup、onkeydown和onkeypress的区别

标签:存在   处理   的区别   不能   接受   字母   代码   javascrip   就会   

原文地址:https://www.cnblogs.com/cyfeng/p/13335765.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!