js中什么事件是在dom结构加载完触发的

Javascript 中 DOM 结构加载完触发的事件

在Javascript中，我们频繁需要知道DOM（文档对象模型）结构何时加载完成，以便可以对其进行操作。通常情况下，有几个事件可以用来检测DOM的加载情况。

1. load 事件

最基础的事件是 load，当所有内容（包括图像、脚本文件等）都完全加载后，这个事件被触发。

window.addEventListener('load', function() {
    console.log('所有内容都加载完成了！');
});

然而，我们通常不需要等到所有资源都加载完成，只需要DOM结构准备好即可。

2. DOMContentLoaded 事件

DOMContentLoaded 事件在DOM结构加载完成后就会触发，而不必等待样式、图片等外部资源的加载。

document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM结构已加载完成！');
});

这个事件对于迅速加载和初始化页面上的Javascript代码非常有用。

3. readystatechange 事件

另一个较少使用的是 readystatechange 事件，它可以监控 DOM 的加载状态。

document.onreadystatechange = function() {
    if (document.readyState === 'interactive') {
        console.log('DOM正在加载中，尚不可交互！');
    } else if (document.readyState === 'complete') {
        console.log('DOM加载完成！');
    }
};

总结

以上三个事件都可以用来检测DOM的加载状态，但最常用的是 DOMContentLoaded 事件。出于它能在DOM准备就绪时提供最快的响应，允许我们及时进行页面初始化和交互。

在实际开发中，推荐使用 DOMContentLoaded 事件来代替 load 事件，除非你确实需要等待页面所有资源加载完成。这样做可以加快页面响应速度，尽也许减少损耗用户体验。

本文由IT视界版权所有,禁止未经同意的情况下转发