什么是 which 事件属性？初学者必须掌握的 DOM 事件知识
在前端开发中，我们常常需要监听用户的操作行为，比如点击按钮、按下键盘、拖拽元素等等。这些操作都会触发对应的“事件”。而当事件发生时，浏览器会提供一个事件对象（event object），这个对象里包含大量有用的信息，帮助我们判断发生了什么。
其中，which 事件属性就是这样一个关键字段。它主要用于判断用户在触发事件时，按下了哪一个按键或鼠标按钮。对于初学者来说，理解 which 属性的含义和用法，是掌握事件处理逻辑的重要一步。
想象一下你正在写一个游戏脚本，用户通过键盘控制角色移动。你得知道到底是按了“W”键、还是“空格”键，甚至是不是按下了鼠标左键。这时候，which 就像一个“身份识别器”，告诉你“到底是谁在操作”。
为什么需要 which 事件属性？
在实际开发中，我们经常遇到这样的场景：一个输入框同时支持键盘输入和鼠标点击操作。比如一个搜索框，既可以通过键盘敲字，也可以点击旁边的“搜索”按钮。如果我们要区分是键盘输入还是鼠标点击，就需要依赖事件对象中的 which 属性。
再比如，一个画板应用中，用户可能用鼠标左键画线，右键擦除，滚轮缩放。这些不同的操作对应不同的鼠标按钮。这时，which 属性就能帮我们准确识别“是哪个按钮被按下了”。
which 属性的值是一个数字，代表当前事件对应的按键或鼠标按钮编号。它在不同事件中含义略有不同，但核心思想一致：告诉你“哪个键/按钮”被触发了。
which 事件属性在键盘事件中的应用
在 keydown、keyup 和 keypress 事件中，which 属性返回的是按键的 键盘码（keyCode），也就是该按键在键盘上的唯一编号。
例如，A 键的 which 值是 65，Enter 键是 13，Space 键是 32。
<input type="text" id="inputField" placeholder="请输入内容">
<div id="log"></div>
const inputField = document.getElementById('inputField');
const log = document.getElementById('log');
inputField.addEventListener('keydown', function(event) {
// 输出按键的 which 值和对应字符
log.innerHTML += `按键码：${event.which}，字符：${String.fromCharCode(event.which)}<br>`;
});
代码注释说明：
event.which获取按键的键盘码。String.fromCharCode(event.which)将数字转换为对应的字符，比如 65 转成 'A'。- 每次按键都会在 log 区域显示一条记录，便于观察。
这个例子非常实用。你可以在浏览器中打开，输入任意字符，就会看到对应的 which 值和字符。比如按下 A 键，输出是 按键码：65，字符：A。
小贴士：
which属性在现代浏览器中已经被key属性取代，但为了兼容老项目，仍需了解它。在新项目中建议优先使用event.key。
which 事件属性在鼠标事件中的应用
在鼠标事件（如 mousedown、mouseup、click）中，which 属性表示点击的鼠标按钮编号：
1：鼠标左键2：鼠标中键（滚轮）3：鼠标右键
这个属性在实现右键菜单、拖拽功能、快捷操作时非常有用。
<div id="mouseArea" style="width: 200px; height: 100px; background: #f0f0f0; border: 1px solid #ccc; text-align: center; line-height: 100px;">
点击这里测试鼠标按钮
</div>
<div id="mouseLog"></div>
const mouseArea = document.getElementById('mouseArea');
const mouseLog = document.getElementById('mouseLog');
mouseArea.addEventListener('mousedown', function(event) {
// 判断是哪个鼠标按钮被按下
if (event.which === 1) {
mouseLog.innerHTML += '左键被按下<br>';
} else if (event.which === 2) {
mouseLog.innerHTML += '中键被按下<br>';
} else if (event.which === 3) {
mouseLog.innerHTML += '右键被按下<br>';
}
});
代码注释说明：
event.which用于判断鼠标按钮。- 通过
if-else判断不同的按钮值，执行不同逻辑。- 每次点击都会在 log 区域输出提示信息。
这个例子可以帮你直观地理解 which 在鼠标事件中的作用。右键点击时，输出“右键被按下”，方便调试。
为什么推荐使用 which 而不是 event.button？
虽然 event.button 也能获取鼠标按钮信息，但它的值与 which 不同，且兼容性不如 which 稳定。
| 属性 | 值含义 | 兼容性 |
|---|---|---|
which |
1=左键, 2=中键, 3=右键 | 良好 |
button |
0=左键, 1=中键, 2=右键 | 一般 |
在实际项目中，which 更容易理解，也更符合“哪个按钮”的直觉表达。
此外，which 对键盘事件的支持也更全面。例如，在 keypress 事件中，which 会返回字符码，而 button 不存在于键盘事件中。
所以，在跨平台、跨事件类型处理中，which 是更统一、更可靠的方案。
实际项目中的综合应用案例
下面我们来做一个完整的示例：一个简易的“快捷键控制面板”。
<div id="controlPanel" style="padding: 20px; background: #e9e9e9; border: 1px solid #ddd; margin: 10px;">
<p>按下 Ctrl + S 保存</p>
<p>按下 Esc 退出</p>
<p>右键点击清除记录</p>
<div id="status"></div>
</div>
const controlPanel = document.getElementById('controlPanel');
const status = document.getElementById('status');
// 监听键盘事件
document.addEventListener('keydown', function(event) {
// 判断是否按下了 Ctrl + S
if (event.ctrlKey && event.which === 83) { // S 的 which 值是 83
status.innerHTML = '✅ 保存成功！';
setTimeout(() => { status.innerHTML = ''; }, 2000);
}
// 判断是否按下了 Esc
else if (event.which === 27) {
status.innerHTML = '🚪 退出中...';
setTimeout(() => { status.innerHTML = ''; }, 2000);
}
});
// 监听鼠标事件
controlPanel.addEventListener('mousedown', function(event) {
// 右键点击清除状态
if (event.which === 3) {
status.innerHTML = '🧹 记录已清除';
setTimeout(() => { status.innerHTML = ''; }, 2000);
}
});
代码注释说明：
event.ctrlKey用于判断是否按下了 Ctrl 键，配合which判断组合键。event.which === 83判断是否按下了 S 键。event.which === 27是 Esc 键的编码。- 右键点击触发清除操作，是
which在鼠标事件中的典型应用。
这个例子展示了 which 事件属性在多个场景下的实用价值：键盘组合键识别、单键判断、鼠标右键操作。它让事件处理逻辑更加清晰、可控。
总结：掌握 which 事件属性，让事件处理更精准
which 事件属性虽然看似简单，却是前端事件处理中不可或缺的一环。它帮助我们精准识别用户操作的来源——是哪个按键被按了？是左键、中键还是右键？
对于初学者来说，理解 which 的作用，能让你在编写交互逻辑时少走弯路。比如，你不再需要靠“试错”来判断用户按了哪个键，而是可以通过 which 值快速定位。
对于中级开发者，掌握 which 能让你在处理复杂交互（如快捷键、右键菜单、游戏控制）时更加得心应手。
记住，which 不仅是一个数值，它是一把“钥匙”，能帮你打开用户行为的“黑箱”。无论是键盘输入还是鼠标点击，它都能告诉你“谁在操作”。
在今后的开发中，遇到需要区分按键或按钮的场景，不妨先看看 event.which 的值。它可能就是你解决问题的关键。
通过本文的讲解，相信你已经掌握了
which事件属性的核心用法。从现在开始，让每个事件都“有据可依”，让交互逻辑更清晰、更可靠。