---
# System prepended metadata

title: "\U0001F3C5 Day 26 - addEventListener 事件監聽"
tags: [JS 直播班 - 2024 秋季班]

---

# 🏅 Day 26 - addEventListener 事件監聽

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

範例：
HTML
```htmlembedded=
<p class="domElement">123</p>
```
JS
```javascript=
const domElement = document.querySelector(".domElement");

domElement.addEventListener("click", function(e) {
  //  觸發時欲執行的程式
  console.log(e);
    
  // 以此範例來說，點擊 p.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;
/* 程式碼撰寫 */
...
```

## 回報流程

將答案寫在 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  | voke  | [CodePen](https://codepen.io/FiSi-the-lessful/pen/oNKoBYN) | 
| 02  | 泊岸  | [CodePen](https://codepen.io/qoq77416416/pen/ExqpNXz?editors=1011) | 
| 03  | 毛巾 | [CodePen](https://codepen.io/bqdcjboa-the-solid/pen/YzmjpLG) | 
| 04  | david1819 | [CodePen](https://codepen.io/David-Lin-the-vuer/pen/GRVBNOW) | 
| 05  | 睿睿  |[CodePen](https://codepen.io/uwmrsusb-the-solid/pen/abejBXz?editors=1011)|
| 06  | 嚼勁先生  |[CodePen](https://codepen.io/James520284/pen/bGXjBQM)|
| 07  | tim  |[CodePen](https://codepen.io/jskrtivy-the-animator/pen/zYgLNVz?editors=1011)|
| 08  |Tatsu| [CodePen](https://codepen.io/chindesu0207/pen/poMZezy) | 
| 09  |mercury2508.| [CodePen](https://codepen.io/Mercury2508/pen/poMZeBd) |
| 10  | Dolce_墨 | [CodePen](https://codepen.io/DolceTseng1026/pen/abejJXR) | 
| 11  | Ruby | [CodePen](https://codepen.io/xivgaijl-the-selector/pen/QWeBgwz) |
| 12  | yuyuhunter_0509 | [CodePen](https://codepen.io/KRcube/pen/mdNjwJq?editors=1011) |
| 13  |Hedwig| [CodePen](https://codepen.io/adirehfz-the-encoder/pen/GRVBvra?editors=1011) | 
|  14   |    610   | [CodePen](https://codepen.io/YI-LING-LIU/pen/rNXrGMQ?editors=1011) | 
|   15  |   kun._c8_shake_it    | [CodePen](https://codepen.io/barry91205/pen/dyxjZeZ?editors=1111) | 
| 16 | Kaya | [CodePen](https://codepen.io/kayaribi/pen/MWNBreJ) | 
|  17   |    Ariel   | [CodePen](https://codepen.io/ariel0510/pen/NWQBXXN?editors=1011) |
|  18   |    jimmy.0706   | [CodePen](https://codepen.io/JimmyMao/pen/xxvJpMQ?editors=1011) |
| 19 | brucelee0629 | [CodePen](https://codepen.io/xxhdklwi-the-decoder/pen/XWvBVyq?editors=1011) | 
| 20 |yuling       | [CodePen](https://codepen.io/yu-ling-peng/pen/NWQByoM?editors=1011) | 
| 21 | Mos | [CodePen](https://codepen.io/mos25399/pen/abejGvV?editors=1111) |
| 22 | Rogan | [CodePen](https://codepen.io/RoganHsu/pen/yLmqjJa?editors=1111) |
| 23 | .tsz_ying | [CodePen](https://codepen.io/bekgnohe-the-selector/pen/mdNjKEV?editors=1011) |
| 24 | yuyeh_1212 | [CodePen](https://codepen.io/yuyeh1212/pen/ExqpREB) |
| 25 | GTR150 | [CodePen](https://codepen.io/Wer-Qwe/pen/eYqjKXa?editors=1111) | 
|  26   |   JIA    | [CodePen](https://codepen.io/nzaicwlw-the-styleful/pen/bGXjmao?editors=1011) | 
|   27  |  Celine     | [CodePen](https://codepen.io/szuning/pen/abejxWE?editors=0011) | 
|   28  |  Sonia     | [CodePen](https://codepen.io/YUJOU/pen/bGXjXMV?editors=1011) | 
|   29  |  charlottelee     | [CodePen](https://codepen.io/char849/pen/OJKwKwP) | 
|   30  |  Jainee     | [CodePen](https://codepen.io/Jainee0110/pen/GRVXRKv) | 
|   31  |  ab567ab5 | [CodePen](https://codepen.io/WanTzu-Chiang/pen/jOgvPgv?editors=1011) |
|   32  |  Mike | [CodePen](https://codepen.io/mike2049/pen/jOgvqZZ?editors=1011) |
|   33  |  是在哈囉 | [CodePen](https://codepen.io/miyxdhem-the-solid/pen/ExqeWpQ) |
| 34| 邵 |[CodePen](https://codepen.io/ukscrlno-the-typescripter/pen/poMOPLV?editors=1011)|
|  35  |    chris   | [CodePen](https://codepen.io/chris-chen-the-selector/pen/abeawMp?editors=1111) | 
|  36  |    ycl325.etheddie   | [CodePen](https://codepen.io/wdvikfuz-the-selector/pen/zYgJdjP) | 
|  37  |    Lotte   | [CodePen](https://codepen.io/hmkdoxuj-the-decoder/pen/MWNqxjL?editors=1011) | 
|  39  |    陳小廷   | [CodePen](https://codepen.io/ting1124/pen/GRVYQWR) | 
|  40   |  alec1203     | [CodePen](https://codepen.io/soloayaya/pen/MWNzOjB?editors=1012) | 
|  41   |  joylu0902     | [CodePen](https://codepen.io/joylu0902/pen/ZEgmWyJ) | 
|   42  | jerry_66983      | [CodePen](https://codepen.io/Barry-C/pen/wvVQjMx?editors=1011) | 
|   43  | Joannehu      | [CodePen](https://codepen.io/nelbabkv-the-flexboxer/pen/dyxQeXW?editors=1011) | 
| 44  |  Emma  | [CodePen](https://codepen.io/Emma0919/pen/wvVQLLy) | 
| 45  |  野鴿  | [CodePen](https://codepen.io/HoshinoSyouta/pen/vYovydb?editors=1011) | 
| 46 | Glen_69515 | [CodePen](https://codepen.io/glenyaochih/pen/GRVPMNP?editors=1111)|
|47|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/KKObZrj?editors=1111)|
|48|JRz|[CodePen](https://codepen.io/JRZHENG/pen/yLmwQaa?editors=1111)|
|49|KOMATSU PEI|[CodePen](https://codepen.io/Komatsu2021/pen/mdNgYjp?editors=1011)|
| 50 | Jack |[CodePen](https://codepen.io/kxbhixte-the-sasster/pen/gOVJbRa?editors=1011)|
|51|Amy(咂摳)| [CodePen](https://codepen.io/nnxucgmc-the-builder/pen/mdNYJww?editors=0011) | 
| 52 | Nocab |[CodePen](https://codepen.io/PeihanWang/pen/NWQVYeP?editors=1011)|
| 52 | 蘑菇星星 |[CodePen](https://codepen.io/brrrieon-the-vuer/pen/KwPPNLo?editors=1112)|
| 53 | Ana | [Codepen](https://codepen.io/Ana-Wu/pen/VYZZbQo) |
| 54 | Seris | [Codepen](https://codepen.io/Dale-Chien/pen/dPbbZgv) |
| 55 | Chuang | [Codepen](https://codepen.io/uidoytjq-the-solid/pen/ZYzqQRj?editors=1011)


<!-- 可複製下方格式
|     |       | [CodePen]() | 
-->