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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM