极客教程如何处理JavaScript弹出窗口的ESC键按下事件
当我们按下ESC键时，会使用keyup和keydown事件处理程序检测生成的事件。当键盘上按下ESC键时，事件处理程序会在页面上运行。让我们深入了解如何处理JavaScript弹出窗口上ESC键按下事件。
使用keydown事件
当按下键时，触发keydown事件。无论是否生成字符值，keydown事件都调用所有键，与不建议使用keypress事件相反。虽然keypress显示输入的哪个字符，但keydown和keyup事件提供一个指示哪个键被击中的代码。
语法
以下是keydown事件的语法
onkeydown = (event) => { };
让我们看看以下示例，以更好地理解如何处理JavaScript弹出窗口上ESC键按下事件。
示例
在以下示例中，我们正在运行脚本，使用keydown事件指示何时按下ESC键。
<!DOCTYPE html>
<html>
<body onkeydown="esckey(event)">
<p id="tutorial"></p>
<script>
function esckey(evt) {
if (evt.keyCode == 27) {
document.getElementById("tutorial").innerHTML=('按下了ESC键')
}
}
</script>
</body>
</html>
当执行脚本时，它将生成一个输出，使事件触发。当用户点击“esc”键时，它将显示“esc”键已被按下。
示例
考虑以下示例，在这里我们使用KeyDown事件来提醒“esc”键是否已按下。
<!DOCTYPE html>
<html>
<body>
<p>点击按钮，然后按ESC键</p>
<button id="tutorial" type="submit">点击</button>
<script>
document.onkeydown = function(evt) {
evt = evt || window.event;
var isEscape = false;
if ("key" in evt) {
isEscape = (evt.key === "Escape" || evt.key === "Esc");
} else {
isEscape = (evt.keyCode === 27);
}
if (isEscape) {
alert("已按下ESC键");
}
};
</script>
</body>
</html>
在运行上述脚本时，输出窗口将弹出，显示文本以及网页上的单击按钮。当用户单击按钮并按下esc键时，事件被触发，消息“按下了ESC键”将显示。
示例
执行以下脚本并观察对触发事件的响应，无论按下ESC键还是其他键。
<!DOCTYPE html>
<html lang="en">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<body>
<script>
$(document).keydown(function (eventValue) {
if (eventValue.keyCode == 27) {
document.write("按下了ESC键....");
} else {
document.write("按下了其他键....")
}
});
</script>
</body>
</html>
执行脚本时，它会生成一个输出，触发事件，无论用户何时按下键，例如，如果用户单击esc键，则会显示“esc键已按下”。