---
tags: 30 天軟體工程師體驗營｜2025
---
> 建議觀看的影音章節：
> JS - DOM
>
# 🏅 JS 任務 Day22 - 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 | 4chan | [Codepen](https://codepen.io/ijuolaqc-the-looper/pen/ZYGYByJ?editors=1111) |
| 2 | dean | [Codepen](https://codepen.io/ch933114/pen/RNPNovN?editors=1111) |
| 3 | jingle0900 | [Codepen](https://codepen.io/EvaLi0472/pen/RNPNKNW) |
| 4 | oyll | [Codepen](https://codepen.io/dizzydog-rgb/pen/wBaBgVX?editors=1011) |
| 5|JHT|[Codepen](https://codepen.io/juanht/pen/zxGxNwX?editors=1011)|
| 6 | ying | [Codepen](https://codepen.io/Lara-Lin/pen/RNPNpRx) |
| 7 | RUDY | [Codepen](https://codepen.io/Rudy-crw/pen/GgJgWdX?editors=1111) |
|8|Saika|[CodePen](https://codepen.io/saika4501/pen/NPqPjKW?editors=1111)|
|9|力文|[CodePen](https://codepen.io/liwenchiou/pen/LEVEyGr?editors=1011)|
| 10| 7Lun | [Day22-Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/zxGxwML?editors=1011) |
| 11 | nora_zi | [Codepen](https://codepen.io/Nora-Ch/pen/YPXPQyX?editors=1111) |
| 12 | B | [Codepen](https://codepen.io/Babel777/pen/YPXPVKJ) |
| 13 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/wBaBeYy?editors=1011) |
| 14 | WEIWEI | [Codepen](https://codepen.io/weiwei93/pen/dPoPNJG) |
|15|蛋殼|[Codepen](https://codepen.io/weybrian/pen/ogXgpEG)
| 16 | pastor | [Codepen](https://codepen.io/peter_hung/pen/xbGbqLg) |
| 17 | WAWATA | [Codepen](https://codepen.io/wa-wa-GNOHC-WA-Wa/pen/Kwpwvrw?editors=1111) |
| 18 | HawkeyeLin | [Codepen](https://codepen.io/long-long/pen/gbpbzbo) |
| 19 | Holly | [Codepen](https://codepen.io/LEE-HOLLY/pen/NPqPMWL) |
| 20 | kelsonhouse|[Codepen](https://codepen.io/Kelson-House/pen/ByNyxGb?editors=1011)|
| 21 | Hugh|[Codepen](https://codepen.io/Hugh-Chen/pen/wBaBXea?editors=1111)|
| 22 | Chuang | [Codepen](https://codepen.io/uidoytjq-the-solid/pen/YPXPLrY?editors=1011) |
| 23 | Esther | [Codepen](https://codepen.io/biunpujm-the-flexboxer/pen/YPXPMwV) |
| 24 | wei_0982 | [Codepen](https://codepen.io/nico-lai/pen/raVagBj) |
| 25 | Leonard | [Codepen](https://codepen.io/hyyfjqra-the-sans/pen/OPVNdgv) |
| 26 | xiaocai_97765 | [Codepen](https://codepen.io/dupre55667788/pen/ZYGLZVB)
| 27 | mercury2508. | [Codepen](https://codepen.io/Mercury2508/pen/gbpmbjZ) |
| 28 | ninii | [Codepen](https://codepen.io/niiniiii/pen/Eajmemj?editors=1111) |
| 29 | William Hsieh | [Codepen](https://codepen.io/lsaimqxa-the-vuer/pen/GgJEqgK?editors=1011) |
| 30 | Jessie_Yu | [Jessie_Yu 的 Codepen](https://codepen.io/bakyfkso-the-looper/pen/QwbqjxK?editors=1111)|
| 31 | 叮咚 | [Codepen](https://codepen.io/pinchieh-lin/pen/WbQRBzg?editors=1111)|

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