onload()美元之间的区别。准备好了吗？-JavaScript中文网-JavaScript教程资源分享门户

当我们打开一个网页时，网页中的所有资源（如图片、CSS、JavaScript等）都需要被加载。而onload()是JavaScript中一个非常重要的事件，它表示当页面或者某个资源加载完成后所执行的函数。

但是，在onload()之前有很多类似的事件。这些事件主要包括onreadystatechange、DOMContentLoaded和window.onload。

onreadystatechange

onreadystatechange是针对XMLHttpRequest对象的，用于追踪AJAX请求的状态。随着请求状态的改变，该事件将被触发，并且可以利用readyState属性获取当前的状态。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.responseText;
  }
};
xhr.open("GET", "ajax_info.txt", true);
xhr.send();

DOMContentLoaded

DOMContentLoaded事件表示当HTML文档被完全加载和解析后所执行的函数。这意味着不需要等待样式表、图像和子框架的完全加载就可以进行JavaScript操作。

document.addEventListener("DOMContentLoaded", function(event) { 
    // 执行相关操作
});

window.onload

window.onload事件表示在页面上所有资源都已经加载完成并且初始化之后所执行的函数。当同时使用window.onload和DOMContentLoaded时，window.onload会在DOMContentLoaded之后执行。

window.onload = function() {
    // 执行相关操作
};

通过以上对比，我们可以得出以下结论：

onreadystatechange：用于XMLHttpRequest对象的状态追踪。
DOMContentLoaded：在HTML文档解析完成后立即执行，无需等待其他资源加载完成。
window.onload：当页面上所有资源都被加载和初始化之后执行。

因此，在开发中，我们应该根据实际情况来选择使用哪种事件。如果需要追踪AJAX请求状态，则使用onreadystatechange；如果只需要在HTML文档完全解析后立即执行JavaScript代码，则使用DOMContentLoaded；如果需要在页面上所有资源都被加载和初始化之后执行JavaScript代码，则使用window.onload。

最后，为了防止事件冲突，我们可以使用以下方式来避免：

if (document.readyState === 'complete') {
  // 页面已经加载完毕
} else {
  window.addEventListener('load', function () {
    // 页面已经加载完毕
  });
}

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/15135