Key Events

// ======================== 监听按键事件 ========================
// 当任何按键被“按下”时触发
document.addEventListener("keydown", event => {
  console.log(`key down is = ${event.key}`);
});
 
// 当按键被“松开”时触发
document.addEventListener("keyup", event => {
  console.log(`key up is = ${event.key}`);
});
 
// ======================== 改变元素内容和颜色 ========================
// 获取页面上 id 为 "myBox" 的元素（假设是一个方块）
const myBox = document.getElementById("myBox");
 
// 按下任意键时触发：更改方块内容和背景颜色
document.addEventListener("keydown", event => {
  myBox.textContent = "😭";               // 显示哭脸表情
  myBox.style.backgroundColor = "tomato"; // 变为红色
});
 
// 松开按键时触发：恢复方块样式
document.addEventListener("keyup", event => {
  myBox.textContent = "😄";               // 恢复笑脸表情
  myBox.style.backgroundColor = "lightblue"; // 变为浅蓝色
});
 
// ======================== 控制方块移动 ========================
// 每次移动的像素距离（单位：px）
const moveAmount = 10;
 
// 初始位置 (x, y)
let x = 0;
let y = 0;
 
// 当按下键盘时，判断是否为方向键
document.addEventListener("keydown", event => {
 
  // 判断按下的键是否以 "Arrow" 开头（例如 "ArrowUp"）
  if (event.key.startsWith("Arrow")) {
 
    // 阻止默认行为（例如按方向键时页面滚动）
    event.preventDefault();
 
    // 根据按下的键名选择对应的移动方向
    switch (event.key) {
      case "ArrowUp":
        y -= moveAmount;   // 向上移动
        break;
      case "ArrowDown":
        y += moveAmount;   // 向下移动
        break;
      case "ArrowLeft":
        x -= moveAmount;   // 向左移动
        break;
      case "ArrowRight":
        x += moveAmount;   // 向右移动
        break;
    }
 
    // 更新方块的位置
    myBox.style.top = `${y}px`;   // 调整纵坐标
    myBox.style.left = `${x}px`;  // 调整横坐标
  }
});

🧠 键盘事件常用属性

属性名	含义	示例值
event.key	键的名称	”a”, “Enter”, “ArrowUp”
event.code	物理键位代码	”KeyA”, “ArrowLeft”
event.altKey	是否按下 Alt 键	true / false
event.ctrlKey	是否按下 Ctrl 键	true / false
event.shiftKey	是否按下 Shift 键	true / false