請說明 DOMContentLoaded, load, beforeunload, unload 的觸發時機

頁面生命週期事件

瀏覽器在載入與卸載頁面時，會依序觸發以下四個事件：

DOMContentLoaded

觸發時機：HTML 文件被完整解析、DOM 樹建立完成後立即觸發。不需要等待樣式表、圖片、iframe 等外部資源載入完畢。
監聽目標：document
常見用途：DOM 操作、初始化 JavaScript 邏輯、綁定事件

document.addEventListener('DOMContentLoaded', () => {
  console.log('DOM 已準備好');
});

注意：若 <script> 放在 <head> 且沒有 async/defer，會阻塞 HTML 解析，導致 DOMContentLoaded 延後觸發。

load

觸發時機：頁面上所有資源（圖片、CSS、字型、iframe…）都載入完畢後觸發。
監聽目標：window
常見用途：需要取得圖片尺寸、確認所有資源就緒後才執行的邏輯

window.addEventListener('load', () => {
  console.log('所有資源已載入');
});

beforeunload

觸發時機：使用者即將離開頁面（關閉分頁、重新整理、跳轉連結）時觸發，在卸載前可攔截。
監聽目標：window
常見用途：提示使用者有未儲存的資料

window.addEventListener('beforeunload', (e) => {
  e.preventDefault();
  e.returnValue = ''; // 觸發瀏覽器預設的「確定要離開嗎？」對話框
});

現代瀏覽器會忽略自訂的提示文字，統一顯示標準訊息。

unload

觸發時機：頁面正在被卸載時觸發（已確定離開）。
監聽目標：window
常見用途：清除計時器、發送 beacon 回報等最後動作

window.addEventListener('unload', () => {
  navigator.sendBeacon('/analytics', data);
});

unload 時不可做耗時操作，也無法阻止頁面卸載。部分瀏覽器（尤其是行動版）為了 BFCache 最佳化，可能不會觸發此事件，建議改用 pagehide。

觸發順序總結

HTML 解析完成
  └─ DOMContentLoaded（DOM 就緒）
       └─ load（所有資源就緒）
            └─ [使用者離開]
                 ├─ beforeunload（詢問是否離開）
                 └─ unload（頁面卸載中）

比較表

事件	監聽對象	等待資源	可攔截離開
DOMContentLoaded	document	否	否
load	window	是	否
beforeunload	window	—	是
unload	window	—	否