DOMContentLoaded事件和Load事件的区别?

DOMContentLoaded 事件

当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、图像和子框架的完全加载

Load 事件

当整个页面及所有依赖资源如样式表和图片都已完成加载时,将触发load事件。
它与DOMContentLoaded不同,后者只要页面DOM加载完成就触发,无需等待依赖资源的加载。

DOM文档加载的步骤为

  1. 解析HTML结构。
  2. 加载外部脚本和样式表文件。
  3. 解析并执行脚本代码。
  4. DOM树构建完成。//DOMContentLoaded
  5. 加载图片等外部文件。
  6. 页面加载完毕。//load

这两个事件的出现主要是用来避免我们需要给一些元素的事件绑定处理函数。但问题是,如果那个元素还没有加载到页面上,但是绑定事件已经执行完了,是没有效果的。

如果将绑定的函数放在这两个事件的回调中,就能保证在页面的某些元素加载完毕之后再绑定事件的函数。

你可能感兴趣的:(DOMContentLoaded事件和Load事件的区别?)