我为什么每个键盘的键都有一个唯一的 keyCode 值？使用场景是什么？底层原理是什么？

为什么每个键盘的键都有一个唯一的 keyCode 值？

每个键盘上的键都有一个唯一的 keyCode 值，主要是为了提供一种标准化的方式来识别用户按下的键。这种标准化有助于开发者在处理键盘事件时能够一致地识别和响应不同的按键，而不必担心不同键盘布局或操作系统之间的差异。

使用场景

表单验证：确保用户输入符合特定要求，例如只允许输入数字或字母。游戏开发：监听用户的键盘操作，控制游戏角色的移动或执行特定动作。快捷键：实现自定义的键盘快捷键，如 Ctrl+S 保存、Ctrl+P 打印等。无障碍设计：确保网站或应用可以通过键盘导航，提高用户体验。文本编辑：在文本编辑器中实现特定的键盘行为，如自动补全、拼写检查等。

底层原理

键盘硬件

按键扫描：键盘控制器不断扫描键盘矩阵，检测哪些键被按下或释放。扫描码：每个按键在硬件层面有一个唯一的扫描码（scan code），这是键盘控制器用来识别按键的原始标识符。

操作系统

驱动程序：键盘驱动程序将扫描码转换为操作系统可以理解的键码（key code）。事件生成：操作系统生成键盘事件，并将键码传递给应用程序。

浏览器

事件对象：浏览器接收到操作系统传递的键盘事件，并将其封装成一个事件对象。keyCode 属性：事件对象中的 keyCode 属性包含了按键的键码值。

示例代码

document.addEventListener('keydown', function(event) {

console.log('Key code:', event.keyCode);

if (event.keyCode === 13) { // 13 是回车键的 keyCode

console.log('Enter key pressed');

}

});

替代属性

尽管 keyCode 在许多情况下仍然有效，但现代浏览器推荐使用更标准化和更具描述性的 key 和 code 属性。

key：返回一个表示按键的字符串，如 “Enter”、“ArrowUp” 等。code：返回一个表示物理键位的字符串，如 “Enter”、“ArrowUp” 等，与键盘布局无关。

示例代码

document.addEventListener('keydown', function(event) {

console.log('Key:', event.key);

console.log('Code:', event.code);

if (event.key === 'Enter') {

console.log('Enter key pressed');

}

});

总结

keyCode 提供了一种标准化的方式来识别按键，但已被标记为过时。key 和 code 属性更现代化，更具描述性和兼容性。使用这些属性可以更方便地处理键盘事件，提升用户体验和代码的可维护性。