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>

列印頁面