---
tags: 軟體工程師體驗營 - 2023
---

# 🏅 JS 任務 Day23 - addEventListener 事件監聽

### addEventListener 語法
`.addEventListener()` 前面會放選取要綁定監聽事件的元素，
`addEventListener()` 內通常會代入兩個參數，第一個參數為事件類型，第二個參數觸發事件後要執行的動作（函式）

範例：
HTML

<button class="domElement">123</button>

JS

const domElement = document.querySelector(".domElement");

domElement.addEventListener("click", function(e) {
  //  觸發時欲執行的程式
  console.log(e);
    
  // 以此範例來說，點擊 button .domElement 元素時就會印出參數 e（參數名稱可以自訂，這邊定為 e 有 event 的意思）
  // 此參數為一個事件物件，包含了與此事件有關的屬性
  // 可以嘗試觀看 e 的內容
  // 像是： 
  // target 屬性為觸發事件時的元素
  // type 屬性為觸發事件的類型  
});

> 在指定元素（domElement）監聽特定事件（此範例為 click 事件，需使用引號），當該事件觸發時會執行後方函式，函式有一個參數為事件物件

### 常用事件介紹
1. click：滑鼠點擊元素時會觸發
2. change：當表單內容改變時會觸發
3. scroll：滾動時觸發
> 更多可以再觀看 [文件](https://developer.mozilla.org/zh-TW/docs/Web/Events)

補充：
- [MDN 文件](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)
- https://israynotarray.com/javascript/20190919/1187569768/

問題
---
監聽下方元素（.plusOne），當點擊「+1」按鈕時，可以讓 sum 的值 +1，並使用 console.log 印出 sum。

HTML

<button type="button" class="plusOne">＋1</button>

JS

let sum = 0;
/* 程式碼撰寫 */
...

## 回報流程

1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）


<!-- 解答：

let sum = 0;
/* 程式碼撰寫 */
const plusOne = document.querySelector(".plusOne");

plusOne.addEventListener("click", function() {
sum++;
console.log(sum);
})
-->

回報區
---

| 報數 | Discord 名字 | Codepen／其他回饋 |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
| 1 | 翔.#0859|[Codepen](https://codepen.io/energy95272z/pen/jOeRjLb?editors=0011)|
| 2 | ChaosTu#9311 |[Codepen](https://codepen.io/torotu/pen/KKGYjeg?editors=1011)|
| 3 | Rochel#4754 | [Codepen](https://codepen.io/rochelwang1205/pen/MWPRMqm) |
| 4 | 銀光菇#1692 | [Codepen](https://codepen.io/genesynthesis/pen/mdzgNbb) |
| 5 | Eero#1147 | [Codepen](https://codepen.io/Eero-Chiao/pen/ExdJqgd) |
| 6 | Quantum#6093 | [Codepen](https://codepen.io/Min-Hao-Hung/pen/VwENoKo)|
| 7 | Jacky7035#9423 | [Codepen](https://codepen.io/adens123/pen/ZEqZgXR)|
| 8 | 喬喬#2824 | [Codepen](https://codepen.io/joanne-wei/pen/NWOmQza)|
| 9 | Uli#1946 | [Codepen](https://codepen.io/uli1313/pen/poxBMKV)|
| 10 | snow#0255 | [Codepen](https://codepen.io/snow21723/pen/LYgoPgy)|
| 11 | SKey#9905 | [Codepen](https://codepen.io/Dale-Chien/pen/BaqeaLE)|
| 12 | peihsuan#6315 | [Codepen](https://codepen.io/peihsuanlai/pen/eYPoqRK)|
| 13 | 鄭舜仁#6606 | [Codepen](https://codepen.io/randomno/pen/RwemwxE)|
| 14 | Berlin#7338 | [Codepen](https://codepen.io/3qberlin/pen/QWZRjGW?editors=1010)|
| 15 | Akira#9996 | [Codepen](https://codepen.io/Akira-Chen/pen/BaqeoxB)|
| 16 | K（アギルダー）#0386 | [Codepen](https://codepen.io/klay376014/pen/xxyNwMj)|
| 17 | 兔子#6746 | [Codepen](https://codepen.io/CarrotDetector/pen/LYgoNVp)|
|18|wiimax#4564|[Codepen](https://codepen.io/willismax/pen/JjmqXbY?editors=0011)
|19|東東#5015|[Codepen](https://codepen.io/wearymask/pen/eYPaJML)
|20|Yvonne#2721|[Codepen](https://codepen.io/Evonne/pen/XWxwdqb?editors=1011)
|21|Janet#5784|[Codepen](https://codepen.io/janetlinnn/pen/PoyvzzX?editors=1011)
|22|HsuanTang#1349|[Codepen](https://codepen.io/HsuanTang/pen/RwemRKY)
| 23 | N0c7iluc3n7#4390 | [Codepen](https://codepen.io/huang-yu-cheng/pen/xxyNOQW?editors=1111)
| 24 | jia yu#8896 | [Codepen](https://codepen.io/fjqxaznl-the-reactor/pen/VwEOjEV?editors=1111)
| 25 | David0799#4415 | [Codepen](https://codepen.io/David0799/pen/GRYajbr?editors=1010)
| 26 | Jennifer Chuang#3937 | [Codepen](https://codepen.io/yujhen/pen/oNaRYyZ?editors=1111)|
| 27 | 姜承#8204 | [Codepen](https://codepen.io/Troy0718/pen/mdzYOox)|
| 28 | Ataraxia#9977 | [Codepen](https://codepen.io/ataraxia8888/pen/qBJPWag)
| 29 |雲漢#5319|[codepen](https://codepen.io/keon981/pen/NWOVaWX?editors=1011)
| 30 |FanJJ#8061|[codepen](https://codepen.io/yfchenn/pen/vYVweEX?editors=1011)
| 31 |Billy_Ti#9716|[codepen](https://codepen.io/Ti-Show/pen/qBJGPem?editors=1011)
| 32 | 辣椒#1002 | [Codepen](https://codepen.io/chilichen118/pen/oNaRoyy) |
| 33 | Kulimusoda#2785 | [Codepen](https://codepen.io/yuch3n_chen/pen/gOBJoRa?editors=1011) |
| 34 | gahwa#3562 | [Codepen](https://codepen.io/gahwa17/pen/jOeozyO) |
| 35 | JimWang#6134 | [Codepen](https://codepen.io/Jim-Wang-the-selector/pen/dygBPXw?editors=1011) |
|36|PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/RwezPoo)
|37|yoyo#1003|[CodePen](https://codepen.io/crpbugqy-the-typescripter/pen/KKGLXKe)|
|38|Snadra#1987|[CodePen](https://codepen.io/mlqmhltg/pen/GRYbXOK)|
|39|townyuan#2653|[CodePen](https://codepen.io/townyuan/pen/xxyomxp)|
| 40 | Tami#6742 | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/jOegWvy) |
| 41 | liam9930#4129 | [Codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/RwqwjGR?editors=1011) |
| 42 | JasonChang#7847 | [Codepen](https://codepen.io/jsonChangJava/pen/eYQNpVL?editors=1001) |
|43|肉個阿倫#7172|[Codepen](https://codepen.io/i9574385/pen/KKrpqZy)|
| 44 | Kaya#8857 | [Codepen](https://codepen.io/laron9486/pen/jOQWxBa) |
| 45 | jun777#2468 | [Codepen](https://codepen.io/js18151102/pen/GRwqwqx?editors=1011) |
| 46 | PoWei#8484 | [Codepen](https://codepen.io/harrison-wei-lai/pen/BaGRPvW?editors=1111) |
| 47 | Ann Chou#0146 | [Codepen](https://codepen.io/annchou_illu/pen/mdQMBjK) |
| 48 | 小明#4408 | [Codepen](https://codepen.io/ujlylmbv-the-lessful/pen/oNQyVbJ) |
| 49 | hoyiiiii | [Codepen](https://codepen.io/hoyii/pen/dPbGQKg?editors=1011) |