键控工作，而按键不香草 JS

Question

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

1. 为什么密钥码不起作用？

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

1. 就像你说的"keyCode"；已弃用，但它仍然有效(请参阅下面的示例(
2. 在您的情况下，最好的方法是使用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');
})