> For the complete documentation index, see [llms.txt](https://docs.webmix.cc/javascript-web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webmix.cc/javascript-web/5.-shi-jian/5.3-window-xiang-guan-shi-jian.md).

# 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>" %}