js里DOM结构加载完后触发的是什么事件

在JavaScript开发中，了解DOM（文档对象模型）结构加载完成后触发的事件至关重要，这能帮助开发者在合适的时机执行代码逻辑。那么，js里DOM结构加载完后触发的是什么事件呢？

最常用的是DOMContentLoaded事件。当页面的DOM结构加载完成，不包括图片等外部资源加载完成时，就会触发该事件。例如，页面中有多个大图片，但我们想在页面基本结构就绪后立即执行一些操作，如初始化菜单交互、绑定元素点击事件等，就可以使用DOMContentLoaded。代码实现通常如下：

document.addEventListener('DOMContentLoaded', function () {
    // 在这里编写需要执行的代码
    let menu = document.getElementById('menu');
    menu.addEventListener('click', function () {
        console.log('菜单被点击了');
    });
});

另一个相关事件是load事件。不过，load事件与DOMContentLoaded不同，它是在页面的所有资源，包括图片、脚本等全部加载完成后才会触发。如果你的代码需要依赖所有资源都加载完毕才能执行，比如要获取图片加载后的实际尺寸来进行页面布局调整，就适合使用load事件。示例代码如下：

window.addEventListener('load', function () {
    let img = document.getElementById('myImage');
    console.log('图片宽度：', img.width);
    console.log('图片高度：', img.height);
});

还有readystatechange事件，它可以监控文档的就绪状态变化。当文档的readyState属性值发生改变时触发此事件。readyState有三个可能的值：loading（正在加载文档）、interactive（文档已被解析，但如图片等子资源仍在加载）、complete（文档和所有资源都已加载完成）。通过监听这个事件，我们可以根据不同的就绪状态来执行相应的代码。

在实际项目中，要根据具体需求合理选择使用这些事件。正确把握DOM结构加载完成后触发的事件，能让JavaScript代码更高效、准确地运行，提升用户体验。