document` 對(duì)象在瀏覽器中有許多事件可以觸發(fā)，這些事件允許開(kāi)發(fā)者在特定的時(shí)刻對(duì) DOM 進(jìn)行操作或響應(yīng)用戶(hù)的交互。以下是一些常見(jiàn)的 `document` 事件：

### 1. `DOMContentLoaded`

- **描述**: 當(dāng)初始 HTML 文檔被完全加載和解析完成后，`DOMContentLoaded` 事件會(huì)被觸發(fā)，而無(wú)需等待樣式表、圖像和子框架的完全加載。

- **用途**: 通常用于在文檔加載完成后立即運(yùn)行初始化代碼。

```javascript

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

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

});

```

### 2. `load`

- **描述**: 當(dāng)整個(gè)頁(yè)面，包括所有相關(guān)資源（如圖片、樣式表、子框架）加載完成時(shí)觸發(fā)。

- **用途**: 適用于需要確保所有資源都加載完成后再執(zhí)行的代碼。

```javascript

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

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

});

```

### 3. `unload`

- **描述**: 當(dāng)用戶(hù)離開(kāi)頁(yè)面時(shí)（例如，關(guān)閉標(biāo)簽頁(yè)、刷新頁(yè)面或?qū)Ш降狡渌?yè)面）觸發(fā)。

- **用途**: 用于清理操作或保存狀態(tài)。

```javascript

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

console.log('Page is unloading');

});

```

### 4. `beforeunload`

- **描述**: 在頁(yè)面即將卸載之前觸發(fā)。可以用來(lái)提示用戶(hù)是否真的要離開(kāi)當(dāng)前頁(yè)面。

- **用途**: 用于阻止或提示用戶(hù)在離開(kāi)頁(yè)面時(shí)保存未保存的數(shù)據(jù)。

```javascript

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

event.preventDefault();

event.returnValue='';

});

```

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

- **描述**: `focus` 在文檔或其子元素獲得焦點(diǎn)時(shí)觸發(fā)，`blur` 在失去焦點(diǎn)時(shí)觸發(fā)。

- **用途**: 用于管理焦點(diǎn)狀態(tài)，例如在用戶(hù)輸入時(shí)高亮顯示當(dāng)前輸入元素。

```javascript

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

console.log('Document focused');

}, true);

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

console.log('Document blurred');

}, true);

```

### 6. `click`

- **描述**: 當(dāng)用戶(hù)在文檔中點(diǎn)擊某個(gè)元素時(shí)觸發(fā)。

- **用途**: 用于處理用戶(hù)點(diǎn)擊事件。

```javascript

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

console.log('Document clicked');

});

```

### 7. `visibilitychange`

- **描述**: 當(dāng)文檔的可見(jiàn)性狀態(tài)改變時(shí)觸發(fā)（例如，切換到其他標(biāo)簽頁(yè)）。

- **用途**: 用于優(yōu)化資源使用或暫停不必要的活動(dòng)。

```javascript

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

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

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

} else {

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

}

});

```

### 8. `readystatechange`

- **描述**: 當(dāng)文檔的加載狀態(tài)（`loading`, `interactive`, `complete`）改變時(shí)觸發(fā)。

- **用途**: 用于監(jiān)控文檔加載的不同階段。

```javascript

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

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

});

```

這些事件提供了許多機(jī)會(huì)來(lái)響應(yīng)用戶(hù)交互和文檔狀態(tài)的變化，使得開(kāi)發(fā)者能夠創(chuàng)建更動(dòng)態(tài)和響應(yīng)式的頁(yè)面。

我的文章可能還有不足之處，如有不同意見(jiàn)，請(qǐng)留言討論。

前端開(kāi)發(fā)中，我們經(jīng)常需要知道網(wǎng)頁(yè)的DOM（文檔對(duì)象模型）是否已經(jīng)加載完畢。對(duì)于初學(xué)者來(lái)說(shuō)，這可能聽(tīng)起來(lái)有些復(fù)雜，但其實(shí)我們可以通過(guò)簡(jiǎn)單的JavaScript代碼來(lái)實(shí)現(xiàn)這一目標(biāo)，而不需要依賴(lài)任何框架或庫(kù)。本文將帶你一步步了解如何實(shí)現(xiàn)這一點(diǎn)。

什么是DOM？

在講具體方法之前，我們先來(lái)了解一下什么是DOM。DOM（文檔對(duì)象模型）是網(wǎng)頁(yè)的結(jié)構(gòu)化表示，它將HTML文檔表示為一個(gè)樹(shù)形結(jié)構(gòu)。瀏覽器會(huì)解析HTML并生成DOM樹(shù)，我們可以使用JavaScript對(duì)這個(gè)DOM樹(shù)進(jìn)行操作，從而改變網(wǎng)頁(yè)的內(nèi)容和樣式。

檢查DOM是否準(zhǔn)備好的方法

要檢查DOM是否準(zhǔn)備好，我們主要使用兩個(gè)事件：DOMContentLoaded和load。它們的區(qū)別在于：

• DOMContentLoaded事件在初始的HTML被完全加載和解析完成后觸發(fā)，但不等待樣式表、圖片等資源加載。
• load事件在頁(yè)面所有資源（包括樣式表、圖片等）加載完成后觸發(fā)。

我們可以使用這兩個(gè)事件來(lái)確定頁(yè)面的加載狀態(tài)，并結(jié)合document.readyState屬性來(lái)判斷DOM是否已準(zhǔn)備好。

具體代碼實(shí)現(xiàn)

下面是具體的代碼示例：

window.addEventListener("DOMContentLoaded", ()=> {
  if (document.readyState==="complete") {
    console.log('DOM已完全加載');
  } else if (document.readyState==="interactive") {
    console.log('DOM已準(zhǔn)備好，但資源仍在加載');
  }
});

window.addEventListener("load", ()=> {
  if (document.readyState==="complete") {
    console.log('所有資源已加載完成');
  } else if (document.readyState==="interactive") {
    console.log('DOM已準(zhǔn)備好，但資源仍在加載');
  }
});

在這段代碼中，我們使用了window.addEventListener來(lái)監(jiān)聽(tīng)DOMContentLoaded和load事件。當(dāng)這些事件觸發(fā)時(shí)，會(huì)執(zhí)行相應(yīng)的回調(diào)函數(shù)。在回調(diào)函數(shù)中，我們檢查document.readyState屬性的值：

• 如果值是'complete'，表示DOM已經(jīng)完全加載，所有資源也已經(jīng)加載完成。
• 如果值是'interactive'，表示DOM已準(zhǔn)備好，但一些資源（如圖片、框架等）仍在加載中。

為什么要這樣做？

了解DOM的加載狀態(tài)對(duì)于前端開(kāi)發(fā)非常重要。例如，如果你想在DOM完全加載后執(zhí)行一些初始化操作，就需要確保這些操作不會(huì)在DOM未準(zhǔn)備好的情況下執(zhí)行。通過(guò)監(jiān)聽(tīng)這些事件，你可以確保在合適的時(shí)機(jī)執(zhí)行相應(yīng)的代碼，提高代碼的穩(wěn)定性和性能。

結(jié)束

在不使用任何JavaScript框架或庫(kù)的情況下，我們可以通過(guò)監(jiān)聽(tīng)DOMContentLoaded和load事件，以及檢查document.readyState屬性的值，來(lái)確定DOM是否已準(zhǔn)備好。這種方法簡(jiǎn)單高效，非常適合初學(xué)者學(xué)習(xí)和使用。