事件類型-鍵盤事件

類型

鍵盤事件用來描述鍵盤行為，主要有keydown、keypress、keyup三個事件

keydown   當用戶按下鍵盤上的任意鍵時觸發，如果按住不放的話，會重復觸發該事件
keyup     當用戶釋放鍵盤上任意鍵時觸發
keypress  當用戶按下鍵盤上的字符鍵時觸發，按下功能鍵時不觸發。如果按住不放的話，會重復觸發該事件

注意：

1. 鍵盤事件必須綁定在可以獲得焦點的元素上，頁面剛加載完成時，焦點處於document元素。
2. 系統為了防止按鍵誤被連續按下，第一次觸發keydown事件后，會有500ms的延遲，才會觸發第二次keydown事件。keypress事件也存在500ms的時間間隔
3. 被系統占用的按鍵不會觸發鍵盤事件，比如亮度調節、音量調節，另外如果瀏覽器安裝了“快捷鍵”相關的插件，自定義的鍵盤事件也會被覆蓋掉

順序

如果用戶一直按鍵不松開，就會連續觸發鍵盤事件，順序如下

keydown
keypress
keydown
keypress
...
keyup

按鍵信息

鍵盤事件包括keyCode、key、char、keyIdentifier和修改鍵共5個按鍵信息

keyCode

觸發鍵盤事件時，事件對象的keyCode屬性會包含一個代碼

document.onkeydown = function(e) {
  console.log(e.keyCode)
}

具體鍵值可移步於此

key

觸發鍵盤事件時，key屬性會包含一個字符串。如果按下的是字符鍵，key值就是相應的文本字符；如果不是字符鍵，key值就是相應的鍵名

document.onkeydown = function(e) {
  console.log(e.key)
}

修改鍵

修改鍵指的是Shift、Ctrl、Alt和Meta(Meta在Windows鍵盤中是windows鍵，在蘋果機中是command鍵)。DOM規定了4個屬性，表示這些修改鍵的狀態：shiftKey、ctrlKey、altKey和metaKey。這些屬性中包含的都是布爾值，如果相應的鍵被按下了，則值為true；否則值為false

document.onkeyup = function(e) {
  if(e.shiftKey){console.log('shiftKey')}
  if(e.ctrlKey){console.log('ctrlKey')}
  if(e.altKey){console.log('altKey')}
  if(e.metaKey){console.log('metaKey')}
}