區別

• DOMContentLoaded: DOM解析完成即觸發此事件，不等待styles, images等資源的載入
• load：依賴的資源也已載入完成
• DOMContentLoaded繫結到document，load繫結到window

document.addEventListener('DOMContentLoaded', function(event) {
  console.log("DOM fully loaded and parsed");  // 先列印
});
window.addEventListener('load', function(event) {
  console.log("img loaded");  // 後列印
}); 
 

何時觸發這兩個事件？

1.當 onload 事件觸發時，頁面上所有的DOM，樣式表，指令碼，圖片，flash都已經載入完成了。

2.當 DOMContentLoaded 事件觸發時，僅當DOM載入完成，不包括樣式表，圖片，flash。

為什麼要區分？

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

這兩個事件大致就是用來避免這樣一種情況，將繫結的函式放在這兩個事件的回撥中，保證能在頁面的某些元素載入完畢之後再繫結事件的函式。

DOM文件載入的步驟為

1. 解析HTML結構。
2. 載入外部指令碼和樣式表文件。
3. 解析並執行指令碼程式碼。
4. DOM樹構建完成。//DOMContentLoaded
5. 載入圖片等外部檔案。
6. 頁面載入完畢。//load

在第4步，會觸發DOMContentLoaded事件。在第6步，觸發load事件。

用原生js可以這麼寫

// 不相容老的瀏覽器，相容寫法見[jQuery中ready與load事件](http://www.imooc.com/code/3253)，或用jQuery
document.addEventListener("DOMContentLoaded", function() {
   // ...程式碼...
}, false);

window.addEventListener("load", function() {
    // ...程式碼...
}, false);
 

用jQuery這麼寫

// DOMContentLoaded
$(document).ready(function() {
    // ...程式碼...
});

//load
$(document).load(function() {
    // ...程式碼...
});