---
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元素，進行網頁事件的監聽並執行行為。

DOM元素.addEventListener('網頁事件', function(e){
    console.log('執行行為');
})

**範例：**

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

HTML:

<button type="button" class="btn">點擊</button>
<h1 class="title">請點擊</h1>

JavaScript:

const btn = document.querySelector('.btn');
const title = document.querySelector('.title');
btn.addEventListener('click', () => title.textContent = '已完成點擊');

---
<br>

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


---

寫一個計數器
---
- `plus`、`sub`分別取得`<button>`元素，並監聽`click`事件。
- 監聽`click`事件，再分別去對`count`做累加、遞減。
- `count`值再經由`.textContent()`賦予給`title`。

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`。(可另外自定名稱)。

const btn = document.querySelector('.btn');
btn.addEventListener('click', (e) => console.log(e));

#### click行為屬於MouseEvent

---
<br>

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

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

const zone = document.querySelector('.zone');
zone.addEventListener('click', (e) => console.log(e.target));


---
<br>

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

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

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

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

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>`賦予`點擊成功`的文字內容。

<a class="link" href="http://www.google.com">連結</a>
<h1 class="title"></h1>

const myLink = document.querySelector('.link');
myLink.addEventListener('click', e => {
  e.preventDefault();
  document.querySelector('.title').textContent = `點擊成功`;
});