JavaScript - 窗口/文档事件

JavaScript 窗口事件是用户执行某些影响整个浏览器窗口的操作（例如加载、调整大小、关闭或移动窗口）时发生的事件。最常见的窗口事件是通过打开特定网页来加载窗口。此事件由 onload 事件处理程序处理。

开发人员可以使用 JavaScript 创建动态的交互式网页，以响应用户的操作。交互性取决于两个核心方面：窗口事件和文档事件。窗口事件在浏览器的全局级别运行，可以控制浏览器窗口的整体状态；而文档事件则与 HTML 文档交互，使开发人员能够对页面内的元素或操作做出特定反应。

窗口事件

在浏览器级别，窗口事件发生并与窗口对象相关联；此全局对象代表 Web 浏览器的窗口。这些类型的事件经常用于监控浏览器窗口的整体状态或管理全局交互。

事件名称	描述
load	当整个网页（包括所有资源）加载完成后触发。
unload	当用户离开页面或关闭浏览器窗口或标签页时触发。
resize	当浏览器窗口的大小发生变化时触发。
scroll	当用户滚动页面时触发。

示例：演示窗口事件

在此示例中，脚本主动侦听窗口上的“load”、“resize”和“scroll”事件；它包含一个初始页面加载警报，以告知用户加载已完成。如果他们随后调整窗口大小，则会触发一个警报，从而显示其更新的视口的新的尺寸。此外，当用户滚动页面时，会触发一个警报以指示他们的操作。

<!DOCTYPE html>
<html>
<head>
   <title>Window Events Example</title>
   <style>
      body {
         height: 2000px; /* Adding some content just to enable scrolling */
      }

      #resizeInfo {
         position: fixed;
         top: 10px;
         left: 10px;
         background-color: #fff;
         padding: 10px;
         border: 1px solid #ccc;
      }
   </style>
   <script>
      window.addEventListener('load', function() {
         var initialSizeInfo = 'Initial window size: ' + window.innerWidth + ' x ' + window.innerHeight;
         document.getElementById('resizeInfo').innerText = initialSizeInfo;
  
         alert('The page has finished loading!');
      });

      window.addEventListener('resize', function() {
         var newSizeInfo = 'New window size: ' + window.innerWidth + ' x ' + window.innerHeight;
         document.getElementById('resizeInfo').innerText = newSizeInfo;
         alert("Page has been resized");
      });

      window.addEventListener('scroll', function() {
         alert('You have scrolled on this page.');
      },{once:true});
   </script>
</head>
<body>
    <div id="resizeInfo">Initial window size: ${window.innerWidth} x ${window.innerHeight}</div>
</body>
</html>

文档事件

另一方面，文档事件发生在窗口内的 HTML 文档级别，并且与文档对象相关联，该对象代表 HTML 文档，从而提供一个与页面内容交互的接口。

事件名称	描述
DOMContentLoaded	当 HTML 文档已完全加载并解析后触发，无需等待外部资源（如图像）。
click	当用户单击某个元素时触发。
submit	当提交表单时触发。
keydown/keyup/keypress	这些事件分别在按下、释放或同时按下和释放键时触发。
change	当输入元素的值发生变化时触发，例如文本输入或下拉列表。

示例：演示文档事件

在此示例中，我们包含一个脚本，该脚本侦听文档上的“DOMContentLoaded”、“click”、“submit”和“keydown”事件。“DOMContentLoaded”事件发生后，它将记录到控制台，表明 DOM 内容已完全加载。随后，单击某个元素会触发一个警报，显示被单击元素的标签名称。提交表单还会发出警报，表明表单已提交。此外，按下键（例如输入用户名）会将每个按键都显示在屏幕上。

<!DOCTYPE html>
<html>
<head>
   <title>Document Events Example</title>
   <script>
      document.addEventListener('DOMContentLoaded', function() {
         alert('DOM content has been fully loaded!');
      });

      document.addEventListener('click', function(event) {
         alert('Element clicked! Tag Name: ' + event.target.tagName);
      },{once:true});

      document.addEventListener('submit', function() {
         alert('Form submitted!');
      });

      document.addEventListener('keydown', function(event) {
         alert('Key pressed: ' + event.key);
      },{once:true});
   </script>
</head>
<body>
   <form>
      <label for="username">Username:</label>
      <input type="text" id="username" name="username">
      <button type="submit">Submit</button>
   </form>
</body>
</html>

打印页面