DOMContentLoaded、ready、load 事件的区别

最新推荐文章于 2024-02-07 13:34:11 发布

xiaogang's blog

最新推荐文章于 2024-02-07 13:34:11 发布

阅读量913

点赞数

本文链接：https://blog.csdn.net/xiaogangblog/article/details/100038928

版权

这篇文章详细介绍了DOMContentLoaded、ready和load事件的区别。DOMContentLoaded事件在DOM树构建完成后触发，而load事件则在所有资源包括图片等完全加载后触发。ready事件（jQuery中的）与DOMContentLoaded类似，用于DOM加载完成后的操作。这三个事件对于确保正确和及时的页面操作至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件 DOMContentLoaded、ready 和 load 之间的区别：

触发的时机不一样，先触发DOMContentLoaded事件，后触发load事件。

DOM文档加载的步骤为：

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

在第4步，会触发DOMContentLoaded事件；在第6步，触发load事件。

（当构建DOM树时，若遇到<script>标签，则会立刻停止DOM树的构建）

原生js 实现：

document.addEventListener("DOMContentLoaded", function() {  

   // ...代码...  

}, false);  

window.addEventListener("load", function() {  

    // ...代码...  

}, false);

jQuery实现：

// DOMContentLoaded  

$(document).ready(function() {  

    // ...代码...  

});  

  
//load  

$(document).load(function() {  

    // ...代码...  

});

load事件：

页面资源全部载入（JS，CSS，图片等全部加载完）触发；

作用：监控整个文档（包括资源）是否加载完毕，所有资源加载完毕后触发

DOMContentLoaded事件（原生js）、ready事件（jQuery）：

当DOM加载完成触发，此时引用的资源未必已加载完成。所以，ready事件总是先于load事件触发。

作用：监控dom是否加载完毕，dom加载完毕时及资源加载之前触发

延伸：

1.当 onload 事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。

2.当 DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash。

当我们需要给一些元素的事件绑定处理函数。但问题是，如果那个元素还没有加载到页面上，但是绑定事件已经执行完了，是没有效果的。

这两个事件大致就是用来避免这样一种情况，将绑定的函数放在这两个事件的回调中，保证能在页面的某些元素加载完毕之后再绑定事件的函数。