onload 事件 发生在整个页面加载完成,包括所有外部资源之后。此时,页面可以完全呈现给用户。
理解 DOMContentLoaded 和 onload 事件 的区别和应用场景,对于开发人员来说至关重要。本文将深入探讨这两个事件,并提供大量代码示例,帮助你:
- 掌握 DOMContentLoaded 和 onload 事件的触发时机
- 了解如何使用这两个事件来实现不同的功能
- 学习如何阻止事件传播
- 掌握如何使用相关属性
无论你是初学者还是经验丰富的开发人员,本文都将为你提供一些有价值的信息。
在阅读本文之前,请确保你已经具备以下基础知识:
- HTML 基础
- JavaScript 基础
准备好了吗?让我们开始吧!
✨ 正文
简介
当浏览器加载网页时,会发生一系列事件。其中,DOMContentLoaded
和 onload
两个事件是重要的页面加载事件,用于检测页面加载到不同阶段。
DOMContentLoaded 事件
当 HTML 文档解析完成,并构建了 DOM 树时,会触发 DOMContentLoaded
事件。此时,页面中的所有元素都已加载,但外部资源(例如图片、样式表、脚本等)可能尚未加载完成。
onload 事件
当整个页面加载完成,包括所有外部资源,会触发 onload
事件。
事件处理程序
可以使用 addEventListener()
方法为元素添加 DOMContentLoaded
和 onload
事件处理程序。
代码示例
document.addEventListener("DOMContentLoaded", function() {
// 页面加载完成,DOM 树已构建
});
window.onload = function() {
// 页面加载完成,包括所有外部资源
};
阻止事件传播
可以使用 stopPropagation()
方法阻止事件传播。
代码示例
document.addEventListener("DOMContentLoaded", function(event) {
event.stopPropagation();
// 页面加载完成,DOM 树已构建
});
相关属性
readyState
:用于指示页面的加载状态。
更多信息
- DOMContentLoaded Event: <移除了无效网址>
- Window.onload Event: Window: load event - Web APIs | MDN
代码示例
使用 DOMContentLoaded
事件显示提示信息
<p id="message">页面正在加载...</p>
<script>
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("message").innerHTML = "页面加载完成!";
});
</script>
使用 onload
事件显示图像
<img id="image" src="image.jpg">
<script>
window.onload = function() {
document.getElementById("image").style.display = "block";
};
</script>
使用 DOMContentLoaded
和 onload
事件进行验证
react和vue的比较
相同
1)vitual dom
2)组件化
3)props,单一数据流
不同点
1)react是jsx和模板;(jsx可以进行更多的js逻辑和操作)
2)状态管理(react)
3)对象属性(vue)
4)vue:view——medol之间双向绑定
5)vue:组件之间的通信(props,callback,emit)
x可以进行更多的js逻辑和操作)
2)状态管理(react)
3)对象属性(vue)
4)vue:view——medol之间双向绑定
5)vue:组件之间的通信(props,callback,emit)
[外链图片转存中…(img-sKlTmus3-1718176959883)]