DOMContentLoaded 和 load 事件的区别

DOM文档加载完成后，会触发多个事件。其中DOMContentLoaded和load是比较重要的两个事件。但是，这两个事件有什么区别呢？

DOMContentLoaded事件

DOMContentLoaded事件指的是DOM树构建完毕后，不包括样式表、图片等文件的加载。也就是说，当HTML文档解析完成后，就可以触发DOMContentLoaded事件了。此时，HTML页面中的所有元素已经可以访问和操作了。

DOMContentLoaded事件通常用于处理页面加载完成后需要立即进行操作的情况。例如，当页面加载完成后，需要进行一些DOM操作或是初始化等操作时，往往会使用DOMContentLoaded事件。

下面是addEventListener方法监听DOMContentLoaded事件的代码：

document.addEventListener('DOMContentLoaded', function(){
    // 此处为DOMContentLoaded事件触发时需要执行的代码
}, false);

load事件

load事件是在页面加载完成后触发的。不仅包括DOM树构建完成后，还包括页面中的样式表、图片、脚本文件等所有资源的加载完成。

load事件通常用于处理页面资源全部加载完成后需要进行的操作。例如，在页面加载完成后，需要对页面进行一些计算、检查或是动态加载资源等操作。

下面是addEventListener方法监听load事件的代码：

window.addEventListener('load', function(){
    // 此处为load事件触发时需要执行的代码
}, false);

区别

综上所述，DOMContentLoaded事件是在DOM文档构建完成后触发，而load事件是在页面所有资源（包括DOM树）加载完成后触发。因此，DOMContentLoaded事件触发要比load事件快，且常用于对页面进行快速处理。而load事件则更适合需要等待所有资源（包括图片等）加载完毕后再进行操作的情况。