(94)Wangdao.com_第二十七天_键盘事件

Posted 2021-01-26 tianxiaxuange

键盘事件

键盘事件由用户击打键盘触发

• 主要有 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;
  }