Mr.J-- jQuery学习笔记(二十五)--监听DOM加载_jq 监听动态添加的dom加载完-CSDN博客

这篇博客探讨了jQuery中DOM加载的不同事件，包括onload和DOMContentLoaded的区别。onload等待DOM及所有资源加载完成，而DOMContentLoaded仅等待DOM结构加载。文章还详细介绍了attachEvent()的使用以及document.readyState的三个状态：loading、interactive和complete，说明了readystatechange事件在状态变化时的作用。

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

页面元素

<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>

onload和DOMContentLoaded对于DOM事件加载的区别

onload事件会等到DOM元素加载完毕, 并且还会等到资源也加载完毕才会执行
DOMContentLoaded事件只会等到DOM元素加载完毕就会执行回调

window.onload = function (ev) {
	 var res = document.querySelectorAll("div");
	 console.log(res);
	console.log("onload");
}

document.addEventListener("DOMContentLoaded", function () {
	 var res = document.querySelectorAll("div");
	 console.log(res);
	console.log("DOMContentLoaded");
});

使用attachEvent()

使用IE8进行

document.readyState属性有如下的状态
uninitialized - 还未开始载入
loading - 载入中
interactive - 已加载，文档与用户可以开始交互
complete - 载入完成

onreadystatechange事件就是专门用于监听document.readyState属性的改变的

document.attachEvent("onreadystatechange", function () {
	if(document.readyState == "complete"){
		console.log("onreadystatechange");

});

document.readyState

一个document 的 Document.readyState 属性描述了文档的加载状态。

当该属性值发生变化时，会在document 对象上触发readystatechange事件。

值

一个文档的 readyState 可以是以下之一：

loading / 正在加载

document 仍在加载。

interactive / 可交互

文档已被解析，"正在加载"状态结束，但是诸如图像，样式表和框架之类的子资源仍在加载。

complete / 完成

文档和所有子资源已完成加载。表示 load状态的事件即将被触发。

当这个属性的值变化时，document 对象上的 readystatechange事件将被触发。

语法

let string = document.readyState;

// "complete"

例子

不同的准备状态

switch (document.readyState) {
  case "loading":
    // 表示文档还在加载中，即处于“正在加载”状态。
    break;
  case "interactive":
    // 文档已经结束了“正在加载”状态，DOM元素可以被访问。
    // 但是像图像，样式表和框架等资源依然还在加载。
    var span = document.createElement("span");
    span.textContent = "A <span> element.";
    document.body.appendChild(span);
    break;
  case "complete":
    // 页面所有内容都已被完全加载.
    let CSS_rule = document.styleSheets[0].cssRules[0].cssText;
    console.log(`The first CSS rule is: ${CSS_rule }`);
    break;
}

// 模拟 DOMContentLoaded/ jquery ready
document.onreadystatechange = function () {
  if (document.readyState === "interactive") {
    initApplication();
  }
}

// 模拟 load 事件
document.onreadystatechange = function () {
  if (document.readyState === "complete") {
    initApplication();
  }
}

资料来源：document.readyState