jQuery event.which 属性（超详细）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在 JavaScript 开发中，事件处理是构建交互性功能的核心环节。当用户与网页中的元素（如按钮、输入框、链接）发生交互时，浏览器会触发相应的事件对象（Event Object）。而 jQuery event.which 属性，就像一位“翻译官”，能够将不同设备、不同浏览器下的事件触发行为统一为可读的代码值。对于初学者而言，理解这一属性不仅是掌握事件处理的关键，更是构建响应式网页的必经之路。

本文将从基础概念、核心功能、实际案例、与其他属性的对比等角度，逐步解析 event.which 的作用原理，并结合代码示例说明其应用场景。

一、事件处理的基础：事件对象与键盘/鼠标交互

在深入 event.which 之前，我们需要先了解事件对象（Event Object）的基本概念。
事件对象是浏览器在触发事件时自动生成的一个对象，它包含了事件的详细信息，例如触发事件的类型、触发源元素、触发时的坐标、按键状态等。开发者通过访问事件对象的属性和方法，可以获取这些信息并执行相应的逻辑。

1.1 事件触发的常见场景

• 键盘事件：用户按下或释放键盘上的按键（如回车键、方向键）。
• 鼠标事件：用户单击、双击或移动鼠标指针。
• 表单事件：用户提交表单或修改输入内容。

1.2 event.which 的核心作用

在 jQuery 中，event.which 属性用于返回事件触发时的“原始值”。例如：

• 当用户按下键盘上的某个键时，event.which 返回对应的 Unicode 编码值。
• 当用户单击鼠标时，event.which 返回表示按钮的数字（如 1 表示左键，3 表示右键）。

这一属性的设计，旨在解决浏览器间对事件值的编码差异。例如，原生 JavaScript 的 event.keyCode 和 event.charCode 在不同浏览器中可能返回不同的值，而 event.which 通过 jQuery 的封装，统一了这些差异，使得代码更具兼容性。

二、event.which 的使用场景与代码示例

2.1 场景 1：检测键盘按键

示例：通过回车键提交表单

$(document).ready(function() {  
  $("#search-input").on("keypress", function(event) {  
    if (event.which === 13) { // 13 是回车键的 Unicode 值  
      alert("检测到回车键！");  
      // 这里可以添加表单提交逻辑  
    }  
  });  
});  

解释：

• 当用户在输入框中按下回车键时，event.which 返回 13，触发提交操作。
• 这一功能常用于搜索框或快速提交场景，提升用户体验。

2.2 场景 2：区分鼠标按钮

示例：区分左键、右键和中间键的点击

$("#click-area").on("click", function(event) {  
  switch (event.which) {  
    case 1:  
      console.log("左键点击");  
      break;  
    case 2:  
      console.log("中间键（滚轮）点击");  
      break;  
    case 3:  
      console.log("右键点击");  
      break;  
    default:  
      console.log("其他按钮");  
  }  
});  

关键值说明：

• 1：鼠标左键
• 2：鼠标中间键（滚轮）
• 3：鼠标右键

2.3 场景 3：限制输入内容

示例：禁止输入非数字字符

$("#numeric-input").on("keydown", function(event) {  
  // 允许退格键（8）、删除键（46）和导航键（如 37-40）  
  if (  
    event.which === 8 ||  
    event.which === 46 ||  
    (event.which >= 37 && event.which <= 40)  
  ) {  
    return true;  
  }  
  // 检查是否为数字键  
  if (event.which < 48 || event.which > 57) {  
    event.preventDefault(); // 阻止非数字输入  
  }  
});  

解释：

• 通过 event.which 过滤非数字按键，确保输入框仅接收数字。
• 这一逻辑常用于表单验证或金融类应用的输入限制。

三、event.which 与其他属性的对比

3.1 与原生 JavaScript 的 event.keyCode 对比

在原生 JavaScript 中，event.keyCode 是获取按键代码的常用属性，但其存在以下问题：

