keydown, keypress, keyup 的差異

[debbygigigi]

看到胡大寫的這篇 從 React 原始碼看 keyPress 與 keyDown 事件，讓我也想跟著研究一下 keydown, keypress, keyup 三者的差異，該文已經敘述的很詳細了，我這邊只是試著再整理一下

keydown

• 按下任何按鍵時觸發，包含 ESC 、 ENTER 鍵等等。
• 連續按著按鍵，會連續觸發事件。
• 這時取 input 的值會是輸入前的值

key

按鍵所表現的值，會跟著輸入法改變。文字按鍵的值，例如按 q 就會得到 q，有分大小寫，如果輸入中文例如「你」則會根據注音而分別觸發不同的事件並印出「ㄋ」「ㄧ」「ˇ」。非文字按鍵的值，例如按 shift 鍵會得到「"shift"」，按空白鍵會得到「 " " 」，這裡有對應表

code

這個比較針對按鍵的自身的代碼，例如數字1的按鍵會得到「Digit1」，就算實際輸入的是 ㄅ 或 ! ，因為都是按同一個鍵，所以都是得到「Digit1」的結果。

charCode (deprecated)

只有 keypress 事件有作用，這邊不管按什麼都只會輸出 0

keyCode (deprecated)

得到鍵盤所對應到的數字代碼，例如輸入 a 或 A 會得到 65， shift 鍵是 16，注意如果是中文一率都輸出 229

keypress(deprecated)

The keypress event is fired when a key that produces a character value is pressed down.

• 只有能產生字的時候觸發，就是 input 有值才觸發。
• 輸入注音符號時不會被觸發（因為還沒產生字），其他輸入法不確定。
• 連續按著按鍵，會連續觸發事件。
• 這時取 input 的值會是輸入前的值。

key/code

皆同 keydown

charCode

The Unicode reference number of the key

會得到跟 Unicode 對應的代碼，大小寫不同

keyCode (deprecated)

原本以為跟 keydown 一樣，但 keydown 不分大小寫，例如輸入 a 或 A 會得到 65，但 keypress 會區分大小寫，輸入 a 得到 65、A 會得到 97

keyup

The keyup event is fired when a key is released.

• 離開按鍵時觸發。
• 這時取 input 的值會是輸入完的值。

key/code/keyCode

皆同 keydown

總結

1. keydown 跟 keyup 可以說是一對的，keydown 是輸入前，keyup 是輸入完觸發。
2. 因為 keyup 是離開按鍵才觸發所以只會觸發一次

可以到 codepen 測試網址 玩玩看