---
# System prepended metadata

title: "\U0001F3C5 3/8 (一) 每日任務"
tags: [2021直播班任務]

---

# 🏅 3/8 (一) 每日任務
###### tags: `2021直播班任務`

addEventListener() 教學
---

### DOM Event 事件處理
使用者瀏覽網頁的行為會觸發許多「事件」，像是按下按鍵、移動滑鼠、點擊網頁元素。常見的事件型態包含 click, change, mousemove 等等，可以參考 [MDN Event reference](https://developer.mozilla.org/zh-TW/docs/Web/Events) 了解更多事件型態。

許多 DOM 元素可透過設定去 **「監聽」** 事件，並在被觸發時執行處理事件的程式碼。

過去常見「on + 事件名稱」這樣的寫法，不過現在已經**不推薦使用**了。因為用這種寫法的 DOM 元素只能被綁定一個事件，且後面的宣告會覆蓋前面的觸發事件。

```htmlembedded=
<!-- HTML -->
<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 -->
<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)

 解答
function triggerMouseenter(){
    console.log('滑入');
}
function triggerClick(){
    alert('點擊');
}
var el = document.querySelector('#box');
el.addEventListener('mouseenter', triggerMouseenter);
el.addEventListener('click', triggerClick);
