---
# System prepended metadata

title: element.addEventListener 監聽事件
tags: [ALPHACampWeek3]

---

###### tags:`ALPHACampWeek3`

element.addEventListener 監聽事件
===

使用監聽事件的好處
---


1.  觸發事件的元素和監聽對象的不必要是同一個，我們監聽的是父元素 #controller，實際被點擊的元素是子元素 btn。

2. 第二個好處非常重要，我們在後面的實作中會介紹背後的 bubbling 原理。

事件監聽函示擺放位置
---
```javascript=
element.addEventListener('click', greeting)
// handler
function greeting() {
  alert('handling event')
}
```
- 也可以使用匿名函數
```javascript=
element.addEventListener('click', function () {
  alert('handling event')
})
```

釋放記憶體
---
不用的時候可以釋放記憶體減少負擔
- 一般建議使用有名字的函數來命名
```javascript=
element.removeEventListener("click", handler)
```

# 常見監聽事件

滑鼠事件
---
```
click - 鼠標點擊元素
mousemove - 鼠標滑過元素
mouseout - 鼠標離開元素
```

鍵盤事件
---
```
keydown - 點擊且長按一個鍵時
keyup - 放開按鍵時
```

表單事件
---
- 你的行為會受到 DOM 物件FormElementInterface 監控
```
submit - 提交表單時
focus - 點擊某個輸入框時
input - 輸入框內容改變時
```
document 事件
---
- 在實務上除了注意檔案引入位置(避免出現在HTML前)，在 JavaScript 時還會再包一層 DOMContentLoaded，確保萬無一失。
```
DOMContentLoaded - 當 HTML 下載完成並完整的建立 DOM 模型時觸發
```

監聽事件參考資料
---
https://ithelp.ithome.com.tw/articles/10192015

