# JavaScript - Event 事件 - 讓您的網頁具有互動效果
###### tags: `javascript` `event`

## 網頁的 Event 事件
* [HTML DOM Events](https://www.w3schools.com/jsref/dom_obj_event.asp)

### addeventListener 註冊事件監聽
* .addEventListener() 監聽事件
* 帶兩個參數 - 參數1.監聽要觸發的事件 / 參數2.function

<input type="button" class="btn" value="點擊">
<h1 class="title">標題</h1>

// addeventListener 註冊事件監聽教學
const btn = document.querySelector(".btn");
const title3 = document.querySelector(".title3");

// .addEventListener 監聽事件
// 選取按鈕  // 監聽"點擊"事件  // 一但追蹤到該事件就自動執行以下函式
btn.addEventListener("click", function (e) {
    console.log("按鈕被點擊");
    title.textContent = "按鈕已經被點擊!!!";
})

### 【練習】數量計算器
* [數量計算器](https://codepen.io/Zoechiueh/pen/ExvQYbO?editors=1010)

### event 物件 - 告訴你當下元素資訊
* event 簡稱為 e：捕捉/快照 當下元素資訊物件
* 使用 event 物件找到觸發事件的元素節點

const btnPlus = document.querySelector('.btn-plus');
const number = document.querySelector('.number');
// 將計算值設為全域變數
let count = 0;

// 加法
btnPlus.addEventListener("click", function (e) {
    count += 1;
    number.textContent = count;
    console.log(e);
})

### 透過 nodeName 瞭解目前 DOM 的 HTML 位置

<input type="button" class="btn" value="點擊">
<h1 class="title">標題</h1>

const btn = document.querySelector(".btn");

console.log(btn.getAttribute("value"); // 點擊
console.log(btn.nodeName); // INPUT           

### e.target - 了解目前所在元素位置

<input type="button" class="btn" value="點擊">
<ul class="list">
    <li>標題</li>
    <li>標題<input type="button" class="btn" value="按鈕"></li>
</ul>

const btn = document.querySelector('.btn');

btn.addEventListener("click", function (e) {
    console.log(e); // PointerEvent 物件資料
    console.log(e.target); // <input type="button" class="btn" value="點擊">
})

// 大範圍點擊
// 監聽綁 ul class
const list = document.querySelector(".list");
list.addEventListener("click", function (e) {
    console.log(e.target);
})       

### e.target 搭配 nodeName 節點，抓到你預期要做的事情
* 不需要什麼東西都綁監聽，可以監聽指定一個範圍，然後當下觸發事件是否為想捕捉的資料，設定條件去判斷如果符合條件再去執行函式內容。

<input type="button" class="btn" value="點擊">
<ul class="list">
    <li>標題</li>
    <li>標題<input type="button" class="btn" value="按鈕"></li>
</ul>

const btn = document.querySelector('.btn');

btn.addEventListener("click", function (e) {
    console.log(e); // PointerEvent 物件資料
    console.log(e.target); // <input type="button" class="btn" value="點擊">
})

// 大範圍點擊
// 監聽綁 ul class
const list = document.querySelector(".list");
list.addEventListener("click", function (e) {
    console.log(e.target.nodeName);
    if (e.target.nodeName == "INPUT") {
        console.log('你目前點到按鈕了!');
    }
})    

### preventDefault - 取消預設觸發行為
* 取消預設觸發行為
* 預防轉址行為 ex. href、submit…等

<a href="https://tw.yahoo.com/">連結</a>
<h3></h3>

// preventDefault - 取消預設觸發行為
const myLink = document.querySelector("a");

myLink.addEventListener("click", function (e) {
    e.preventDefault(); //取消轉址等預設行為
    
    //可留在原網頁執行以下行為
    console.log('有被點擊到'); 
    document.querySelector("h3").textContent = "Goodnight!";
})