【前端入门】常见的键盘事件及接口细讲～

Cammmi在努力
360 阅读2分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第21天，点击查看活动详情

键盘事件

键盘事件由用户击打键盘触发，主要有keydown、keypress、keyup三个事件，它们都继承了KeyboardEvent接口

  • keydown：按下键盘时触发。
  • keypress：按下有值的键时触发，即按下 Ctrl、Alt、Shift、Meta 这样无值的键，这个事件不会触发。对于有值的键，按下时先触发keydown事件，再触发这个事件
  • keyup：松开键盘时触发该事件

特别地：如果用户一直按键不松开，就会连续触发键盘事件，触发的顺序如下

  1. keydown
  2. keypress
  3. keydown
  4. keypress
  5. （重复以上过程）
  6. keyup

KeyboardEvent 接口

KeyboardEvent接口用来描述用户与键盘的互动

KeyboardEvent构造函数接受两个参数。 第一个参数是字符串，表示事件类型 第二个参数是一个事件配置对象，该参数可选。除了Event接口提供的属性

当然，Event接口提供的属性，还可以配置以下字段，都是可选的～

  • key：字符串，当前按下的键，默认为空字符串
  • code：字符串，表示当前按下的键的字符串形式，默认为空字符串
  • location：整数，当前按下的键的位置，默认为0
  • ctrlKey：布尔值，是否按下 Ctrl 键，默认为false
  • shiftKey：布尔值，是否按下 Shift 键，默认为false。
  • altKey：布尔值，是否按下 Alt 键，默认为false
  • metaKey：布尔值，是否按下 Meta 键，默认为false
  • repeat：布尔值，是否重复按键，默认为false

KeyboardEvent 实例属性

只读属性，以下都会返回一个布尔值：

  • KeyboardEvent.altKey：是否按下 Alt 键
  • KeyboardEvent.ctrlKey：是否按下 Ctrl 键
  • KeyboardEvent.metaKey：是否按下 meta 键（Mac 系统是command，Windows 系统是 windows 键）
  • KeyboardEvent.shiftKey：是否按下 Shift 键

例如这样操作～

function showChar(e) {
  console.log('ALT: ' + e.altKey);
  console.log('CTRL: ' + e.ctrlKey);
  console.log('Meta: ' + e.metaKey);
  console.log('Shift: ' + e.shiftKey);
}

document.body.addEventListener('keydown', showChar, false);

写在最后

以上习题&笔记从大佬们的论坛学习而来，特感谢大佬们的知识分享～ （学习技术知识，果然要看大佬们的技术博客，大家有好的推荐也欢迎指引我这个小白哈，感恩！）

附上学习链接，感谢这些大佬出题和解答：wangdoc.com/javascript/…

avatar
文章
阅读
粉丝