事件DOMContentLoaded和load的差別

1.當 

onload

 事件觸發時，頁面上所有的DOM，樣式表，腳本，圖檔，flash都已經加載完成了。

2.當 

DOMContentLoaded

 事件觸發時，僅當DOM加載完成，不包括樣式表，圖檔，flash。

我們需要給一些元素的事件綁定處理函數。但問題是，如果那個元素還沒有加載到頁面上，但是綁定事件已經執行完了，是沒有效果的。

這兩個事件大緻就是用來避免這樣一種情況，将綁定的函數放在這兩個事件的回調中，保證能在頁面的某些元素加載完畢之後再綁定事件的函數。

DOM文檔加載的步驟為

1. 解析HTML結構。
2. 加載外部腳本和樣式表檔案。
3. 解析并執行腳本代碼。
4. DOM樹建構完成。//DOMContentLoaded
5. 加載圖檔等外部檔案。
6. 頁面加載完畢。//load

在第4步，會觸發

DOMContentLoaded

事件。在第6步，觸發

load

事件。

在沒有出現DOMContentLoaded事件出現以前，許多類庫中都有模拟這個事件的方法，比如jQuery中著名的 

$(document).ready(function(){});

 。

1 // 不相容老的浏覽器
2 document.addEventListener("DOMContentLoaded", function() {
3    // ...代碼...
4 }, false);
5 
6 window.addEventListener("load", function() {
7     // ...代碼...
8 }, false);      

轉載于:https://www.cnblogs.com/exhuasted/p/6169049.html