Javascript 简明教程

JavaScript - Window/Document Events

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

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

Window Events

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

Event Name

Description

load

当包含所有资源的整个网页完成加载时触发。

unload

当用户离开页面或关闭浏览器窗口或标签页时触发。

resize

当浏览器窗口的大小发生变化时激活。

scroll

当用户滚动页面时触发。

Example: Demonstrating Window Events

在此示例中，一个脚本积极监听窗口上的“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>

Document Events

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

Event Name

Description

DOMContentLoaded

当 HTML 文档已完成加载和解析时触发，无需等待图像等外部资源。

click

在用户单击元素时触发。

submit

在表单提交时触发。

keydown/keyup/keypress

这些事件在分别按下、释放或按住一个键时触发。

change

当输入元素的值发生更改时触发，比如文本输入或下拉列表。

Example: Demonstrating Document Events

在此示例中，我们包含了一个脚本，它监听文档的“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>