如何通过事件监听器将按键值传递给原生JavaScript函数？

我正在学习JavaScript，想要拓展课程没覆盖的内容，想用原生JS把按键输入和["w","a","s","d"]匹配起来。我写了一段代码，但知道它无法运行——按键值没传递给direction参数，而且event.key的检查语法也有问题，但不知道怎么修复。请问不用jQuery或其他扩展能不能实现这个功能？

我的代码如下：

function moveCommand(direction) {
 var whatHappens;
 switch (direction) {
 case direction === event.key["w"]:
 var outcome = battle(1) ? "run your sword through it! Gain 25 exp!" : "take serious damage. Gain 5exp. Lose 20hp.";
 whatHappens = "You encounter a monster and " + outcome;
 break;
 case direction === event.key["a"]:
 whatHappens = "You arrived home";
 break;
 case direction === event.key["s"]:
 // player.gold += 15;
 whatHappens = "You found 15 gold!";
 break;
 case direction === event.key["d"]:
 var outcome = battle(2) ? "send it packing! Gain 10exp!" : "get pelted with stones. Gain 2exp. Lose 10hp.";
 whatHappens = "You run into a troll and " + outcome;
 break;
 default:
 whatHappens = "Please enter a valid direction";
 }
 return whatHappens;
}
document.addEventListener('keypress', moveCommand);

当然可以用原生JS实现！你的代码确实有两个关键问题，我来一步步帮你修复：

问题1：事件回调的参数接收错误 #

当你给addEventListener传moveCommand作为回调时，浏览器会自动把事件对象作为参数传给这个函数，而不是你想象的direction。所以你需要修改函数参数，先拿到事件对象，再从中提取按键值。

问题2：switch语句的case写法错误 #

switch的case后面应该直接写要匹配的值，而不是条件判断表达式。另外event.key是一个字符串（比如用户按w时，它就是"w"），不是数组，所以event.key["w"]这种写法完全错误。

修复后的完整代码 #

// 先确保你已经定义了battle函数，比如示例实现：
function battle(difficulty) {
  // 这里可以写你的战斗逻辑，比如随机返回true/false模拟胜负
  return Math.random() > 0.5;
}

function moveCommand(event) {
  // 获取按键值，转成小写兼容大小写输入
  const key = event.key.toLowerCase();
  let whatHappens;

  switch (key) {
    case "w":
      const monsterOutcome = battle(1) 
        ? "run your sword through it! Gain 25 exp!" 
        : "take serious damage. Gain 5exp. Lose 20hp.";
      whatHappens = "You encounter a monster and " + monsterOutcome;
      break;
    case "a":
      whatHappens = "You arrived home";
      break;
    case "s":
      // player.gold += 15;
      whatHappens = "You found 15 gold!";
      break;
    case "d":
      const trollOutcome = battle(2) 
        ? "send it packing! Gain 10exp!" 
        : "get pelted with stones. Gain 2exp. Lose 10hp.";
      whatHappens = "You run into a troll and " + trollOutcome;
      break;
    default:
      whatHappens = "Please enter a valid direction (W/A/S/D)";
  }

  // 可以在这里把结果打印到控制台或者页面上
  console.log(whatHappens);
  return whatHappens;
}

// 推荐用keydown事件，比keypress更稳定，支持更多按键
document.addEventListener('keydown', moveCommand);

额外优化建议 #

如果你觉得switch语句有点繁琐，还可以用对象映射的方式来简化代码，可读性更强：

function moveCommand(event) {
  const key = event.key.toLowerCase();
  const actions = {
    "w": () => {
      const outcome = battle(1) 
        ? "run your sword through it! Gain 25 exp!" 
        : "take serious damage. Gain 5exp. Lose 20hp.";
      return "You encounter a monster and " + outcome;
    },
    "a": () => "You arrived home",
    "s": () => "You found 15 gold!",
    "d": () => {
      const outcome = battle(2) 
        ? "send it packing! Gain 10exp!" 
        : "get pelted with stones. Gain 2exp. Lose 10hp.";
      return "You run into a troll and " + outcome;
    }
  };

  const whatHappens = actions[key] ? actions[key]() : "Please enter a valid direction (W/A/S/D)";
  console.log(whatHappens);
  return whatHappens;
}

内容的提问来源于stack exchange，提问作者Chris Cooper