zoukankan      html  css  js  c++  java
  • js中onkeyup、onkeydown和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

  • 相关阅读:
    Educational Codeforces Round 69 D E
    洛谷P2325 [SCOI2005]王室联邦
    洛谷P1494 [国家集训队]小Z的袜子
    洛谷P4514 上帝造题的七分钟
    POJ3321Apple Tree
    满血复活前的记录(持续更新ing)
    各位2019见
    LuoguP3338 [ZJOI2014]力
    Codeforces Round #478 Div2 975A 975B 975C 975D
    Codeforces Round #479 (Div. 3) 题解 977A 977B 977C 977D 977E 977F
  • 原文地址:https://www.cnblogs.com/cyfeng/p/13335765.html
Copyright © 2011-2022 走看看