js实现keydown

监听键盘事件

在JavaScript中，可以通过addEventListener方法监听keydown事件。以下是一个基本示例：

document.addEventListener('keydown', function(event) {
  console.log('按键按下:', event.key);
});

获取按键信息

keydown事件对象包含多个属性，用于获取按键的详细信息：

document.addEventListener('keydown', function(event) {
  console.log('按键代码:', event.code); // 物理按键位置
  console.log('按键值:', event.key);    // 实际输入的字符
  console.log('是否按下Ctrl:', event.ctrlKey);
  console.log('是否按下Alt:', event.altKey);
  console.log('是否按下Shift:', event.shiftKey);
});

阻止默认行为

某些按键会触发浏览器的默认行为（如空格键滚动页面），可以使用preventDefault()阻止：

document.addEventListener('keydown', function(event) {
  if (event.key === ' ') {
    event.preventDefault();
    console.log('空格键被阻止');
  }
});

组合键检测

通过检查修饰键状态实现组合键功能：

document.addEventListener('keydown', function(event) {
  if (event.ctrlKey && event.key === 's') {
    event.preventDefault();
    console.log('Ctrl+S 被按下');
  }
});

游戏控制示例

在游戏开发中常用keydown实现角色移动：

const keys = {};
document.addEventListener('keydown', (event) => {
  keys[event.code] = true;

  if (keys['ArrowUp']) console.log('向上移动');
  if (keys['ArrowLeft']) console.log('向左移动');
});

document.addEventListener('keyup', (event) => {
  keys[event.code] = false;
});

注意事项

长时间按住按键会持续触发keydown事件，浏览器会先触发几次后进入重复模式。可以通过event.repeat属性检测：

document.addEventListener('keydown', function(event) {
  if (event.repeat) return;
  console.log('首次按下');
});