1. 程式人生 > >Javascript中的onkeydown、onkeypress、onkeyup的區別

Javascript中的onkeydown、onkeypress、onkeyup的區別

測試介面如下:
這裡寫圖片描述

測試程式碼如下:

html程式碼:

<input type="text" onkeydown="downEvent()" onkeypress="pressEvent()" onkeyup="upEvent()"></br></br>
<input type="label" id="downEvent"></br>
<input type="label" id="pressEvent"></br>
<input type="label" id="upEvent"></br>

js程式碼:

function downEvent(){
    document.getElementById("downEvent").value="downEvent";
    //alert("downEvent is doing");
}

function pressEvent(){
    document.getElementById("pressEvent").value="pressEvent";
    //alert("pressEvent is doing");
}

function upEvent(){
    document.getElementById("upEvent"
).value="upEvent"; //alert("upEvent is doing"); } </script>

結果:

觸發事件的前提:交點在輸入框控制元件上
這裡寫圖片描述

特殊情況:
*三個事件都觸發Enter鍵
*三個事件都不觸發Fn鍵
*三個事件同時存在時,alert只會彈出onkeydown和onkeypress
*只能在onkeydown事件中改變輸入字元,如:event.keyCode=65;
*漢字拼音輸入的過程只觸發onkeydown和onkeyup,如下:
這裡寫圖片描述

三者區別:
執行順序:onkeydown–>onkeypress–>onkeyup
1. onkeydown:鍵盤一按下就觸發的事件,鍵盤上任意鍵都會觸發onkeydown()事件。
2. onkeypress:鍵盤一按下就觸發的事件,同onkeydown(除去功能鍵,如:Esc,Shift,Ctrl..)
3. onkeyup:按鍵一鬆開就觸發的事件。鍵盤上任意鍵都會觸發onkeyup()事件。