在Web前端开发中，鼠标与键盘事件是最基础也最常用的交互入口。理解事件对象里各个属性的含义，尤其是键盘事件中的KeyCode以及鼠标事件中的按键标识，是写出稳定交互逻辑的前提。很多初学者会把KeyCode和字符编码混淆，实际上它对应的是物理按键的位置编号，而不是输入出来的字符。
键盘事件与KeyCode基础
键盘事件主要包括keydown、keypress和keyup。其中keydown和keyup会提供keyCode属性，用来表示被按下的那个键在键盘上的编码。需要注意的是，keypress更偏向字符输入，一些浏览器中它的keyCode等同于字符的ASCII码，但在现代开发中建议统一使用key属性或者code属性来替代旧的keyCode，不过由于历史代码众多，整理常用KeyCode依然有现实意义。
下面是一段简单的键盘事件监听示例，演示如何读取keyCode并做判断。这里我们将特殊字符做了转义，保证代码可以正确放置在HTML文档中。
document.addEventListener('keydown', function(event) {
// 输出按键的 keyCode 到控制台
console.log('keyCode is: ' + event.keyCode);
// 常见按键判断
if (event.keyCode === 13) {
console.log('用户按下了回车键');
} else if (event.keyCode === 27) {
console.log('用户按下了 ESC 键');
}
});
从底层来看，KeyCode来源于系统向浏览器传递的扫描码映射，不同操作系统和浏览器在某些组合键、小键盘键上会有差异。因此如果只依赖keyCode，在跨平台时可能得到意外结果。这也是为什么新标准引入了event.code（如ArrowLeft、KeyA）来表述物理键，而event.key表述实际字符。
常用KeyCode整理
尽管有兼容顾虑，但在维护老项目或快速实现功能时，记住一部分高频KeyCode能提升效率。下面以表格形式列出最常用的一些按键编码，方便查阅。
| 按键名称 | KeyCode | 说明 |
|---|---|---|
| 回车键 Enter | 13 | 表单提交、确认操作 |
| ESC 键 | 27 | 取消、关闭弹层 |
| 空格键 Space | 32 | 页面滚动、勾选 |
| 左方向键 | 37 | 光标或角色左移 |
| 上方向键 | 38 | 光标或角色上移 |
| 右方向键 | 39 | 光标或角色右移 |
| 下方向键 | 40 | 光标或角色下移 |
| 退格键 Backspace | 8 | 删除、返回 |
| Tab 键 | 9 | 焦点切换 |
除了上述按键，字母键A到Z对应的KeyCode是65到90，数字键0到9在键盘主区域对应的是48到57。这些连续编码让批量判断变得容易，例如判断输入是否为字母，只需看keyCode是否在65到90之间。
鼠标事件的处理方式
鼠标事件如click、mousedown、mouseup、mousemove等，并不使用KeyCode来识别按键，而是通过event.button属性。这是一个常见误区：不少新手试图在鼠标事件里读取keyCode，结果始终得到undefined。button属性的取值一般为0、1、2，分别代表左键、中键（滚轮按下）和右键。
以下代码展示了如何在mousedown事件中区分鼠标按键。注意代码中的比较使用了button而不是keyCode。
element.addEventListener('mousedown', function(event) {
// 鼠标按键标识，不是 KeyCode
if (event.button === 0) {
console.log('按下了鼠标左键');
} else if (event.button === 2) {
console.log('按下了鼠标右键');
} else if (event.button === 1) {
console.log('按下了鼠标中键');
}
});
在右键操作时，浏览器默认会弹出上下文菜单，如果希望自定义菜单，需要监听contextmenu事件并调用event.preventDefault()阻止默认行为。鼠标事件还包含clientX、clientY等坐标属性，用来定位光标位置，这些和键盘的KeyCode属于完全不同的体系。
鼠标与键盘组合的注意事项
在实作快捷键功能时，经常需要同时判断键盘按键和鼠标状态。例如按住Ctrl加鼠标点击实现多选，此时要通过event.ctrlKey、event.shiftKey等修饰键布尔属性配合keyCode或button来判断，而不是试图从某一个属性里拿到全部信息。
下面示例展示如何判断Ctrl加左键点击：
element.addEventListener('click', function(event) {
if (event.ctrlKey && event.button === 0) {
console.log('触发了 Ctrl + 左键点击');
}
});
这种组合判断方式比单纯记忆KeyCode更可靠，也更符合现代浏览器规范。在书写代码时，建议对event对象上的属性保持清晰认知：键盘相关用key、code或老式的keyCode，鼠标相关用button和坐标，修饰键用ctrlKey、altKey、shiftKey、metaKey。
实践中的兼容与替代方案
虽然整理KeyCode对理解旧系统有帮助，但新项目应优先使用标准属性。以键盘事件为例，event.code不会因为输入法或Shift状态改变，而event.key会返回实际字符，比如Shift加a时key是A，但code始终是KeyA。这样在绑定游戏控制或编辑器快捷键时更加稳定。
如果必须支持老版本IE等环境，可以写一段兼容层，将keyCode映射到语义化名称，降低业务代码耦合度。
function getKeyName(event) {
// 优先使用标准属性
if (event.code) {
return event.code;
}
// 回退到 keyCode 映射
var map = {
13: 'Enter',
27: 'Escape',
32: 'Space',
37: 'ArrowLeft',
38: 'ArrowUp',
39: 'ArrowRight',
40: 'ArrowDown'
};
return map[event.keyCode] || 'Unknown';
}
通过这种封装，业务层无需关心底层是KeyCode还是code，只调用getKeyName即可。鼠标事件同理，可以在工具函数里统一返回left、right、middle等语义字符串。这样既能保留对KeyCode知识的运用，又不被其兼容性短板拖累。
总体而言，鼠标与键盘事件处理的核心在于分清不同事件对象的属性职责。KeyCode作为历史遗留标识仍值得整理记忆，但工程中应以标准属性为主，辅以兼容封装，才能写出健壮的前端交互代码。
mouse_eventkeyboard_eventKeyCode修改时间：2026-08-01 17:48:33