esc+js监听

ESC 键在 JavaScript 中通常用于监听键盘事件，特别是当需要实现如退出全屏、关闭模态窗口、取消操作等功能时。以下是关于如何使用 JavaScript 监听 ESC 键的基础概念、优势、应用场景以及示例代码。

基础概念

在 JavaScript 中，可以通过监听 keydown 或 keyup 事件来检测 ESC 键的按下。ESC 键的键码是 27。

优势

用户体验：允许用户通过键盘快速执行常见操作，提高网站或应用的易用性。
无障碍性：对于使用辅助技术的用户（如屏幕阅读器），键盘导航是必不可少的。
跨平台：键盘事件在所有主流浏览器和操作系统上都是一致的。

应用场景

退出全屏模式：当用户进入全屏模式时，监听 ESC 键可以让他们快速退出。
关闭模态窗口：在显示模态窗口（如弹出框、对话框）时，监听 ESC 键可以让用户无需点击关闭按钮即可关闭窗口。
取消操作：在执行某些需要用户确认的操作时，监听 ESC 键可以提供取消操作的快捷方式。

示例代码

以下是一个简单的示例，展示如何使用 JavaScript 监听 ESC 键来关闭一个模态窗口：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ESC Key Listener Example</title>
<style>
  .modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
  }
  .modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
  }
</style>
</head>
<body>

<button id="openModalBtn">Open Modal</button>
<div id="myModal" class="modal">
  <div class="modal-content">
    <p>Some text in the Modal..</p>
  </div>
</div>

<script>
  const modal = document.getElementById("myModal");
  const openModalBtn = document.getElementById("openModalBtn");

  openModalBtn.onclick = function() {
    modal.style.display = "block";
  }

  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }

  document.onkeydown = function(event) {
    if (event.keyCode === 27) { // ESC key
      modal.style.display = "none";
    }
  }
</script>

</body>
</html>

在这个示例中，当用户点击“Open Modal”按钮时，会显示一个模态窗口。用户可以通过点击窗口外部或按下 ESC 键来关闭该窗口。