Javascript 检测键盘按键信息及键码值对应介绍

在JavaScript中，检测键盘按键的信息和获取键码值可以通过监听`keydown`、`keyup`或`keypress`事件来实现。不过，需要注意的是，现代浏览器更推荐使用`key`属性而不是`keyCode`或`which`属性，因为`key`属性提供了更标准化的字符串表示按键（如`"ArrowUp"`表示向上箭头键），而`keyCode`和`which`（在jQuery等库中常用）则依赖于浏览器的实现，且在新版浏览器中被视为不推荐使用的特性。

下面是一个使用`keydown`事件监听键盘按键并获取按键信息的示例代码：

// 假设你有一个想要监听键盘事件的元素，这里以document为例
document.addEventListener('keydown', function(event) {
    // 使用event.key来获取按键的字符串表示
    console.log('按键的字符串表示:', event.key);

    // 如果你仍然需要键码（keyCode），虽然不推荐，但可以这样获取
    // 注意：event.keyCode在一些新浏览器版本中可能不再有效
    // console.log('按键的keyCode:', event.keyCode || event.which); // event.which是jQuery中的常用属性，原生JS中可用event.keyCode

    // 更好的做法是使用event.code，它提供了物理按键的标准化字符串表示
    // 例如："KeyA", "ArrowUp"等
    console.log('按键的物理键码表示:', event.code);

    // 根据需要，你可以在这里添加更多的逻辑来处理不同的按键
    // 例如，如果用户按下了Esc键，你可以执行某些操作
    if (event.key === 'Escape') {
        console.log('用户按下了Esc键');
        // 执行相关操作...
    }
});

在这个例子中，我们使用了`document.addEventListener`来监听整个文档的`keydown`事件。当键盘上的任意键被按下时，就会触发该事件，并执行回调函数。在回调函数中，我们通过`event.key`获取了按键的字符串表示，并通过`event.code`获取了物理按键的标准化字符串表示。尽管`event.keyCode`和`event.which`仍然可以在一些情况下使用，但推荐使用`event.key`和`event.code`来获取更标准化和更易于理解的按键信息。