事件DOMContentLoaded和load的区别

他们的区别是，触发的时机不一样，先触发DOMContentLoaded事件，后触发load事件。

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);

true - 事件句柄在捕获阶段执行（先执行 父级监听事件， 再执行 子监听事件）

false- false- 默认。事件句柄在冒泡阶段执行（先执行 子监听事件，再执行 父监听事件）

二、jQuery

// DOMContentLoaded
$(document).ready(function() {
// 简写 jQuery(function(){}) 或$(function(){});
});

//load
$(document).load(function() {

});