onload?和?onunload?是兩種常用于網頁中的事件處理器（event handlers），但它們處理的是完全不同的頁面生命周期事件。
onload
onload?事件會在頁面或指定的元素（如圖片、框架等）完成加載后觸發。對于頁面整體來說，onload?事件在 DOM 完全加載和解析完成后觸發，并且還會等待樣式表、圖像和子框架完成加載。這意味著在?onload?事件觸發之前，用戶可能還無法看到或交互頁面上的所有內容。
示例代碼（頁面加載時觸發）：
html復制代碼
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Onload Example</title> | |
<script> | |
window.onload = function() { | |
console.log('頁面已完全加載！'); | |
// 在這里，你可以安全地訪問和操作 DOM 元素 | |
}; | |
</script> | |
</head> | |
<body> | |
<!-- 頁面內容 --> | |
</body> | |
</html> |
在這個例子中，當頁面完成加載后，控制臺會輸出 "頁面已完全加載！"。
onunload?或?beforeunload
需要注意的是，onunload?事件在現代瀏覽器中已被限制使用，因為它可能會干擾用戶的導航行為。通常建議使用?beforeunload?事件，它會在窗口、文檔或資源將要卸載之前觸發。這常用于在用戶嘗試離開頁面時提示他們是否有未保存的更改。
示例代碼（頁面卸載前觸發）：
html復制代碼
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Beforeunload Example</title> | |
<script> | |
window.addEventListener('beforeunload', function(event) { | |
// 瀏覽器會顯示默認的對話框或你自定義的消息（如果支持） | |
event.returnValue = '你確定要離開頁面嗎？'; // Gecko, Trident, Chrome 34+ | |
return event.returnValue; // Gecko, WebKit, Chrome <34 | |
}); | |
</script> | |
</head> | |
<body> | |
<!-- 頁面內容 --> | |
</body> | |
</html> |
在這個例子中，當用戶嘗試關閉瀏覽器標簽頁或導航到其他頁面時，瀏覽器會顯示一個默認的對話框（或自定義的消息，如果瀏覽器支持），詢問用戶是否確定要離開頁面。
總結來說，onload?和?beforeunload（或曾經的?onunload）事件分別用于處理頁面加載完成和頁面卸載之前的事件，它們在網頁應用的生命周期中扮演著重要的角色。
)
)
![[AIGC] Java CompletableFuture：簡介及示例](http://pic.xiahunao.cn/[AIGC] Java CompletableFuture：簡介及示例)
