onkeyup，onkeydown和onkeypress的區(qū)別介紹

更新時(shí)間：2013年10月21日 17:00:21 作者：

三者在事件的響應(yīng)上還有一點(diǎn)不同，就是onkeydown 、onkeypress事件響應(yīng)的時(shí)候輸入的字符并沒有被系統(tǒng)接受，而響應(yīng)onkeyup的時(shí)候，輸入流已經(jīng)被系統(tǒng)接受

msdn上有三者的區(qū)別：

名稱說明

onkeypress

這個(gè)事件在用戶按下并放開任何字母數(shù)字鍵時(shí)發(fā)生。系統(tǒng)按鈕（例如，箭頭鍵和功能鍵）無法得到識(shí)別。

onkeyup

這個(gè)事件在用戶放開任何先前按下的鍵盤鍵時(shí)發(fā)生。

onkeydown

這個(gè)事件在用戶按下任何鍵盤鍵（包括系統(tǒng)按鈕，如箭頭鍵和功能鍵）時(shí)發(fā)生。

======================

復(fù)制代碼代碼如下:

 
<html> 
<script> 
function checkForm(){ 
if(event.keyCode ==13){ 
event.keyCode =9; 
} 
} 
</script> 
<body> 
<form name ="form1"> 
<input type="text" name = "text1" onkeydown = "checkForm()"> 
<input type="button" name = "button1" value="按鈕"> 
</form> 
</body> 
</html> 

當(dāng)按下回車時(shí)，焦點(diǎn)從文本框移到按鈕上。如果把它換成“onkeypress”，焦點(diǎn)不會(huì)轉(zhuǎn)移，也不會(huì)失去。但是如果換成“onkeyup”，則失去焦點(diǎn)，頁(yè)面重新載入。

測(cè)試發(fā)現(xiàn)onkeydown 事件最先執(zhí)行，其次是onkeypress,最后是onkeyup；onkeydown 和onkeypress會(huì)影響onkeyup的執(zhí)行。三個(gè)事件同事在的話，都是alert的話，只會(huì)彈出2個(gè)alert，up事件的alert不會(huì)彈出。

三者在事件的響應(yīng)上還有一點(diǎn)不同，就是onkeydown 、onkeypress事件響應(yīng)的時(shí)候輸入的字符并沒有被系統(tǒng)接受，而響應(yīng)onkeyup的時(shí)候，輸入流已經(jīng)被系統(tǒng)接受。由于onkeydown 比onkeypress先執(zhí)行，再根據(jù)上面的例子可以知道，onkeydown 觸發(fā)的時(shí)候輸入流正要進(jìn)入系統(tǒng)，也就是說onkeydown 事件一完，輸入流就進(jìn)入了系統(tǒng)，無法改變。所以通過onkeydown 事件可以改變用戶是按了哪個(gè)鍵；而onkeypress事件則是在輸入流進(jìn)入系統(tǒng)后觸發(fā)的，但輸入流暫未被系統(tǒng)處理，此時(shí)已經(jīng)不能改變輸入流了；onkeyup則是輸入流被系統(tǒng)處理后發(fā)生的。

您可能感興趣的文章:

相關(guān)文章

深入了解JavaScript中的Symbol的使用方法
這篇文章主要介紹了深入了解JavaScript中的Symbol的使用方法,本文針對(duì)ES6版本的JS進(jìn)行講解,需要的朋友可以參考下
2015-07-07
告訴你什么是javascript的回調(diào)函數(shù)
在javascript中回調(diào)函數(shù)非常重要，它們幾乎無處不在。像其他更加傳統(tǒng)的編程語(yǔ)言都有回調(diào)函數(shù)概念，但是非常奇怪的是，完完整整談?wù)摶卣{(diào)函數(shù)的在線教程比較少，倒是有一堆關(guān)于call()和apply()函數(shù)的，或者有一些簡(jiǎn)短的關(guān)于callback的使用示例。
2014-09-09
Javascript中arguments和arguments.callee的區(qū)別淺析
這篇文章主要介紹了Javascript中arguments和arguments.callee的區(qū)別淺析,本文用一個(gè)實(shí)例來理解它們的區(qū)別,需要的朋友可以參考下
2015-04-04
老生常談關(guān)于JavaScript的類的繼承
下面小編就為大家?guī)硪黄仙Ｕ?關(guān)于JavaScript的類的繼承。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-06-06
在JavaScript中操作時(shí)間之getYear()方法的使用教程
這篇文章主要介紹了在JavaScript中操作時(shí)間之getYear()方法的使用教程,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下
2015-06-06
Javascript this 關(guān)鍵字詳解
Javascript是一種很靈活的語(yǔ)言, 而This關(guān)鍵字又是靈活中的靈活, 但是因?yàn)樗撵`活, 也注定了它的難用.以前我用this的時(shí)候, 都會(huì)覺得不踏實(shí), 老是擔(dān)心它不知道怎么地就會(huì)指到另外的什么地方.其實(shí), 這都是因?yàn)? 我們對(duì)它的不了解.
2014-10-10
簡(jiǎn)介JavaScript中POSITIVE_INFINITY值的使用
這篇文章主要介紹了簡(jiǎn)介JavaScript中POSITIVE_INFINITY值的使用,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下
2015-06-06
跨域請(qǐng)求的完美解決方法(JSONP, CORS)
下面小編就為大家?guī)硪黄缬蛘?qǐng)求的完美解決方法(JSONP, CORS)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-06-06
java中String類型變量的賦值問題介紹
下面小編就為大家?guī)硪黄猨ava中String類型變量的賦值問題介紹。小編覺得挺不錯(cuò)的?，F(xiàn)在分享給大家，給大家一個(gè)參考。
2016-03-03
FF（火狐）瀏覽器無法執(zhí)行window.close()解決方案
這篇文章主要介紹了FF（火狐）瀏覽器無法執(zhí)行window.close()解決方案,需要的朋友可以參考下
2014-11-11