# 🏅 Day 26 - addEventListener 事件監聽

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

範例：
HTML

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

JS

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

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

JS

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

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：

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]() |
-->