---
# System prepended metadata

title: event(事件)
tags: [HyUI4.0]

---

---
type: slide
---

# event(事件)
###### tags:`HyUI4.0`

---

網頁雖然馬上會讀取 JavaScript 事件相關的程式碼，但是必須等到「事件」被觸發(如使用者點擊、按下鍵盤等)後，才會再進行對應程式的執行。
<br/>

```htmlembedded=
家裡的電話(JS) -> 電話響了 (事件被觸發) -> 接電話 (去做對應的事)
```

---

onclick() 與 addEventListener() 語法差異

---

```javascript=
// 綁定事件1
arrow.onclick = function (w) {
  alert('<事件1>');
};

//綁定事件2
arrow.onclick = function (w) {
  alert('<事件2>');
};
```
會印出什麼呢？
<事件2><!-- .element: class="fragment" data-fragment-index="1" -->

---

onclick()
不能同時綁定一個以上的事件，只會執行後綁的事件。

---

addEventListener()
可同時綁定多個事件，事件一直行完後執行事件二。
```javascript=
// 綁定事件1
arrow.addEventListener('click', function () {
  alert('<事件1>');
});

//綁定事件2
arrow.addEventListener('click', function () {
  alert('<事件2>');
});
```

---

目前主要都會是使用 .addEventListener() 來偵聽事件
```javascript=
target.addEventListener(event, function(){}, useCapture);
```
<div style="text-align:left;padding-left:50px">
event：要監聽的事件，例如 click<br/>
listener：事件觸發後要執行的函式<br/>
useCapture：布林值，預設值是 false，「捕獲」或「冒泡」機制執行，若不指定則預設為「冒泡」<br/>
</div>

---

Event Bubbling、Event Capturing

---

事件冒泡 (Event Bubbling)

事件冒泡指的是「從啟動事件的元素節點開始，逐層往上傳遞」，直到整個網頁的根節點，也就是 document。

---

```htmlembedded=
<!DOCTYPE html>
<html>
<body>
  <div>click</div>
</body>
</html>
```
假設我們點擊了 CLICK 元素，那麼在「事件冒泡」的機制下，觸發事件的順序會是：

```html [1|2|3|4]
<div>CLICK</div>
<body>
<html>
document
```
像這樣 click 事件逐層向上依序被觸發，就是「事件冒泡」機制。

---

事件捕獲 (Event Capturing)

「事件冒泡」機制是由下往上來傳遞，那麼「事件捕獲」(Event Capturing) 機制則正好相反。

---

像這樣 click 事件由上往下依序被觸發，就是「事件捕獲」機制。

```html  [1|2|3|4]
document
<html>
<body>
<div>CLICK</div>
```

---

e.target 與 nodeName

---

target 在網頁上是指目前所在元素的位置
```htmlembedded=
<ul>
  <li>
    <a href="#" class="link">連結</a>
  </li>
</ul>
```

---


在 JS 增加一個 addEventListener 語法，來找下 e 裡面的事件，就可以看到 target

```javascript=
var link = document.querySelector(".box");
link.addEventListener('click',function (e) {
    console.log(e);
  }
);
```
而使用e.target即可抓到該點擊物件

---

nodeName

在網頁上有節點名稱的意思，代表 DOM 元素點擊到的節點。
可以搭配e.target去抓取結點後，去執行一些事件

(用nodeName抓取的節點名稱都會是大寫)


---

要注意的是JS沒有像JQ可以同時偵測事件，不同的事件需要多寫一次
```javascript=
$('button').on('load resize',function(){})
```
```javascript=
button.addEventListener('load',function(){})
button.addEventListener('resize',function(){})
```

---


參考資料
[HTML DOM 事件](https://www.w3schools.com/jsref/dom_obj_event.asp)
[初探JavaScript - JS 事件 Event - 關於addEventListene中true & false的差異](https://ithelp.ithome.com.tw/articles/10238258)

<style>
    .reveal h1{
        font-size:2em;
    }
    .reveal h1,.reveal h2 {
         color:#c9f2ff;
    }
</style>
