---
tags: JS 直播班 - 2022 秋季班
---
# 🏅 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 / 答案 |
|:---------------------:|:--------------------------------------------------------------------------------:|
| 嗶嗶羊#8042 | [CodePen](https://codepen.io/mazizlte-the-typescripter/pen/abKBaMz?editors=1011) |
| suihsilan#9485 | [CodePen](https://codepen.io/suihsilan/pen/MWXjqQR?editors=0010) |
| 無名#6427 | [CodePen](https://codepen.io/Nomoney/pen/PoabwBO) |
| KC_8685#9343 | [Codepen](https://codepen.io/cathy7411/pen/bGKwxMK) |
| albee#9121 | [Codepen](https://codepen.io/albee-chang/pen/vYrXzzZ?editors=1111) |
| 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/ExRgerV) |
| 薯餅#3581 | [CodePen](https://codepen.io/ColdingPoTaTo/pen/xxzEamV) |
| JackC#0411 | [Codepen](https://codepen.io/key0329/pen/OJERodZ) |
| banazita#5143 | [CodePen](https://codepen.io/banazita/pen/KKegxob?editors=1111) |
| shinyhung#3825 | [Codepen](https://codepen.io/sean_1215/pen/eYKdLXY?editors=1011) |
| 楓之聲#6945 | [Codepen](https://codepen.io/sshane258/pen/BaVLqBO) |
| 予予#9627 | [Codepen](https://codepen.io/kiqzcraa/pen/qBKaMvq?editors=1111) |
| WEI_RIO#9342 | [CodePen](https://codepen.io/wei_wu/pen/zYaKmvB?editors=1111) |
| Data#9297 | [CodePen](https://codepen.io/kirakira72/pen/mdKrGjB) |
| 心幻羽#0056 | [CodePen](https://codepen.io/linglingsyu/pen/vYrXVGd?editors=1111) |
| 小白#2406 | [CodePen](https://codepen.io/gracewhite/pen/oNyzabe) |
| hsiung阿熊#4079 | [Codepen](https://codepen.io/hsiungchi/pen/YzvGJGe) |
| Peng#9811 | [CodePen](https://codepen.io/peng-027/pen/OJERBRa) |
| Winnie#1306 | [Codepen](https://codepen.io/WinnieWuWinnie/pen/YzvGJqY?editors=1011) |
| AuroraC#6539 | [codepen](https://codepen.io/AuroraC/pen/PoaGyjX?editors=1111) |
| Hazel.#6020 | [codepen](https://codepen.io/Hazelhsieh/pen/MWXjPpa?editors=10111) |
| 軟綿綿 (๑•ᴗ•๑) ♡#3627 | [CodePen](https://codepen.io/Connie-Chien/pen/wvXzYqZ?editors=0011) |
| 圈圈#4060 | [codepen](https://codepen.io/wjejfczn-the-bold/pen/MWXjPvK) |
| PayRoom | [CodePen](https://codepen.io/water38198/pen/OJERBzq) |
| 威0#6919 | [codepen](https://codepen.io/n0918679182/pen/OJERBae?editors=1011) |
| mandylai#4055 | [codepen](https://codepen.io/mandy-lai-2/pen/zYaKmed) |
| amy芳#1385 | [codepen](https://codepen.io/amy-chieng/pen/YzvGJod) |
| 末次#0236 | [codepen](https://codepen.io/yunjulee/pen/OJERaVJ) |
| William Lai#0196 | [codepen](https://codepen.io/lai-weihan/pen/jOKMQWV) |
| yaru#6308 | [CodePen](https://codepen.io/lszaietc/pen/eYKdQZG?editors=1011) |
| VT#0895 | [Codepen](https://codepen.io/vt197/pen/WNyGYxx) |
| jacky010080#0880 | [CodePen](https://codepen.io/Yen-Jung-Chen/pen/XWYjyjZ) |
| yawun#0042 | [CodePen](https://codepen.io/monicalin/pen/bGKwQwp) |
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/oNyzQwV?editors=0011) |
| kenki100#0068 | [Codepen](https://codepen.io/ken100/pen/dyKpgYV) |
| azami#5986 | [Codepen](https://codepen.io/azami/pen/eYKdQyM) |
| Clara#1275 | [Codepen](https://codepen.io/bsupixqu/pen/ZERpmar?editors=1111) |
| Potatolee#7749 | [Codepen](https://codepen.io/potatoleee/pen/oNyzQEO?editors=1011) |
| Benson#6763 | [Codepen](https://codepen.io/kumashow/pen/wvXzQXo) |
| RJRS#9430 | [CodePen](https://codepen.io/RJRS/pen/WNyGaJN) |
| jimmyFang#9575 | [CodePen](https://codepen.io/pohxiqqo/pen/poKEQYa?editors=1010) |
| Hilda#7085 | [CodePen](https://codepen.io/vwquikad-the-vuer/pen/JjZReqq) |
| 勁辣雞腿寶#5817 | [Codepen](https://codepen.io/orz311013/pen/KKegrjQ?editors=1011) |
| Loran#1105 | [Codepen](https://codepen.io/loranlin/pen/rNKMoLR?editors=1011) |
| Greta#0837 | [CodePen](https://codepen.io/gretali/pen/RwJGEpK) |
| masterYan#2480 | [CodePen](https://codepen.io/htzwgoqt-the-looper/pen/PoaGXJJ?editors=1111) |
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/zYaKyRO) |
| 粉蒸肉#6214 | [Codepen](https://codepen.io/wrightyu/pen/WNyGLyg?editors=1111) |
| 法希娜#3206 | [Codepen](https://codepen.io/yiiserpf-the-encoder/pen/dyKpwav?editors=1011) |
| hannahTW#2224 | [Codepen](https://codepen.io/hangineer/pen/bGKwOPm?editors=1011) |
| LHchien33#6232 | [Codepen](https://codepen.io/lin_chien/pen/YzvGByE?editors=1011) |
| Vera#5592 | [CodePen](https://codepen.io/skvera/pen/PoaGVzd) |
| 出事了阿伯#9923 | [CodePen](https://codepen.io/BradpittLai/pen/NWzRoGo?editors=1111) |
| JustinLiu#9699 | [CodePen](https://codepen.io/justin0227/pen/QWxKzQV) |
| Kimi #9563 | [CodePen](https://codepen.io/kimihu91/pen/VwdKgpQ) |
| Yiru#0236 | [Codepen](https://codepen.io/yiru94/pen/mdKrvZo) |
| Silvialu#4521 | [Codepen](https://codepen.io/Silvia091640/pen/qBKavWK?editors=1111) |
| yoshidc#0455 | [CodePen](https://codepen.io/yoshiyyc/pen/QWxKoQv) |
| Mylène#2481 | [Codepen](https://codepen.io/hamajibashi/pen/WNyGmKj) |
| 柔柔#1716 | [Codepen](https://codepen.io/rouchen/pen/XWYjGOx?editors=1011) |
| 0xWilliam#8796 | [CodePen](https://codepen.io/0xWilliam0322/pen/jOKMJJa?editors=1111) |
| SASIMI#5099 | [codepen](https://codepen.io/sashimi1327/pen/NWzGEbB) |
| Ryan Chiang#6649 | [Codepen](https://codepen.io/ryanchiang/pen/qBKawbW?editors=1011) |
| Lucie#3831 | [Codepen](https://codepen.io/bisespei/pen/vYrXPzY) |
| m_m#5493 | [CodePen](https://codepen.io/minnn7716/pen/bGKwJeY) |
| 黑白兔#0684 | [CodePen](https://codepen.io/johnny329/pen/BaVLEQw) |
| Tuhacrt#0008 | [codepen](https://codepen.io/Tuhacrt/pen/XWYjwWm) |
| 大衛#4869 | [codepen](https://codepen.io/exnsrpjc/pen/JjZRqWN?editors=1011) |
| jackson204#6363 | [codepen](https://codepen.io/jackson204/pen/qBKaGYV?editors=1111) |
| Amberhh#2465 | [Codepen](https://codepen.io/Amberhh/pen/KKegGjM) |
| 我是泇吟#5189 | [CodePen](https://codepen.io/kljuqbxs/pen/yLEadLg) |
| Ruby Chen#7452 | [Codepen](https://codepen.io/ruby92429/pen/oNyzrEO?editors=1011) |
| cbs#9007 | [Codepen](https://codepen.io/wasdjk/pen/ExRgBao) |
| Sentiments#4883 | [codepen](https://codepen.io/Sentiments/pen/oNyzKOB?editors=1111) |
| Arista#5802 | [codepen](https://codepen.io/arista-hsieh/pen/XWYNryR) |
| yumy#1940 | [CodePen](https://codepen.io/yumy_yang/pen/qBKqWeY) |
| 雷雷#7844 | [CodePen](https://codepen.io/lei-yi-jie/pen/mdKOdXd?editors=1011) |
| Hironaka#7367 | [CodePen](https://codepen.io/Hironaka0815/pen/vYryYrB?editors=1111) |
| 萱仔#0781 | [CodePen](https://codepen.io/ting-hsuan/pen/ExRNxop) |
| YI#0863 | [CodePen](https://codepen.io/YI0305/pen/MWXbwZj?editors=1011) |
| Cream#3449 | [CodePen](https://codepen.io/frxdwbbi-the-sasster/pen/RwJoPaQ?editors=1111) |
| kuku#3118 | [Codepen](https://codepen.io/mengting-ku/pen/poKNjQd) |
| 蓁心#6229 | [Codepen](https://codepen.io/tlorfrnl-the-typescripter/pen/ExRNPZz?editors=1011) |
| 黃士桓#7654 | [codePen](https://codepen.io/shr-huan-huang/pen/XWYNXew) |
| 肉桂卷#0625 | [codePen](https://codepen.io/ginnlee/pen/zYaoraO?editors=1111) |
| mou#2215 | [codePen](https://codepen.io/shihchiehlan/pen/PoabzZM?editors=1011) |
| Shuo#1596 | [codePen](https://codepen.io/chiangchungshuo/pen/OJEbWjV) |
| Jill#5577 | [CodePen](https://codepen.io/Jillkate/pen/GRGNvoq) |
| xherobruce#6825 | [CodePen](https://codepen.io/winwinbruce/pen/gOKLGYv) |
| CloThEs#7837 | [CodePen](https://codepen.io/CloThEsZ/pen/XWYNzNz) |
| Velma#1693 | [Codepen](https://codepen.io/Ze1225/pen/RwJojXP?editors=1010) |
| Cookie SSS#6991 | [Codepen](https://codepen.io/sqhjikpa-the-selector/pen/abKBVgP?editors=1011) |
| RyanTsai#8906 | [CodePen](https://codepen.io/linlaose/pen/QWxGabq) |
| Eileen#6454 | [CodePen](https://codepen.io/Eileen-io/pen/KKeNZgo) |
| 王懷英#7271 | [CodePen](https://codepen.io/huaiying/pen/wvXopdq) |
| IreneY#0086 | [codepen](https://codepen.io/HalfPlannedJourney/pen/QWxGQGo) |
| charlottelee849#0366 | [codepen](https://codepen.io/charlotte-lee/pen/ExRNENo?editors=1011) |
| L0F0#8733 | [codepen](https://codepen.io/l0f0/pen/abKBGGo?editors=1011) |
| Tami#6742 | [CodePen](https://codepen.io/wqsdqbjn-the-vuer/pen/yLEVExN) |
| CofCat#9226 | [CodePen](https://codepen.io/cofcat456/pen/xxzRJdj?editors=1111) |
| Rena#6249 | [Codepen](https://codepen.io/aureate0116/pen/xxzRaax?editors=1111) |
| Judy Wei#6103 | [Codepen](https://codepen.io/Judy0718/pen/abKBaKo) |
| shio#1414 | [Codepen](https://codepen.io/shioyen/pen/YzvpJVE?editors=1111) |
| 三隻小貓#1905 | [CodePen](https://codepen.io/bagelover/pen/LYrbggO?editors=1011) |
| 安o#2448 | [CodePen](https://codepen.io/JzhenAn/pen/qBKqLzZ?editors=1111) |
| 竹輪#3335 | [CodePen](https://codepen.io/chikuwa0120/pen/VwdmRQg) |
| beta lin#1445 | [CodePen](https://codepen.io/linbeta/pen/zYaobXL) |
| Lou#0085 | [CodePen](https://codepen.io/Lusie_H/pen/abKBrym?editors=1011) |
| ssozr#4680 | [codepen](https://codepen.io/ssozr/pen/jOKVoeN) |
| kancheng#3915 | [CodePen](https://codepen.io/kancheng/pen/LYrxPoe?editors=1111) |
| Ron Liang#7277 | [CodePen](https://codepen.io/ron-go/pen/oNyBLKO) |
| PoWei#8484 | [CodePen](https://codepen.io/harrison-wei-lai/pen/poKRbBw?editors=1111) |
| 母湯#7211 | [CodePen](https://codepen.io/tommyshih77/pen/GRGrrpP?editors=1111) |
| 健育#5748 | [CodePen](https://codepen.io/c1317156/pen/gOKgvjK?editors=1111) |
| Yishan#4902 | [CodePen](https://codepen.io/gdjrehhw-the-animator/pen/dyKNzXx?editors=1012) |
| 芮綺#5224 | [CodePen](https://codepen.io/zhan70/pen/VwdPKXv?editors=1011) |
| 鑫鑫#4346 | [CodePen](https://codepen.io/Neil1024/pen/rNKyLMM?editors=1011) |
| Paul#7426 | [CodePen](https://codepen.io/paul-1997/pen/BaVWQYx?editors=1011) |
| Rr#2215 | [Codepen](https://codepen.io/rufangcheng/pen/abKpyJX) |
| hungya#0773 | [CodePen](https://codepen.io/hungya777/pen/MWXpvGV?editors=1011) |
| Cliff#4606 | [Codepen](https://codepen.io/Cliff_hex/pen/oNyZQoE?editors=1011) |
| Yuna Huang#2692 | [Codepen](https://codepen.io/Yuna1002/pen/zYaZMVP?editors=1111) |
|yaru#6308|[CodePen](https://codepen.io/lszaietc/pen/VwdpRWQ?editors=1011)|
|FiReBrO#0557|[CodePen](https://codepen.io/firebro42/pen/MWXpxoa)|
|bingsu#2362|[Codepen](https://codepen.io/pmyfr/pen/Poambob?editors=1010)|
|yoyo#1003|[Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/dyKWWVG)|
|郭芙蘭#6374|[Codepen](https://codepen.io/flora_Kuo/pen/MWXmLxx?editors=1011)|
|sophiee#7015|[codepen](https://codepen.io/sophiee2727/pen/gOKRmeV?editors=1111)|
|Kevin#6131|[codepen](https://codepen.io/xlqjezvc-the-encoder/pen/abKwqPe?editors=1011)|
|Cynthia1111#1822|[codepen](https://codepen.io/Cynthia1111/pen/MWXvWxW?editors=1010)|
|君Jyun#0147|[codepen](https://codepen.io/Okaybeok/pen/qBKXEpo?editors=1011)|
|黑松胖#4836|[Codepen](https://codepen.io/yi-chien-hsieh/pen/QWxMvQM?editors=1011)
|meimei#9524|[Codepen](https://codepen.io/isnrudav/pen/ZERXoVO?editors=1111)
|艾芮絲#6060|[Codepen](https://codepen.io/wangyingju/pen/abKLjVe)
|狸貓#5863|[codepen](https://codepen.io/tanuki320/pen/qBKPGwg?editors=1010)|
|ling chang#1024|[codepen](https://codepen.io/ling-chang/pen/wvXpJKP)|
|Baozi#2042|[codepen](https://codepen.io/lillianyu/pen/OJEzBNa)|
|pss940909#8650|[codepen](https://codepen.io/pss940909/pen/jOKZbLB?editors=1111)|
|Chloe#5422|[Codepen](https://codepen.io/Ironchloe/pen/YzveEZg?editors=1011)|
|阿風#6890|[Codepen](https://codepen.io/Afonguwu/pen/vYrRxYB)|
|入門小菜G#0191|[Codepen](https://hackmd.io/Wl1vhP5RRR-6W-p1MnI3Mg?both)|
|阿蘇#8531|[Codepen](https://codepen.io/susu3131/pen/dyKKBxe?editors=0011)|
|魚子醬#5220|[CodePen](https://codepen.io/haihsuan/pen/yLExMNy?editors=1111)|
|Ringo#7583|[CodePen](https://codepen.io/ringolai1988/pen/gOKZmVj?editors=1011)|
|Mia小福#4457|[CodePen](https://codepen.io/a0950271/pen/LYrqzge?editors=1111)|
|samger#0808|[CodePen](https://codepen.io/lee-wei-hong/pen/gOKEmbP?editors=1111)|
|教練#6451|[CodePen](https://codepen.io/monkeybear721/pen/JjZqVQx?editors=1111)|
|J_u_d_y#5993|[Codepen](https://codepen.io/J_u_d_y/pen/PodozmB?editors=1011)|