window.onload 事件

admin發表於2020-05-21
事件

本文將結合程式碼例項詳細介紹一下 window.onload 事件的用法。

頁面中很多JavaScript程式碼往往需要對應的文件結構或者內容載入完畢才能執行。

否則可能會出現一些令初學者比較困惑的現象。

首先看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="https://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<style type="text/css">
#ant{
  width:100px;
  height:100px;
  border:2px dotted #ccc;
}
</style>
<script>
let oDiv=document.getElementById("ant");
oDiv.style.backgroundColor="#F90";
</script>
</head>
<body>
  <div id="ant"></div>
</body>
</html>

上述程式碼會報錯，谷歌開發者工具控制檯截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/202003/22/124743jebq21z6rddp1zdu.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.程式碼本意是將div的背景顏色設定為 "#F90"，但是並未成功，且報錯。

（2）.由於順序執行，當執行到 document.getElementById("ant") 時，div 元素並未載入。

（3）.獲取 div 元素物件就失敗了，oDiv==null，於是會出現圖片中的錯誤。

可以採用如下三種方式解決上述問題：

（1）.JavaScript 程式碼放置於頁面的底部，當執行 JavaScript 程式碼的時候，div 元素自然已經載入解析完畢。

（2）.將設定 div 元素的相關程式碼放置於 window.onload 事件處理函式中。

（3）.將設定 div元 素的相關程式碼放置於DOMContentLoaded事件處理函式中（後面會有介紹）。

下面採用本文的主角 window.onload 來解決上述問題，程式碼修改如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="https://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<style type="text/css">
#ant{
  width:100px;
  height:100px;
  border:2px dotted #ccc;
}
</style>
<script>
window.onload=function(){
  let oDiv=document.getElementById("ant");
  oDiv.style.backgroundColor="#F90";
}
</script>
</head>
<body>
  <div id="ant"></div>
</body>
</html>

上述程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/202003/22/124816ymcpszsqwffxb4em.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼成功實現預期效果，此時window.onload事件的功能得以體現。

此事件在文件內容完全載入完畢時觸發，所以將獲取和設定div元素的程式碼放置於window.onload事件處理函式之中，可以確保在設定div背景顏色的時候，div元素已經載入完畢。

事件處理函式繫結：

onload 事件準確的將應該是 load 事件，前面加 "on" 是註冊事件處理函式的一種方式。

關於如何註冊事件處理函式，本文不做介紹，具體參閱JavaScript 註冊事件處理函式一章節。

window.onload事件缺點：

此事件需要在文件內容完全載入完畢後才會觸發，比如需要載入完畢CSS檔案或者圖片等資源。

很多情況下，圖片等資源載入完畢不是必須的，只需要文件結構載入和解析完畢即可。

假設前文設定div元素背景色的需求不變，並且頁面有大量圖片要載入，如果等待圖片完全載入完畢再進行背景色設定，那麼設定操作就稍顯滯後，也不人性化，此種情況下可以利用 DOMContentLoaded 事件實現上述功能。

關於 DOMContentLoaded 可以參閱 JavaScript DOMContentLoaded 事件一章節。

相關文章