---
# System prepended metadata

title: event事件
tags: [event, ' 事件', ' e']

---

---
title: event事件 
tags: event, e, 事件
---
event 事件
===

什麼是event?
---
DOM元素經過點擊、滾動、縮放、Hover...等，不同的網頁事件去觸發不同的行為。
:point_right: [HTML DOM Events](https://www.w3schools.com/jsref/dom_obj_event.asp)
<br>

addEventListener 註冊事件監聽教學
---

addEventListener：針對某個DOM元素，進行網頁事件的監聽並執行行為。

```javascript=
DOM元素.addEventListener('網頁事件', function(e){
    console.log('執行行為');
})
```
**範例：**

點擊按鈕後，文字從**請點擊**，變成**已完成點擊**。
- `document.querySelector()`，分別取得`<button>`、`<h1>`元素。
- `.addEventListener()`再去監聽`<button>`的`click事件`。
- 並對`<h1>`執行`.textContent()`，賦予`已完成點擊`的文字內容。

HTML:
```htmlmixed=
<button type="button" class="btn">點擊</button>
<h1 class="title">請點擊</h1>
```
JavaScript:
```javascript=
const btn = document.querySelector('.btn');
const title = document.querySelector('.title');
btn.addEventListener('click', () => title.textContent = '已完成點擊');
```
---
<br>

如何觀看 DOM 有註冊事件監聽
---
- 點擊`<button>`元素，再點擊Event Listeners。
- 便可以看到`<button>`元素監聽的事件。

![](https://i.imgur.com/LhMudF3.png)

---

寫一個計數器
---
![](https://i.imgur.com/TP5QzeQ.png)
- `plus`、`sub`分別取得`<button>`元素，並監聽`click`事件。
- 監聽`click`事件，再分別去對`count`做累加、遞減。
- `count`值再經由`.textContent()`賦予給`title`。
```javascript=
const plus = document.querySelector('.plus');
const sub = document.querySelector('.sub');
const title = document.querySelector('.title');
let count = 0;
plus.addEventListener('click', () => {
  count ++;
  title.textContent = count;
});
sub.addEventListener('click', () => {
  count --;
  title.textContent = count;
});
```
---
<br>

event 物件 - 告訴你當下元素資訊
---
監聽`<button>`的`click`行為，當`click`**當下所發生事件的資訊**，賦予給`function()`代入的參數`e`。(可另外自定名稱)。

```javascript=
const btn = document.querySelector('.btn');
btn.addEventListener('click', (e) => console.log(e));
```
#### click行為屬於MouseEvent
![](https://i.imgur.com/uCGYAce.png)

---
<br>

e.target - 了解目前所在元素位置
---
`.querySelector()`選取HTML的某段區塊，當你點擊**區塊內不同的元素**`e.target`可以顯示，區塊內的哪個元素被點擊。
- `.querySelector()`，選取了`<div>`標籤，並賦予給變數zone。
- `.addEventListener()`監聽`<div>`標籤的`click`行為。
- 再把當下`click`當下所發生事件的資訊，賦予給`function()`代入的參數`e`。
- 得到`e.target`所在元素資訊。

```htmlmixed=
<div class="zone">
  <h1>標題</h1>
  <p>內文內文</p>
  <button type="button" class="btn">點擊</button>
</div>
```

```javascript=
const zone = document.querySelector('.zone');
zone.addEventListener('click', (e) => console.log(e.target));
```
![](https://i.imgur.com/uWVx3kG.png)

---
<br>

e.target 搭配 nodeName 節點
---
使用`e.target`取得目前所在位置元素資訊，進而從`e.target.nodeName`取得元素節點資料。

**範例：點擊`<div>`區域內的元素，`console.log()`印出該元素的`nodeName`名稱。**

- 監聽`<div>`區域的`click`行為，點擊`<div>`區域的元素。
- 取得元素資訊的`nodeName`節點，使用`三元運算子`比較後，再用`console.log()`印出`nodeName`名稱。

```htmlmixed=
<div class="zone">
  <h1>標題</h1>
  <p>內文內文</p>
  <button type="button" class="btn">點擊</button>
</div>
```

```javascript=
const zone = document.querySelector('.zone');
zone.addEventListener('click', (e) => {
  e.target.nodeName === 'H1' ? console.log(`這是h1`) : e.target.nodeName === 'P' ? console.log(`這是p`) : e.target.nodeName === 'BUTTON' ? console.log(`這是button`) : console.log(`什麼都沒選取到`);
});
```
---
<br>

preventDefault - 取消預設觸發行為
---

點擊HTML`<a>`標籤，**不一定是要連結到其他網頁。有可能只是觸發其他行為**。
這時候使用`e.preventDefault()`便能==取消==`<a>`標籤的預設觸發行為==。

- 監聽`<a>`的`click`行為，取得當下元素資訊，`e.preventDefault()`取消`<a>`的預設觸發行為。
- 再使用`.textContent`把`<h1>`賦予`點擊成功`的文字內容。
```htmlmixed=
<a class="link" href="http://www.google.com">連結</a>
<h1 class="title"></h1>
```
```javascript=
const myLink = document.querySelector('.link');
myLink.addEventListener('click', e => {
  e.preventDefault();
  document.querySelector('.title').textContent = `點擊成功`;
});
```






