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

查看全文