---
# System prepended metadata

title: 'JavaScript 學習筆記 - 8: Event'
tags: [JavaScript 學習筆記]

---

###### 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();
```