JS 键盘事件|极客笔记

JS 键盘事件

在Web开发中，键盘事件是一种常见的交互方式，通过捕获用户在键盘上的按键操作，我们可以实现各种功能，比如输入文本、快捷键操作、游戏控制等。在JavaScript中，我们可以通过监听键盘事件来实现这些功能，本文将详细介绍JS中的键盘事件。

键盘事件类型

在JavaScript中，键盘事件可以分为三种类型：keydown、keypress和keyup。它们分别对应用户按下键盘键、键盘按下并产生字符输入、用户释放键盘键这三种操作。下面分别介绍这三种事件的特点和用法。

keydown事件

keydown事件在用户按下键盘上的某个键时触发，不会考虑按键是否可输出字符。在按下某个键时，keydown事件将会立即触发，而且如果按住不放，事件将不断重复触发。

document.addEventListener('keydown', function(event) {
  console.log('按键码：', event.keyCode);
  console.log('键值：', event.key);
})

keypress事件

keypress事件在用户按下键盘上的某个字符键时触发，这种字符键会输出对应的字符。不过需要注意的是，只有能够输出字符的键才会触发keypress事件，比如字母、数字、符号键。

document.addEventListener('keypress', function(event) {
  console.log('按键码：', event.keyCode);
  console.log('字符：', event.key);
})

keyup事件

keyup事件在用户释放键盘上的某个键时触发，它只会触发一次，不会重复。

document.addEventListener('keyup', function(event) {
  console.log('按键码：', event.keyCode);
  console.log('键值：', event.key);
})

键盘事件对象

在键盘事件触发时，浏览器会传递一个事件对象给事件处理函数，这个事件对象包含了与键盘事件相关的信息。在事件处理函数中，我们可以通过这个事件对象来获取按下的键的信息。

键码（event.keyCode）

事件对象的keyCode属性可以获取到按下的键的键码，键码是一个数字，代表了按下的是哪个键。不同的键对应不同的键码，比如键盘上的’A’键对应的键码为65。

字符（event.key）

事件对象的key属性可以获取到按下的键对应的字符，这样你就可以知道用户按下的是哪个字符。

shiftKey、ctrlKey、altKey等

事件对象还包含了一些布尔值属性，比如shiftKey、ctrlKey、altKey等，它们表示了是否同时按下了Shift、Ctrl、Alt等修饰键。

键盘事件的应用

通过键盘事件，我们可以实现很多交互功能，比如快捷键操作、游戏控制、输入验证等。下面我们分别介绍这几种应用。

快捷键操作

document.addEventListener('keydown', function(event) {
  if (event.ctrlKey && event.key === 's') {
    event.preventDefault(); // 阻止默认保存操作
    console.log('保存文件');
  }
});

游戏控制

let playerX = 0;
let playerY = 0;

document.addEventListener('keydown', function(event) {
  if (event.key === 'ArrowUp') playerY--;
  else if (event.key === 'ArrowDown') playerY++;
  else if (event.key === 'ArrowLeft') playerX--;
  else if (event.key === 'ArrowRight') playerX++;

  console.log('玩家位置：', playerX, playerY);
});

输入验证

let input = document.querySelector('input');

input.addEventListener('keypress', function(event) {
  if (event.key < '0' || event.key > '9') {
    event.preventDefault(); // 阻止非数字字符输入
  }
});