在JavaScript中，通过键名（也就是用户按下的键的名称）来获取对应的键盘keyCode是一个常见需求，主要用于键盘事件处理。获取keyCode的方式包括监听键盘事件、使用event.key属性、和查找对应的keyCode映射表。其中，监听键盘事件是最直接的方法。当用户按下一个键时，浏览器会触发一个键盘事件（如keydown、keyup），这个事件对象中就包含了相关的键盘操作信息，其中event.keyCode（现已被废弃，推荐使用event.code或event.key）属性即是我们所要获取的keyCode。
一、监听键盘事件
为了通过键名获取键盘的keyCode，首先需要监听键盘事件。在Javascript中，可以通过添加事件监听器来实现。这里以keydown事件为例，当用户按下任何键时，都会触发此事件。
document.addEventListener('keydown', function(event) {
console.log("按下的键的名称: " + event.key);
console.log("按下的键的KeyCode: " + event.keyCode); // 不推荐使用
console.log("推荐使用event.code: " + event.code);
});
这段代码会监听整个文档的keydown事件。每当有键被按下时，都会打印出当前按键的名称（event.key）、不推荐使用的keyCode（event.keyCode）和推荐使用的event.code。event.key提供了按键的可读名称，而event.code提供了一个更为稳定且标准化的按键编码，更适合用于识别特定的物理按键。
二、使用EVENT.KEY属性
event.key属性返回的是按键的名称，对于大部分需要通过键名获得keyCode的情况，直接使用event.key足以满足需求。与keyCode或charCode相比，event.key的优点在于它可以直接返回一个易于理解的键名，例如 Enter、ArrowLeft等，这样就不需要再去查对应的keyCode值了。
但是，如果你的场景中确实需要keyCode，你可能需要自己建立一个从event.key到keyCode的映射表，或者使用库函数来帮助完成这一映射。
const keyMap = {
"Enter": 13,
"ArrowLeft": 37,
"ArrowRight": 39,
// 填充更多按键映射
};
document.addEventListener('keydown', function(event) {
if (keyMap[event.key]) {
console.log("Mapped keyCode: " + keyMap[event.key]);
}
});
三、查找对应的KEYCODE映射表
互联网上有许多预先编制好的keyCode与键名映射表。在一些特定情况下，当你知道用户按下的具体键名，并希望获取对应的keyCode时，可以直接查询这些映射表。然而，需要注意的是，由于keyCode已被逐渐淘汰并不再建议使用，推荐的做法是尽可能使用event.key或event.code。这种方法虽然在某些遗留项目中仍然有其用武之地，但不应被视为长远之计。
四、事件代码的跨浏览器兼容性
虽然event.key和event.code提供了更加现代化和标准化的方式来处理键盘事件，但在涉及跨浏览器兼容性时，仍需注意一些细节。一些旧版本的浏览器可能不支持这些属性，因此在开发时，要确保进行相应的特性检测，或者使用Polyfill来提供后备支持。
document.addEventListener('keydown', function(event) {
let key = event.key || event.keyCode;
console.log("按下的键: " + key);
});
在这段代码中，通过||操作符先尝试获取event.key的值；如果不存在（在旧浏览器中可能出现），则回退到使用event.keyCode。
结论
尽管从技术层面上可以通过各种方式从键名获取keyCode，但随着Web技术的发展，直接使用keyCode的必要性正在逐渐减少。新的API如event.key和event.code提供了更直观且标准化的方式来处理键盘事件。因此，当面对这类需求时，首选的实践应该是使用这些现代API，同时保持对旧浏览器的兼容考虑。
相关问答FAQs：
1. 如何使用 JavaScript 从键名获取键盘的 keyCode？
当用户触发键盘事件时，我们可以通过 JavaScript 从键名获取键盘的 keyCode。可以通过以下步骤进行操作：
- 首先，监听键盘事件，例如键盘按下事件
keydown、键盘抬起事件keyup或者字符输入事件keypress。 - 在事件处理函数中，获取事件对象
event，可以通过参数传递或者通过window.event来获取。 - 使用
event.keyCode获取键盘的 keyCode。
下面是一个示例代码：
document.addEventListener('keydown', function(event) {
var keyCode = event.keyCode;
console.log('键码：', keyCode);
});
- 如何根据 keyCode 获取对应的键名？
JavaScript 提供了 KeyboardEvent 接口，可以用来获取键码对应的键名。可以使用 KeyboardEvent.key 或者 KeyboardEvent.code 属性来获取，取决于你想要获取的是按键的实际名称还是浏览器生成的硬编码键原语。
下面是一个示例代码：
document.addEventListener('keydown', function(event) {
var keyName = event.key;
console.log('键名：', keyName);
});
- 如何兼容不同浏览器获取键盘的 keyCode？
不同的浏览器可能对事件对象的属性命名略有差异，所以在获取键盘的 keyCode 时需要兼容不同浏览器。
可以通过以下代码来兼容不同浏览器：
document.addEventListener('keydown', function(event) {
var keyCode = event.keyCode || event.which || event.charCode;
console.log('键码：', keyCode);
});
在这个例子中，我们使用逻辑或运算符 || 来获取最常见的键盘事件属性，确保在多个浏览器中正确获取键盘的 keyCode。
