Keyup 有效，而 keypress 无效 Vanilla JS

Question

我正在重新学习 JS，并尝试在 vanilla JS 中制作模态 windows。所以，我的任务是让 Escape 按钮工作并在点击它时关闭模式。我发现当我将 'keypress' 事件放在文档上时，它无法工作，而 'keyup' 工作正常。我找不到关于为什么会这样的确切信息。我曾经使用 e.KeyCode 但发现它已被弃用。所以我主要有2个问题我找不到直接的答案：

为什么键码不起作用？
2021 年处理键盘事件的最佳方式是什么？

这是代码。 Console.log 不起作用。如果我将 keypress 更改为 keyup，一切正常。

document.addEventListener('keypress', function (e) {
  console.log('Event fired');
  if (e.key === "Escape" && !modal.classList.contains('hidden')) {
    closeModal();
  }
})

提前致谢。

此致，

瓦迪姆

Answer 1

正如您所说，“keyCode”已被弃用，但它仍然有效（参见下面的示例）。
在你的情况下最好的方法是使用 keyup 和 e.key。

您的代码按预期工作（使用任何其他键），但从未为 Escape 触发按键事件。所以只能用keydown和keyup.

document.addEventListener('keypress', function(e) {
  console.log('keypress fired; ', e.key);
})
document.addEventListener('keyup', function(e) {
  console.log('keyup fired; ', e.key);
  if(e.keyCode == '27') alert('Escape');
})

Keyup 有效，而 keypress 无效 Vanilla JS

Keyup works while keypress doesn't Vanilla JS

javascript

keypress

keyup