首页技术文章正文

什么是键盘事件?键盘事件对象判断用户按键

更新时间:2022-03-17 来源:黑马程序员 浏览量:

什么是键盘事件

键盘事件是指用户在使用键盘时触发的事件。例如,用户按Esc键关闭打开的状态栏,按Enter键直接完成光标的上下切换等。下面列举几个常用的键盘事件,如表所示。

事件名称事件触发时机
keypress某个键盘按键被按下时触发。不识别功能键,如Ctrl、Shit、箭头等
keydown某个键盘按键被按下时触发
keyup某个键盘按键被松开时触发

需要注意的是,keypress事件保存的按键值是ASCⅡ码,keydown和keyup事件保存的按键值是虚拟键码,keydown和keypress如果按住不放的话,会重复触发该对应事件。keyup和keydown事件不区分字母大小写,而keypress区分字母大小写。

在发生keydown和keypress事件时,event事件对象的keycode属性会包含一个值,该值与键盘上的特定值对应。keycode的值与ASCⅡ码对应的值相同,例如,keycode值为13表示Enter键,keycode值为9表示Tab键。读者可参考MDN等手册进行查看,此处不再详细列举。

键盘事件对象判断用户按下了哪个键

键盘事件也有相应的键盘事件对象KeyBoardEvent,该对象是跟键盘事件相关的一系列信息的集合。根据键盘事件对象中的keyCode属性可以得到相应的ASCIⅡ码值,进而可以判断用户按下了哪个键。

为了让大家更好地理解键盘事件的使用,下面我们通过案例的形式进行展示。检测用户是否按下了s键,如果按下s键,就把光标定位到搜索框里面,示例代码如下:

<body>
  <input type="text">
  <script>
    var search = document.querySelector ('input');
    document.addEventListener('keyup', function (e)  {
      if  (e.keyCode === 83)  {
        search.focus();
      }
    });
  </script>
</body>

上述代码中,第5行代码绑定了鼠标弹起事件,当输入完毕后再进行检测。第6~8行代码使用键盘事件对象里面的keyCode判断用户按下的是否是s键,如果是,则让搜索框获取焦点,帮助用户进行输入。






猜你喜欢:

什么是事件?怎样调用事件处理程序?

DOM有多少事件级别?DOM事件级别

Watch机制的通知状态和事件类型

Javascript事件类型以及常用方法有哪些?

黑马程序员web前端开发培训

分享到:
在线咨询 我要报名
和我们在线交谈!