# 5.3 window 及 document 事件

## 載入的相關事件

### DOMContentLoaded

```javascript
document.addEventListener("DOMContentLoaded", function(){
  // DOM 載入完成之後
});
```

### load

```javascript
window.addEventListener("load", function(){
  // 圖片等資源載入完成之後
});
```

### 實測比較

DOMContentLoaded 裡的程式，會比較先執行到。例：

{% embed url="<https://codepen.io/carlos411/pen/gOrgXEX>" %}

### 範例：loading 畫面蓋住整個螢幕，load 事件觸發後，將 loading 畫面移除

{% embed url="<https://codepen.io/carlos411/pen/JjrQOoq>" %}

## window resize 事件

```javascript
window.addEventListener("resize", function(){
  // 使用者若有改變視窗大小，就執行這裡的程式
});
```

例：

{% embed url="<https://codepen.io/carlos411/pen/eYZgeaq>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.webmix.cc/javascript-web/5.-shi-jian/5.3-window-xiang-guan-shi-jian.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.