---
# System prepended metadata

title: "\U0001F3C5 JS 任務 Day23 - addEventListener 事件監聽"
tags: [軟體工程師體驗營 - 2024]

---

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

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

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

範例：
HTML
```htmlembedded=
<button class="domElement">123</button>
```
JS
```javascript=
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
```htmlembedded=
<button type="button" class="plusOne">＋1</button>
```
JS
```javascript=
let sum = 0;
/* 程式碼撰寫 */
...
```

## 回報流程

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

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：  

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

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

回報區
---

| 報數 | Discord 名字  |  Codepen／其他回饋                                                         |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
|  01  | 詹姆士 | [Codepen](https://codepen.io/z111048/pen/RwmGXGM?editors=1011) |
|  02  | jerry | [Codepen](https://codepen.io/sony791210/pen/bGywXwz) |
|  03  | Tough life | [Codepen](https://codepen.io/hakuei0115/pen/wvbzVoR?editors=1111) |
|  04  | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/GRajVWB) |
|  05  | Michelle0417 |[Codepen](https://codepen.io/michelle0417/pen/JjqRgbW) |
|  06  | han | [Codepen](https://codepen.io/iamHanCheng/pen/dyEpxRJ) |
|  07  | Aya | [Codepen](https://codepen.io/NoNameNote/pen/KKLgOZw) |
|  08  | Jiahe | [Codepen](https://codepen.io/Andywang-95/pen/oNRzKKM?editors=1011) |
|  09  | kawa | [Codepen](https://codepen.io/z83xji6/pen/YzbpKqB?editors=1011) |
|  10  | Chia Pin | [Codepen](https://codepen.io/joker-cat/pen/WNBoeGx) |
|  11  | macihuang | [Codepen](https://codepen.io/macy1215/pen/rNgWBpd) |
|  12  | Ariel | [Codepen](https://codepen.io/ariel0510/pen/BaeQBrK?editors=1011) |
|  13  | Antonio | [Codepen](https://codepen.io/gwhvusel-the-builder/pen/JjqbPzV) |
|  14  | easonpan | [Codepen](https://codepen.io/easonpan0904/pen/ExzNxVJ) |
|  15  | JUN_ | [Codepen](https://codepen.io/Jun-L/pen/mdYOdaB?editors=1011) |
|  16  | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/mdYOyrL?editors=1011) |
|  17  | yunyouob | [Codepen](https://codepen.io/ozkkvlsu-the-animator/pen/JjqboWN?editors=1011)|
|  18  | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/qBGqZPQ)|
|  19  | JY | [Codepen](https://codepen.io/jylee0805/pen/pomNbeZ?editors=1011)|
|  20  | s870012 | [Codepen](https://codepen.io/idzrvbnl-the-bashful/pen/QWRGEOx?editors=1111)|
|  21  | Mionne | [Codepen](https://codepen.io/neohyntw/pen/jOoVaBz)|
|  22  | Emma | [Codepen](https://codepen.io/huang_L/pen/vYwydVo)|
|  23  | Shen | [Codepen](https://codepen.io/yan-Shen-the-decoder/pen/PovbyEo)|
|  24  | boin | [Codepen](https://codepen.io/boinji/pen/OJYbeZg)|
|  25  | Zander | [Codepen](https://codepen.io/chuangmaster/pen/pomRgMJ) |
|  26  | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/bGyqbZV?editors=1011) |
|  27  | haojing | [Codepen](https://codepen.io/hjxu/pen/yLWpwQr?editors=1011) |
| 28 | ChrisLin | [Codepen](https://codepen.io/vllzfzco-the-reactor/pen/abrxgER?editors=1111) |

---

<!--
|  num  | user | [Codepen]() |
-->