极客笔记JavaScript 如何处理弹出窗口上的ESC键按下事件
当我们按下ESC键时，使用 keyup 和 keydown 事件处理程序来检测生成的事件。当在键盘上按下ESC键时，事件处理程序将在页面上运行。让我们深入文章，以便更好地理解如何处理JavaScript弹出窗口上的ESC键按下事件。
使用keydown事件
当按下键盘上的键时，将触发keydown事件。keydown事件对所有键都会调用，无论它们是否生成字符值，与不推荐使用的keypress事件相反。虽然keypress显示输入了哪个字符，但keydown和keyup事件会给出一个表示被按中的键的代码。
语法
以下是keydown事件的语法。
onkeydown = (event) => { };
让我们来看一下以下示例，以了解如何处理JavaScript弹出窗口上的esc键按下。
示例
在以下示例中，我们运行的脚本会在按下esc键时通过使用keydown事件来指示。
<!DOCTYPE html>
<html>
<body onkeydown="esckey(event)">
<p id="tutorial"></p>
<script>
function esckey(evt) {
if (evt.keyCode == 27) {
document.getElementById("tutorial").innerHTML=('escape key was pressed')
}
}
</script>
</body>
</html>
当脚本被执行时，它会生成一个输出，触发事件。当用户点击”esc”键时，会显示”esc”键被按下。
示例
考虑以下示例，在这里我们使用Keydown事件来提醒是否按下了”esc”键。
<!DOCTYPE html>
<html>
<body>
<p>Click The Button and Then Press Esc Key</p>
<button id="tutorial" type="submit">click</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("Escape Key Was Pressed");
}
};
</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 key is pressed....");
} else {
document.write("Some other is key pressed....")
}
});
</script>
</body>
</html>
当脚本被执行时，它会生成一个输出，触发事件，并在用户按下键时显示文本；示例，如果用户点击esc键，它将显示”esc键被按下”。