document load和document DOMContentLoaded两个事件的区别

区别

• 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() {
    // ...代码...
});