如果我期望，页面加载和解析完成之后出发事件，我该怎么做【热度: 299】

关键词：DOMContentLoaded 和 onload 事件

如果期望在页面加载和解析完成之后触发事件，可以通过以下几种方式实现：

一、使用DOMContentLoaded事件

传统方式：
- 使用addEventListener方法来监听DOMContentLoaded事件。当页面的 DOM 结构加载和解析完成后，该事件会被触发。
```
document.addEventListener("DOMContentLoaded", function () {
  // 这里的代码会在页面 DOM 加载和解析完成后执行
  console.log("DOM 加载和解析完成");
});
```
- 在这个回调函数中，可以执行任何需要在 DOM 准备好后执行的操作，如获取 DOM 元素、设置事件监听器等。

现代方式（异步函数）：

在支持 ES6 及以上版本的环境中，可以使用异步函数和await来等待DOMContentLoaded事件。这种方式使代码更加简洁和易读。

async function onDOMLoaded() {
  await new Promise((resolve) => {
    if (document.readyState === "loading") {
      document.addEventListener("DOMContentLoaded", resolve);
    } else {
      resolve();
    }
  });
  // 这里的代码会在页面 DOM 加载和解析完成后执行
  console.log("DOM 加载和解析完成");
}

onDOMLoaded();

这种方式使用了异步函数和 Promise，确保在DOMContentLoaded事件触发后才执行后续的代码。

二、使用jQuery（如果项目中使用了 jQuery）

$(document).ready()方法：
- jQuery 提供了$(document).ready()方法，它在 DOM 加载和解析完成后执行。这个方法与原生的DOMContentLoaded事件类似，但在不同的浏览器中有更好的兼容性。
```
$(document).ready(function () {
  // 这里的代码会在页面 DOM 加载和解析完成后执行
  console.log("DOM 加载和解析完成（使用 jQuery）");
});
```
- 在这个回调函数中，可以使用 jQuery 的选择器和方法来操作 DOM 元素。

三、使用load事件（但不推荐作为首选）

window.onload方法：
- window.onload事件在整个页面（包括所有的资源如图片、样式表等）完全加载后触发。虽然它也能确保页面加载完成后执行代码，但通常比DOMContentLoaded事件触发得更晚。
```
window.onload = function () {
  // 这里的代码会在页面完全加载后执行
  console.log("页面完全加载完成");
};
```
- 如果只需要在 DOM 加载和解析完成后执行代码，使用DOMContentLoaded事件会更快，因为它不需要等待所有资源的加载。

如果我期望，页面加载和解析完成之后出发事件， 我该怎么做【热度: 299】

如果我期望，页面加载和解析完成之后出发事件，我该怎么做【热度: 299】