🏅 DAY15 每日任務

# 🏅 DAY15 每日任務 ###### tags: `JS 直播班 - 2021 秋季班` addEventListener() 教學 --- ### DOM Event 事件處理使用者瀏覽網頁的行為會觸發許多「事件」，像是按下按鍵、移動滑鼠、點擊網頁元素。常見的事件型態包含 click, change, mousemove 等等，可以參考 [MDN Event reference](https://developer.mozilla.org/zh-TW/docs/Web/Events) 了解更多事件型態。許多 DOM 元素可透過設定去 **「監聽」** 事件，並在被觸發時執行處理事件的程式碼。過去常見「on + 事件名稱」這樣的寫法，不過現在已經**不推薦使用**了。因為用這種寫法的 DOM 元素只能被綁定一個事件，且後面的宣告會覆蓋前面的觸發事件。 ```htmlembedded=  <html> <head> <title>「on + 事件名稱」用法</title> </head> <body> <button onclick="triggerAlert(this);">行內寫法</button> <button id="btn">綁定元素寫法</button> </body> </html> ``` ```js= /* js */ function triggerAlert() { alert('點擊元素 1'); } function triggerAlertSecond() { alert('點擊元素 2'); } var el = document.querySelector('#btn'); el.onclick = triggerAlert; /* 只會執行後面宣告的 triggerAlertSecond */ el.onclick = triggerAlertSecond; ``` ### addEventListener() 建議的作法是使用 addEventListener()，因為它可以對一個 DOM 元素同時綁定多個事件處理函數。以下介紹常用的三種參數: `target.addEventListener("事件型態", 事件處理函數, 選項);` * `事件型態`: 包含前述的 click, change, mousemove 等。 * `事件處理函數`: 觸發事件時所執行的函式。 * `選項`: 選擇性加入一些額外的事件監聽設定，在此先略過，之後的課堂會介紹。以下為範例用法: ```htmlembedded=  <html> <head> <title> addEventListener() 用法</title> </head> <body> <button id="btn">綁定元素寫法</button> </body> </html> ``` ```js= /* js */ function triggerAlert() { alert('點擊元素 1'); } function triggerAlertSecond() { alert('點擊元素 2'); } var el = document.querySelector('#btn'); /* 兩個事件處理函式都會執行 */ el.addEventListener('click', triggerAlert); el.addEventListener('click', triggerAlertSecond); ``` 問題 --- 請 Fork 以下程式碼，修改 JS 的部分，使用 addEventListener() 在 `#box` 上綁定兩種事件型態: `mouseenter` ,`click`。 * `mouseenter` 時會觸發 `triggerMouseenter()` 函式。 * `click` 時會觸發 `triggerClick()` 函式。 https://codepen.io/znlcgmgk/pen/bGBroWz?editors=1111 回報流程 --- 將答案寫在 CodePen 並複製 CodePen 連結貼至 thread 中回報就算完成了喔! 解答請參考下圖（需打開程式碼的部分觀看） ![](https://i.imgur.com/6UoJVtD.png)