• 浏览器兼容性：某些浏览器（如旧版 Firefox）对按键的编码方式不同。例如，箭头键的 keyCode 在部分浏览器中可能返回 37-40，而在其他浏览器中可能返回其他值。
• 无法处理字符键：对于输入字符（如字母、符号），keyCode 的值可能与实际字符不符，此时需结合 event.charCode。

而 jQuery 的 event.which 通过封装，自动处理了这些差异：

// 原生 JavaScript  
if (event.keyCode === 13) { ... }  

// jQuery  
if (event.which === 13) { ... }  

3.2 与 event.key 的对比

现代浏览器引入了 event.key 属性，它返回按键的可读字符串（如 "Enter"、"ArrowUp"）。相比之下：

• event.which 返回数字值，适合需要精确数值判断的场景。
• event.key 返回字符串，更直观但可能因浏览器或语言环境而略有差异。

示例：使用 event.key 实现相同功能

$("#search-input").on("keypress", function(event) {  
  if (event.key === "Enter") {  
    alert("检测到回车键！");  
  }  
});  

选择建议：

• 若需兼容旧版浏览器或需要数值判断（如遍历按键范围），优先使用 event.which。
• 若追求代码可读性且无需兼容性支持，可尝试 event.key。

四、深入理解：event.which 的底层实现与兼容性

4.1 为何需要 event.which？

在 jQuery 出现之前，开发者需针对不同浏览器手动处理事件值的差异：

// 原生代码的兼容性处理  
var key = event.keyCode ? event.keyCode : event.which;  

而 jQuery 通过统一接口简化了这一过程，开发者只需调用 event.which 即可。

4.2 兼容性注意事项

• jQuery 版本：确保使用 jQuery 1.7+ 或更高版本，以获得最佳兼容性。
• 事件类型：event.which 主要用于键盘事件和鼠标事件，对于其他事件（如触摸事件）需结合其他属性处理。

五、常见问题与最佳实践

5.1 问题 1：event.which 在移动端是否有效？

回答：

• 在移动端浏览器中，event.which 可用于检测触摸屏上的虚拟键盘输入，但部分物理按键（如返回键）可能不受支持。
• 对于触摸事件（如 touchstart），建议改用 event.touches 或其他专用属性。

5.2 问题 2：如何区分大写字母与小写字母？

回答：
event.which 返回的是按键的 Unicode 值，不区分大小写（例如，字母“A”和“a”的 which 值均为 65）。若需区分大小写，可通过 event.shiftKey 或 event.key 的组合判断：

if (event.key === "a" && !event.shiftKey) {  
  console.log("小写 a");  
}  

5.3 最佳实践

1. 优先使用事件委托：
   将事件监听器绑定到父元素，减少内存消耗。例如：

   $(document).on("click", ".dynamic-button", function(event) { ... });  
   

2. 结合 preventDefault() 控制行为：
   在需要阻止默认行为时（如表单提交或链接跳转），通过 event.preventDefault() 与 event.which 联合使用。
3. 测试与调试：
   在控制台输出 event.which 的值，确认其是否符合预期。例如：

   console.log("按键代码：", event.which);  
   

六、总结与展望

通过本文，我们深入探讨了 jQuery event.which 属性的核心功能、应用场景及实现原理。这一属性不仅是处理键盘和鼠标事件的“瑞士军刀”，更是 jQuery 设计哲学（简化复杂性、统一兼容性）的体现。

对于开发者而言，掌握 event.which 能显著提升事件处理的效率和代码的可维护性。随着现代浏览器对原生事件 API 的支持日益完善（如 event.key 的普及），开发者可根据项目需求灵活选择工具，但 event.which 仍然在兼容性要求较高的场景中占据重要地位。

未来，随着 Web 标准的演进，事件处理的工具与方法可能进一步简化，但理解底层逻辑始终是应对变化的基础。希望本文能为你的开发之路提供一份清晰的指南！