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