document` 对象在浏览器中有许多事件可以触发，这些事件允许开发者在特定的时刻对 DOM 进行操作或响应用户的交互。以下是一些常见的 `document` 事件：

### 1. `DOMContentLoaded`

- **描述**: 当初始 HTML 文档被完全加载和解析完成后，`DOMContentLoaded` 事件会被触发，而无需等待样式表、图像和子框架的完全加载。

- **用途**: 通常用于在文档加载完成后立即运行初始化代码。

```javascript

document.addEventListener('DOMContentLoaded', function() {

console.log('DOM fully loaded and parsed');

});

```

### 2. `load`

- **描述**: 当整个页面，包括所有相关资源（如图片、样式表、子框架）加载完成时触发。

- **用途**: 适用于需要确保所有资源都加载完成后再执行的代码。

```javascript

window.addEventListener('load', function() {

console.log('All resources finished loading');

});

```

### 3. `unload`

- **描述**: 当用户离开页面时（例如，关闭标签页、刷新页面或导航到其他页面）触发。

- **用途**: 用于清理操作或保存状态。

```javascript

window.addEventListener('unload', function() {

console.log('Page is unloading');

});

```

### 4. `beforeunload`

- **描述**: 在页面即将卸载之前触发。可以用来提示用户是否真的要离开当前页面。

- **用途**: 用于阻止或提示用户在离开页面时保存未保存的数据。

```javascript

window.addEventListener('beforeunload', function(event) {

event.preventDefault();

event.returnValue='';

});

```

### 5. `focus` 和 `blur`

- **描述**: `focus` 在文档或其子元素获得焦点时触发，`blur` 在失去焦点时触发。

- **用途**: 用于管理焦点状态，例如在用户输入时高亮显示当前输入元素。

```javascript

document.addEventListener('focus', function() {

console.log('Document focused');

}, true);

document.addEventListener('blur', function() {

console.log('Document blurred');

}, true);

```

### 6. `click`

- **描述**: 当用户在文档中点击某个元素时触发。

- **用途**: 用于处理用户点击事件。

```javascript

document.addEventListener('click', function(event) {

console.log('Document clicked');

});

```

### 7. `visibilitychange`

- **描述**: 当文档的可见性状态改变时触发（例如，切换到其他标签页）。

- **用途**: 用于优化资源使用或暂停不必要的活动。

```javascript

document.addEventListener('visibilitychange', function() {

if (document.visibilityState==='hidden') {

console.log('Document is now hidden');

} else {

console.log('Document is now visible');

}

});

```

### 8. `readystatechange`

- **描述**: 当文档的加载状态（`loading`, `interactive`, `complete`）改变时触发。

- **用途**: 用于监控文档加载的不同阶段。

```javascript

document.addEventListener('readystatechange', function() {

console.log('Ready state changed:', document.readyState);

});

```

这些事件提供了许多机会来响应用户交互和文档状态的变化，使得开发者能够创建更动态和响应式的页面。

我的文章可能还有不足之处，如有不同意见，请留言讨论。

前端开发中，我们经常需要知道网页的DOM（文档对象模型）是否已经加载完毕。对于初学者来说，这可能听起来有些复杂，但其实我们可以通过简单的JavaScript代码来实现这一目标，而不需要依赖任何框架或库。本文将带你一步步了解如何实现这一点。

什么是DOM？

在讲具体方法之前，我们先来了解一下什么是DOM。DOM（文档对象模型）是网页的结构化表示，它将HTML文档表示为一个树形结构。浏览器会解析HTML并生成DOM树，我们可以使用JavaScript对这个DOM树进行操作，从而改变网页的内容和样式。

检查DOM是否准备好的方法

要检查DOM是否准备好，我们主要使用两个事件：DOMContentLoaded和load。它们的区别在于：

• DOMContentLoaded事件在初始的HTML被完全加载和解析完成后触发，但不等待样式表、图片等资源加载。
• load事件在页面所有资源（包括样式表、图片等）加载完成后触发。

我们可以使用这两个事件来确定页面的加载状态，并结合document.readyState属性来判断DOM是否已准备好。

具体代码实现

下面是具体的代码示例：

window.addEventListener("DOMContentLoaded", ()=> {
  if (document.readyState==="complete") {
    console.log('DOM已完全加载');
  } else if (document.readyState==="interactive") {
    console.log('DOM已准备好，但资源仍在加载');
  }
});

window.addEventListener("load", ()=> {
  if (document.readyState==="complete") {
    console.log('所有资源已加载完成');
  } else if (document.readyState==="interactive") {
    console.log('DOM已准备好，但资源仍在加载');
  }
});

在这段代码中，我们使用了window.addEventListener来监听DOMContentLoaded和load事件。当这些事件触发时，会执行相应的回调函数。在回调函数中，我们检查document.readyState属性的值：

• 如果值是'complete'，表示DOM已经完全加载，所有资源也已经加载完成。
• 如果值是'interactive'，表示DOM已准备好，但一些资源（如图片、框架等）仍在加载中。

为什么要这样做？

了解DOM的加载状态对于前端开发非常重要。例如，如果你想在DOM完全加载后执行一些初始化操作，就需要确保这些操作不会在DOM未准备好的情况下执行。通过监听这些事件，你可以确保在合适的时机执行相应的代码，提高代码的稳定性和性能。

结束

在不使用任何JavaScript框架或库的情况下，我们可以通过监听DOMContentLoaded和load事件，以及检查document.readyState属性的值，来确定DOM是否已准备好。这种方法简单高效，非常适合初学者学习和使用。