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