鼠标与键盘事件处理_常用KeyCode整理

答案：前端开发中，键盘事件（如keydown、keyup）和鼠标事件（如click、wheel）是实现用户交互的基础。常用按键的keyCode包括Enter(13)、Esc(27)、方向键(37-40)等，但现代开发推荐使用event.key或event.code以提升兼容性与语义性；通过监听keydown可实现快捷键功能，如Ctrl+S保存；鼠标事件涵盖单击、双击、移动及滚轮操作，可通过event.button判断按键类型，并用preventDefault()阻止右键默认菜单，wheel事件支持 deltaY 判断滚动方向。

在前端开发中，鼠标和键盘事件是用户交互的核心部分。正确处理这些事件，并识别对应的按键码（KeyCode），有助于实现快捷键、表单验证、游戏控制等常见功能。以下是常用键盘事件的 KeyCode 整理及鼠标事件的基本处理方式，便于快速查阅与应用。

键盘事件与常用 KeyCode

键盘事件主要包括 keydown、keyup 和 keypress。其中，keydown 和 keyup 可捕获所有按键，而 keypress 主要用于字符输入。

通过 event.keyCode 或更推荐的 event.key / event.code 来获取按键信息。以下是一些常用按键的 KeyCode 对照：

• Enter 回车键 - keyCode: 13, key: "Enter"
• Esc 退出键 - keyCode: 27, key: "Escape"
• Tab 制表键 - keyCode: 9, key: "Tab"
• Backspace 删除键 - keyCode: 8, key: "Backspace"
• 空格键 - keyCode: 32, key: " "
• 方向键 - 上: 38 ("ArrowUp"), 下: 40 ("ArrowDown"), 左: 37 ("ArrowLeft"), 右: 39 ("ArrowRight")
• Ctrl 键 - keyCode: 17, key: "Control"
• Alt 键 - keyCode: 18, key: "Alt"
• Shift 键 - keyCode: 16, key: "Shift"
• Caps Lock 大写锁定 - keyCode: 20, key: "CapsLock"
• F1-F12 功能键 - F1: 112, F2: 113, ..., F12: 123
• 数字键（主键盘） - 0: 48, 1: 49, ..., 9: 57
• 字母键 - A: 65, B: 66, ..., Z: 90
• 小键盘数字 - 小键盘0: 96, ..., 小键盘9: 105
• 加减乘除（小键盘） - +: 107, -: 109, *: 106, /: 111

注意：keyCode 已被现代浏览器标记为废弃，建议使用 event.key 或 event.code 进行判断，更具语义性和兼容性。

键盘事件监听示例

监听 Enter 键提交表单：

document.addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    console.log('执行提交操作');
  }
});

监听 Ctrl + S 快捷保存：

钉钉 AI 助理

钉钉AI助理汇集了钉钉AI产品能力，帮助企业迈入智能新时代。

21

查看详情

document.addEventListener('keydown', function(event) {
  if (event.key === 's' && event.ctrlKey) {
    event.preventDefault(); // 阻止默认保存对话框
    console.log('自定义保存逻辑');
  }
});

鼠标事件常用类型

常见的鼠标事件包括：

• click - 单击（按下并释放）
• dblclick - 双击
• mousedown - 按下鼠标按钮
• mouseup - 释放鼠标按钮
• mousemove - 鼠标移动
• mouseenter - 鼠标进入元素（不冒泡）
• mouseleave - 鼠标离开元素（不冒泡）
• mouseover - 鼠标悬停（会冒泡）
• mouseout - 鼠标移出（会冒泡）
• wheel - 鼠标滚轮滚动

获取鼠标点击的按钮：

• event.button === 0 - 主按钮（通常是左键）
• event.button === 1 - 中间按钮（滚轮）
• event.button === 2 - 右键

鼠标事件监听示例

监听右键菜单并阻止默认行为：

element.addEventListener('contextmenu', function(event) {
  event.preventDefault();
  console.log('右键点击，显示自定义菜单');
});

监听滚轮事件：

element.addEventListener('wheel', function(event) {
  if (event.deltaY < 0) {
    console.log('向上滚动');
  } else {
    console.log('向下滚动');
  }
});

基本上就这些。掌握常用 KeyCode 和鼠标事件类型，能大幅提升交互体验的实现效率。关键是用对事件类型，优先使用现代属性如 key 和 code，避免依赖已废弃的 keyCode。

以上就是鼠标与键盘事件处理_常用KeyCode整理的详细内容，更多请关注php中文网其它相关文章！