跳到主要内容位置

处理键盘事件

键盘事件是 Web 开发中常见的一种用户交互方式。当用户按下或释放键盘上的某个键时,浏览器会触发相应的键盘事件。本节将讨论如何使用 JavaScript 处理键盘事件,并介绍一些常用的技巧和最佳实践。

监听键盘事件

要监听键盘事件,可以使用 addEventListener() 方法将事件监听器附加到文档对象或特定元素上。以下是一些常见的键盘事件:

  • keydown:当用户按下键盘上的某个键时触发。
  • keyup:当用户释放键盘上的某个键时触发。
  • keypress:当用户按下并释放某个键时触发。与 keydownkeyup 不同,keypress 事件只在按下可打印字符键(例如字母、数字和符号)时触发。

下面是一个示例,它监听 keydown 事件并在控制台中打印被按下的键的 ASCII 码:

document.addEventListener('keydown', (event) => {
console.log(event.keyCode); // 回车为 13
});

在上面的示例中,我们使用 addEventListener() 方法将事件监听器附加到文档对象上,并在事件处理函数中获取 keyCode 属性来获取被按下的键的 ASCII 码。请注意,keyCode 属性已被标记为过时,推荐使用 keycode 属性代替,但是有些老的项目中,可能还会见到这种写法。

以下是上面示例的更新版本,使用 key 属性来获取被按下的键的值:

document.addEventListener('keydown', (event) => {
console.log(event.key); // 回车为 `Enter`
});

在上面的示例中,我们使用 key 属性来获取被按下的键的值。这是一个更好的选择,因为它提供了更多的信息,例如按下的是字母键还是数字键,以及 Shift、Ctrl、Alt 等修饰键是否同时按下。

避免事件冒泡和默认行为

在处理键盘事件时,需要注意阻止事件冒泡和默认行为,以确保事件的处理不会受到其他元素或浏览器的干扰。例如,当用户按下 Enter 键时,可能会触发表单提交事件或链接跳转事件,我们需要阻止这些默认行为,以便在事件处理函数中执行自己的逻辑。

以下是一个示例,它监听 keydown 事件并阻止 Enter 键的默认行为:

document.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
event.preventDefault(); // 阻止默认行为
// 处理 Enter 键的逻辑
}
});

在上面的示例中,我们首先检查被按下的键是否是 Enter 键,然后调用 preventDefault() 方法来阻止默认行为。这样可以确保在事件处理函数中执行我们自己的逻辑。

另外,如果您需要停止事件的传播,可以使用 stopPropagation() 方法。例如,以下是一个示例,它监听 keydown 事件并阻止事件冒泡:

document.addEventListener('keydown', (event) => {
event.stopPropagation(); // 停止事件冒泡
// 处理键盘事件的逻辑
});

在上面的示例中,我们调用 stopPropagation() 方法来停止事件的传播。这样可以确保事件只被当前元素处理,而不会继续传播到其他元素。

键盘事件的兼容性

在处理键盘事件时,需要注意浏览器的兼容性。不同的浏览器可能对键盘事件的处理方式略有不同,例如某些浏览器可能使用 keyCode 属性而不是 key 属性来表示被按下的键。为了确保代码在各种浏览器中都能正常工作,可以使用一些库或框架。

另外,需要注意的是,某些浏览器可能会禁用某些键盘事件,例如移动端浏览器可能会禁用键盘事件以提高性能。因此,在选择键盘事件作为用户交互方式时,需要考虑到这些因素,并提供备选方案以确保用户体验的良好性。

提示

一系列的课程让你成为高级前端工程师。课程覆盖工作中所有常用的知识点和背后的使用逻辑,示例全部都为工作项目简化而来,学完即可直接上手开发!

即使你已经是高级前端工程师,在课程里也可能会发现新的知识点和技巧,让你的工作更加轻松!

《React 完全指南》课程,连载中现只需 48 元(领取优惠券)点击查看详情。

《Vue 3.x 全家桶完全指南与实战》课程,包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解,让你完全胜任 Vue 前端开发的工作。点击查看详情。

《React即时通信UI实战》课程,利用 Storybook、Styled-components、React-Spring 打造属于自己的组件库。

《JavaScript 基础语法详解》本人所著图书,包含 JavaScript 全面的语法知识和新特性, 可在京东、当当、淘宝等各大电商购买