JavaScript 键盘事件：keydown 和 keyup

在 JavaScript 中，keydown 和 keyup 是两个常用的键盘事件，用于检测用户与键盘的交互。

keydown 事件

keydown 事件在用户按下键盘上的任意键时触发（在键被按下但尚未释放时）。

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

keyup 事件

keyup 事件在用户释放键盘上的键时触发。

element.addEventListener('keyup', function(event) {
  console.log('键释放:', event.key);
});

主要区别

常用事件对象属性

element.addEventListener('keydown', function(event) {
  console.log('键:', event.key);        // 返回按键的字符值 (如 'a', 'Enter')
  console.log('代码:', event.code);     // 返回物理按键代码 (如 'KeyA', 'Enter')
  console.log('是否按下Ctrl:', event.ctrlKey);
  console.log('是否按下Shift:', event.shiftKey);
  console.log('是否按下Alt:', event.altKey);
  console.log('是否按下Meta:', event.metaKey); // Mac上的Command键
});

实际应用示例

// 检测组合键 Ctrl + S
document.addEventListener('keydown', function(e) {
  if (e.ctrlKey && e.key === 's') {
    e.preventDefault(); // 阻止浏览器默认保存行为
    console.log('保存操作');
    // 执行自定义保存逻辑
  }
});

// 检测方向键
document.addEventListener('keydown', function(e) {
  switch(e.key) {
    case 'ArrowUp':
      console.log('上箭头');
      break;
    case 'ArrowDown':
      console.log('下箭头');
      break;
    case 'ArrowLeft':
      console.log('左箭头');
      break;
    case 'ArrowRight':
      console.log('右箭头');
      break;
  }
});

注意事项

1. keypress 事件已被废弃，建议使用 keydown 代替
2. 对于输入框内容变化，应使用 input 事件而非键盘事件
3. 某些键在不同浏览器或操作系统上可能有不同的 key 值
4. 国际键盘布局可能导致 key 值与物理按键不匹配

键盘事件是实现快捷键、游戏控制、表单增强等功能的重要工具。