---
tags: JS 直播班 - 2023 秋季班
---
# 🏅 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 / 答案 |
|:---------------------:|:--------------------------------------------------------------------------------:|
|yuling|[codepen](https://codepen.io/igzdflpu/pen/MWLoQBM)|
|pinyi_9|[codepen](https://codepen.io/Wpypy/pen/RwvgQBZ?editors=1111)|
|Helen|[codepen](https://codepen.io/milkteamonster/pen/WNPOzGq?editors=1011)|
|Allen|[codepen](https://codepen.io/hlctw/pen/LYqLddQ)|
|ann6212|[codepen](https://codepen.io/yqmegupa-the-styleful/pen/mdvwxGv?editors=1011)|
|cest_jessie|[codepen](https://codepen.io/itsjessiechen/pen/GRzEQqW)|
| tanuki5863 | [Codepen](https://codepen.io/tanuki320/pen/VwgWxaR?editors=1011) |
| yuan2781 | [Codepen](https://codepen.io/ismebir/pen/rNPwdbz) |
| kuanju27 | [Codepen](https://codepen.io/Eero-Chiao/pen/KKJqRZv) |
| stone4584 | [Codepen](https://codepen.io/Royen0506/pen/mdvwLzV) |
| Uli | [Codepen](https://codepen.io/uli1313/pen/dyaRezE?editors=1011) |
| Yijing | [Codepen](https://codepen.io/Yi-Jing-71080635/pen/wvNejQJ?editors=1010) |
| Oria | [Codepen](https://codepen.io/kajing/pen/BaMZVZJ?editors=1111) |
| claire | [Codepen](https://codepen.io/yi-wen-chen/pen/wvNeXgp) |
| 小夏 | [Codepen](https://codepen.io/michaelhsia/pen/dyaRKmO) |
|Moreene|[CodePen](https://codepen.io/Moreene/pen/gOqRKBv)|
|celinelinnn|[CodePen](https://codepen.io/celinephoebe/pen/yLZXEZd)|
| Chia Pin |[CodePen](https://codepen.io/joker-cat/pen/mdvwKgp)|
| Eden | [Codepen](https://codepen.io/iseden/pen/dyaRKrW)|
| damon0323 | [Codepen](https://codepen.io/swk9eny2/pen/PoVjaVe?editors=1011) |
| yuan! | [Codepen](https://codepen.io/townyuan/pen/MWLoXBd) |
| 依依 | [Codepen](https://codepen.io/pen/?editors=1011) |
|Cping|[Codepen](https://codepen.io/CPing/pen/mdvwjBz?editors=1111)|
| shuuu | [Codepen](https://codepen.io/afjrvjzl-the-bashful/pen/gOqRjxQ?editors=1011) |
| runweiting | [Codepen](https://codepen.io/weiting14/pen/xxMrJxR) |
| 維哲 | [Codepen](https://codepen.io/kwz1202/pen/YzBQjaj) |
| SHUO | [Codepen](https://codepen.io/xrzarxkl-the-reactor/pen/WNPOKBQ) |
| kawa | [Codepen](https://codepen.io/z83xji6/pen/ExrXpJb?editors=1111) |
| 風羽 | [Codepen](https://codepen.io/Joy-Huang/pen/xxMrJmp?editors=1111) |
|銀光菇|[CodePen](https://codepen.io/genesynthesis/pen/dyaRdqv)|
| hsu0921 | [Codepen](https://codepen.io/HSUANIN0327/pen/qBgjMOM) |
| dora | [Codepen](https://codepen.io/dorayu/pen/mdvwLPN?editors=1111) |
| Ataraxia | [Codepen](https://codepen.io/ataraxia8888/pen/eYxRedZ) |
| Fabio20 | [Codepen](https://codepen.io/fabio7621/pen/LYqLJOa?editors=1111)
| 奔跑吧(GTR150) | [Codepen](https://codepen.io/Wer-Qwe/pen/dyaRgQv?editors=1111) |
| Rxzan | [Codepen](https://codepen.io/Tzuru-Chen/pen/NWogOZe) |
| lychee_kk | [Codepen](https://codepen.io/kakakala/pen/zYezMpZ?editors=1111) |
| ming0712 | [Codepen](https://codepen.io/StevenHuang/pen/OJdgaGK) |
| gebyman | [Codepen](https://codepen.io/gebyman/pen/eYxRbjK?editors=1011) |
| 精靈 | [Codepen](https://codepen.io/justafairy/pen/xxMrmvN) |
| MY | [Codepen](https://codepen.io/ahmomoz/pen/qBgjvpV?editors=1111) |
| yu.t_liu | [Codepen](https://codepen.io/YuT200053/pen/yLZXwPY) |
| xain | [Codepen](https://codepen.io/ppzigmtg-the-typescripter/pen/RwvgOYN?editors=1010) |
| Rogan | [Codepen](https://codepen.io/RoganHsu/pen/zYezgWL?editors=1011)
| Winnie | [Codepen](https://codepen.io/codepen-io-winnie/pen/eYxEOZb?editors=1011)
| Alyce | [Codepen](https://codepen.io/alycehwy/pen/gOqxpyv?editors=1010)
| JUNEW | [Codepen](https://codepen.io/June-W/pen/LYqjRXv) |
| Peng | [Codepen](https://codepen.io/H-Peng/pen/yLZovrw) |
| dodo_6666 | [Codepen](https://codepen.io/MissDouble/pen/ExrvLVb) |
| RX00 | [Codepen](https://codepen.io/llqzknqv-the-styleful/pen/YzBxLZB?editors=1010) |
| ⭐️小正 | [Codepen](https://codepen.io/colorgolden/pen/gOqxdgN?editors=1111) |
| xin | [Codepen](https://codepen.io/Estherrrrrr999/pen/poGrxrK) |
| phyllis | [CodePen](https://codepen.io/gmoxhrmc-the-styleful/pen/LYqjgrp)
| santu0868 | [Codepen](https://codepen.io/HatsumiSan/pen/OJdjBaO?editors=1111) |
| 保羅 | [Codepen](https://codepen.io/paul-1997/pen/qBgXwVM?editors=1011) |
| 荷菓かのり | [Codepen](https://codepen.io/oogxwkvw-the-builder/pen/xxMLeRY?editors=1011) |
| Ching | [Codepen](https://codepen.io/tzuchingg/pen/RwvLrrq?editors=1011) |
|xiaokui_71292|[CodePen](https://codepen.io/pen?template=bGzoYYm)|
|郭芙蘭＃6374|[CodePen](https://codepen.io/flora_Kuo/pen/bGzoaYN?editors=1111)|
| Jerry | [Codepen](https://codepen.io/ildkosxk-the-encoder/pen/poGWaxZ) |
|Joy-chiang | [Codepen](https://codepen.io/fwysphbw-the-vuer/pen/LYqzmzr?editors=1010) |
| Mattie|[CodePen](https://codepen.io/mattielin/pen/YzBEwdd)|
| shcopy |[CodePen](https://codepen.io/shcopy/pen/jOdaLor)|
|yaoling.liang|[CodePen](https://codepen.io/Yao-Ling-L-/pen/OJdOEwR?editors=1011)|
| 歐陽龍龍#1061 |[CodePen](https://codepen.io/dizzydog-rgb/pen/eYxeLVB)|
| Tina02 | [CodePen](https://codepen.io/chjitlox-the-bashful/pen/zYeEWNx) |
| JasonFu | [CodePen](https://codepen.io/jie-Fu/pen/QWYaPKY?editors=1111) |
| davidtt | [CodePen](https://codepen.io/David-Tsai/pen/mdvpgrp?editors=1111) |
| xuan | [CodePen](https://codepen.io/xuan0915/pen/ZEwrxoq?editors=1011) |
| ChrisSQR | [CodePen](https://codepen.io/ChrisSQR/pen/WNPMyNV) |
| Vivian2857 | [CodePen](https://codepen.io/vivian_lin/pen/OJdQYze?editors=1111) |
| jimmy.0706 | [CodePen](https://codepen.io/WeiJun-Mao/pen/XWOqdyM) |
| Lainie | [CodePen](https://codepen.io/Lainie88/pen/QWYrQEo?editors=1011) |
|_shun0130| [CodePen](https://codepen.io/koba60052ww/pen/wvNjQWv?editors=1011)
|阿賀#3700| [CodePen](https://codepen.io/sungho/pen/rNPdwap?editors=1010)
|nini1202desu| [CodePen](https://codepen.io/tvxq5206/pen/XWOBMOo)
|Iris| [CodePen](https://codepen.io/iris831206/pen/eYxjRpJ?editors=1111)
|macihuang| [CodePen](https://codepen.io/macy1215/pen/wvNxRqW)
|bf_tsai| [CodePen](https://codepen.io/BF-Tsai/pen/MWLqYLG?editors=0010)
|Andy| [CodePen](https://codepen.io/andy31342/pen/jOdvLOW?editors=1111)
|Rochel|[Codepen](https://codepen.io/rochelwang1205/pen/jOdvRgL?editors=1011)
|NathanJames|[Codepen](https://codepen.io/ufo060204/pen/zYemxgJ)|
|skypassion5000|[Codepen](https://codepen.io/skypassion5000/pen/NWoOZmJ?editors=1011)|
|Daylily|[Codepen](https://codepen.io/daylily/pen/gOqQRvo)|
| 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/xxMQyyB) |
|阿榮|[Codepen](https://codepen.io/codeitaday/pen/KKJbGzM)|
|nikkita_3544|[Codepen](https://codepen.io/vanessa7259/pen/XWOoovR?editors=1111)|
|sponge|[Codepen](https://codepen.io/biunpujm-the-flexboxer/pen/rNPPwWZ?editors=1111)|