当前位置：首页 > 文章列表 > 文章 > 前端 > 鼠标键盘事件处理及常用KeyCode汇总

鼠标键盘事件处理及常用KeyCode汇总

2026-03-03 22:16:35 0浏览收藏

本文深入解析了前端开发中鼠标与键盘事件的核心处理技巧，涵盖从基础事件类型（如keydown、click、wheel）到现代推荐用法（优先使用event.key/event.code替代已废弃的keyCode），并系统整理了Enter、Esc、方向键、功能键等高频按键的对应码值及快捷键实现方案（如Ctrl+S保存），同时详解了鼠标按钮识别、右键菜单拦截、滚轮方向判断等实用场景，帮助开发者高效构建响应灵敏、兼容性强的用户交互体验。

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

在前端开发中，鼠标和键盘事件是用户交互的核心部分。正确处理这些事件，并识别对应的按键码（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 基本上就这些。掌握常用 KeyCode 和鼠标事件类型，能大幅提升交互体验的实现效率。关键是用对事件类型，优先使用现代属性如 key 和 code，避免依赖已废弃的 keyCode。
以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。