JavaScript 按键事件处理

简介

在 Web 开发中，我们常常需要检测用户在键盘上按下了什么键，以便做出相应的响应。JavaScript 提供了一种非常方便的处理按键事件的方式。

监听按键事件

在 JavaScript 中，可以使用 addEventListener 方法监听特定的按键事件。例如：

window.addEventListener('keydown', function(event) {
  console.log('Key pressed:', event.code);
});

上面的代码会监听整个窗口的键盘按键事件，并在按键按下时将按键的代码（Code）打印到控制台中。

检测按键码

在 JavaScript 中，每个按键都有一个对应的按键码（Code），可以通过 event.code 属性获取。例如：

window.addEventListener('keydown', function(event) {
  if (event.code === 'ArrowLeft') {
    console.log('Left arrow key pressed');
  }
});

上面的代码会检测是否按下了左箭头键，并在控制台中输出一段文字。

阻止默认行为

在某些情况下，按键按下会触发默认的行为，例如按下空格键时会滚动页面，按下回车键时会提交表单等。如果我们不想要这些默认行为，可以通过调用 event.preventDefault() 方法来阻止。例如：

window.addEventListener('keydown', function(event) {
  if (event.code === 'Space') {
    event.preventDefault();
    console.log('Space key pressed');
  }
});

上面的代码会阻止按下空格键时的默认行为，并在控制台中输出一段文字。

同时监听多个按键

有时候我们需要同时监听多个按键，例如同时按下 Shift + Enter 键等。可以通过检测多个按键码来实现。例如：

window.addEventListener('keydown', function(event) {
  if (event.code === 'ShiftLeft' && event.code === 'Enter') {
    console.log('Shift + Enter keys pressed');
  }
});

上面的代码会检测是否同时按下了 Shift 左键和 Enter 键，并在控制台中输出一段文字。

结语

JavaScript 提供了非常方便的方法来处理按键事件。通过监听按键事件和检测按键码，我们可以实现各种各样的功能，例如游戏中的控制和表格中的快捷键等。希望本文对你有所帮助！