答案：前端开发中，键盘事件（如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 快捷保存：
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。
