JS中加载文档时如何触发事件

在JavaScript中，有很多种方式可以在文档加载时触发事件。以下是其中几种常见的方法：

1. onload 事件

onload 事件会在整个页面及其所有资源（如图像和样式表）全部加载完毕后触发。可以使用 window.onload 绑定全局的 onload 事件，也可以将其绑定到特定的元素上。

window.onload = function() {
  console.log('整个页面加载完毕！');
};

2. DOMContentLoaded 事件

DOMContentLoaded 事件会在文档解析完毕后触发，不需要等待所有资源（如图像和样式表）加载完毕。这意味着页面上某些元素可能仍然处于加载状态，但可以访问和操纵DOM。

document.addEventListener('DOMContentLoaded', function() {
  console.log('文档解析完毕！');
});

3. defer 和 async 属性

defer 和 async 属性是 <script> 标签上的属性，可以延迟或异步加载脚本，从而提高页面性能。这两个属性也会影响脚本何时运行，进而触发事件的时间点。

defer 属性会使脚本按照它们在文档中的顺序依次加载，但会在文档解析完成后执行。这意味着 defer 脚本在 DOMContentLoaded 事件之前运行，但在 onload 事件之后运行。

<script defer src="script.js"></script>

async 属性会异步地加载脚本，并在加载完成后立即执行。这意味着 async 脚本可能会在 DOMContentLoaded 或 onload 事件之前或之后运行（具体取决于加载速度）。

<script async src="script.js"></script>

4. jQuery 中的 ready 函数

如果您在项目中使用了 jQuery，您可以使用 $(document).ready() 或缩写的 $(function(){}) 函数来触发 DOMContentLoaded 事件。

$(document).ready(function() {
  console.log('文档解析完毕！');
});

5. IE8 及以下版本的兼容性问题

在 IE8 及以下版本中，DOMContentLoaded 事件不被支持。这时可以使用 readystatechange 事件，它会在文档的不同加载状态下被触发。

document.onreadystatechange = function() {
  if (document.readyState == 'interactive') {
    console.log('文档解析完毕！');
  }
};

以上是几种常见的在 JavaScript 中加载文档时触发事件的方法。根据您的具体需求和项目特点，可以选择适合自己的方法。