###### tags: `JavaScript 學習筆記`
# JavaScript 學習筆記 - 8: Event
所有在網頁上發生的行為都叫做事件:
點擊事件
滾輪事件
離線事件...
要先在 DOM 中註冊事件才可使用

## 註冊事件監聽教學: addEventListener
在 HTML 中

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

在 JS 中監聽點擊事件

const btn = document.querySelector(".btn");
const title = document.querySelector("h1");
btn.addEventListener("click", function(e){
title.textContent = "按鈕被點擊";
})

點擊按鈕後，下方標題會變成"按鈕被點擊"

## 加法器

let count = 0;
btn.addEventListener("click", function(e){
count+=1;
title.textContent = count;
})

可以顯示出點擊多少次

## 告知當下元素資訊
function(e)
裡的 e
可以當成一種快照
裡面記錄當下的各種狀況: 游標位置,點擊...
會把所有資料包成一個物件
物件會送到參數 e 上
可以自行命名
(just e as Event)
也可以只把物件內的某些

## 了解目前 DOM 的 HTML 位置: nodeName

Attribute.nodeName;

## 了解目前所在的元素位置: .target

e.target;

## 抓住預期要做的事: e.target 搭配 nodeName節點

const list = document.querySelector(".list");
list.addEventListener("click", function(e){
  if(e.target.nodeName == "INPUT"){
  console.log("點到按鈕了");
  }
})

## 取消預設默認行為: preventDefault

e.prevenDefault();