Javascript 简明教程

JavaScript - Window/Document Events

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

JavaScript window events are actions that occur when the user does something affecting the entire browser window, like loading, resizing, closing, or moving the window. The most common window event is simply loading the window by opening a particular web page. This event is handled by the onload event handler.

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

Developers can use JavaScript to create dynamic, interactive web pages that respond to user actions. The interactivity depends on two core aspects: window events and document events. Operating at the browser’s panoramic level, window events bestow control over the overall state of the browser window; alternatively, document events interact with the HTML document, empowering developers to react specifically towards elements or actions within a page

Window Events

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

At the browser level, window events happen and hold association with the window object; this global object represents the web browser’s window. Frequently employed to oversee the overall state of a browser window or manage global interactions are these types of events.

Event Name

Description

load

Triggered when the entire web page, including all its resources, has finished loading.

unload

Fired when the user is leaving the page or closing the browser window or tab.

resize

Activated when the size of the browser window is changed.

scroll

Fired when the user scrolls the page.

Example: Demonstrating Window Events

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

In this example, a script actively listens for the 'load,' 'resize,' and 'scroll' events on the window; it includes an initial page load alert to inform users that loading is complete. Should they subsequently resize their window, an alert will trigger thereby displaying the new size of their updated viewport. Moreover, when the user scrolls on the page, an alert is triggered to indicate their action.

<!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 文档，因而提供了一个与页面内容进行交互的接口。

Document events on the other hand occur at the level of the HTML document within the window and are associated with the document object which represents the HTML document thereby providing an interface to interact with the content of the page.

Event Name

Description

DOMContentLoaded

Triggered when the HTML document has been completely loaded and parsed, without waiting for external resources like images.

click

Fired when the user clicks on an element.

submit

Triggered when a form is submitted.

keydown/keyup/keypress

These events are triggered when a key is pressed, released, or both, respectively.

change

Fired when the value of an input element changes, such as with text inputs or dropdowns.

Example: Demonstrating Document Events

在此示例中，我们包含了一个脚本，它监听文档的“DOMContentLoaded”、“click”、“submit”和“keydown”事件。在“DOMContentLoaded”事件发生时，它会将 DOM 内容已完全加载的信息记录到控制台。随后，单击元素会触发一个警报，显示已单击元素的标记名称。提交表单也会发出警报，指出表单已提交。此外，按下键（如使用字符输入用户名），会向屏幕发出每个按键的警报。

In this example, we’ve included a script that listens for the 'DOMContentLoaded,' 'click,' 'submit,' and 'keydown' events on the document. Upon the 'DOMContentLoaded' event, it logs to the console that the DOM content has been fully loaded. Subsequently, clicking an element triggers an alert displaying the tag name of the clicked element. Submitting a form also alerts that the form has been submitted. Furthermore, pressing a key like entering the username with characters, alerts every keypress to the screen.

<!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>