(94)Wangdao.com_第二十七天_鍵盤事件

鍵盤事件

鍵盤事件由用戶擊打鍵盤觸發

• 主要有 keydown、keyup 、keypress三個事件，它們都繼承了 KeyboardEvent 接口。
• keydown         按下鍵時 觸發
• keyup        鬆開鍵時 觸發
• keypress        按下有值的鍵時 觸發

即按下 Ctrl、Alt、Shift、Meta 這樣無值的鍵，這個事件不會觸發。

對於有值的鍵，按下時先觸發 keydown 事件，再觸發這個事件。

• 若是用戶按下 不放時，就會連續觸發鍵盤事件

• keydown
  keypress
  keydown
  keypress
  ...（重複以上過程）
  終於鬆開了 keyup

• KeyboardEvent 接口

描述用戶與鍵盤的互動。

這個接口繼承了 Event 接口，而且定義了本身的實例屬性和實例方法

• 瀏覽器原生提供 KeyboardEvent 構造函數

用來新建鍵盤事件的實例

• var keyEvent = new KeyboardEvent(type, options)
  

第一個參數是字符串，表示事件類型；

第二個參數是一個事件配置對象，該參數可選。

除了 Event 接口提供的屬性，還能夠配置如下字段，它們都是可選的

• key       字符串            當前按下的鍵，默認爲空字符串。
  code      字符串            表示當前按下的鍵的字符串形式，默認爲空字符串。
  location       整數            當前按下的鍵的位置，默認爲0。
  ctrlKey       布爾值            是否按下 Ctrl 鍵，默認爲false。
  shiftKey       布爾值            是否按下 Shift 鍵，默認爲false。
  altKey       布爾值            是否按下 Alt 鍵，默認爲false。
  metaKey       布爾值            是否按下 Meta 鍵，默認爲false。
  repeat       布爾值            是否重複按鍵，默認爲false

• KeyboardEvent 的實例屬性

event.altKey        是否按下 Alt 鍵
event.ctrlKey        是否按下 Ctrl 鍵
event.metaKey        是否按下 meta 鍵（Mac 系統是一個四瓣的小花，Windows 系統是 windows 鍵）
event.shiftKey        是否按下 Shift 鍵

• function showChar(e) {
      console.log('ALT: ' + e.altKey);
      console.log('CTRL: ' + e.ctrlKey);
      console.log('Meta: ' + e.metaKey);
      console.log('Meta: ' + e.shiftKey);
  };
  
  document.body.addEventListener('keydown', showChar, false);

event.code        返回一個字符串

表示當前按下的鍵的字符串形式。

該屬性只讀。

下面是一些經常使用鍵的字符串形式，其餘鍵請查文檔

• 數字鍵0 - 9        返回 digital0 - digital9
  字母鍵A - z        返回 KeyA - KeyZ
  功能鍵F1 - F12        返回 F1 - F12
  方向鍵         返回 ArrowDown、ArrowUp、ArrowLeft、ArrowRight
  Alt 鍵        返回 AltLeft 或 AltRight
  Shift 鍵        返回 ShiftLeft 或 ShiftRight
  Ctrl 鍵        返回 ControLeft 或 ControlRight

event.key        返回一個字符串

表示按下的鍵名。

該屬性只讀。

若是按下的鍵表明可打印字符，則返回這個字符，好比數字、字母

若是按下的鍵表明不可打印的特殊字符，則返回預約義的鍵值，

好比 Backspace，Tab，Enter，Shift，Control，Alt，CapsLock，

Esc，Spacebar，PageUp，PageDown，End，Home，Left，

Right，Up，Down，PrintScreen，Insert，Del，Win，F1～F12，

NumLock，Scroll 等

若是同時按下一個 控制鍵 和一個 符號鍵 ，則返回符號鍵的鍵名。好比，按下 Ctrl + a，則返回a；按下 Shift + a，則返回大寫的 A

若是沒法識別鍵名，返回字符串 "Unidentified"

event.location        返回一個整數，

表示按下的鍵處在鍵盤的哪個區域。

• 0            鍵盤的主區域，或者沒法判斷處於哪個區域。
  1            鍵盤的左側，只適用那些有兩個位置的鍵（好比 Ctrl 和 Shift 鍵）。
  2            鍵盤的右側，只適用那些有兩個位置的鍵（好比 Ctrl 和 Shift 鍵）。
  3            數字小鍵盤。

event.repeat        返回一個布爾值

表明該鍵是否被按着不放，以便判斷是否重複這個鍵

即瀏覽器會持續觸發 keydown 和 keypress 事件，直到用戶鬆開手爲止

• event.getModifierState()        返回一個布爾值

表示是否按下或激活指定的功能鍵

 

• Alt            Alt 鍵

  CapsLock            大寫鎖定鍵
  Control            Ctrl 鍵
  Meta            Meta 鍵
  NumLock            數字鍵盤開關鍵
  Shift            Shift 鍵

• if (    event.getModifierState('Control') +
          event.getModifierState('Alt') +
          event.getModifierState('Meta') > 1){    //只要Control、Alt、Meta裏面，同時按下任意兩個或兩個以上的鍵就返回
      return;
  }