---
# System prepended metadata

title: 0420 JavaScript 工作坊
tags: [JavaScript]

---

# 0420 JavaScript 工作坊
###### tags: `JavaScript`



## addEventListner()


### 事件名稱
### 事件處理器
```javascript=
let button = document.querySelector('button')
button.addEventListener()

Event Handler 的參數為事件物件
```


### 事件冒泡與捕獲
DOM的事件傳遞

根目錄往下走
**（捕獲 > 找到目標 > 冒泡 ！）**



- nextElementSibling 找同層關係的下一個
- previousElementSibling 找同層關係的上一個
- parentNode 選擇父層
- ChildNode 選擇子層

---

- event.target 事件發生的元素（滑鼠指向的元素）
  - 例：監聽事件為 `click` 
    - 滑鼠點到誰，誰就是 target
- event.currentTarget 綁定事件的元素，有監聽事件的元素
  - 例：監聽事件為 `click`，對象為 `div`
    - 滑鼠點擊時，currentTarget 就會被設定成 div
- 綁定監聽事件，觸發事件後會得到一個引數，那個引數會自帶很多屬性

---


```javascript=
document.addEventListener('DOMContentLoaded', function () {
  document.querySelector('#button').addEventListener('click', (e) => {
    console.log(e)
    console.log('target:', e.target)  // 可在 console 上確認 target 是誰
    console.log('currentTarget:', e.currentTarget)  
                    // 可在 console 上確認 currentTarget 是誰
  )}
)}
```
[DOM的事件傳遞機制：捕獲與冒泡](https://blog.techbridge.cc/2017/07/15/javascript-event-propagation/)
![](https://i.imgur.com/O1l6YLd.png)



---


## localStorage

[可參考這個解釋蠻好的文章](https://medium.com/麥克的半路出家筆記/javascript-localstorage-的使用-e0da6f402453)

概念像是蝦皮的搜尋bar，會看到自己的歷史搜尋紀錄
這些紀錄會存在瀏覽器上（５MB），但不會存到資料庫

可以跨瀏覽器分頁做使用、關掉分頁或瀏覽器再打開資料仍不會消失
且資料無期效限制，資料將永久被保留

範例：搜尋過 iPhone & hello world
![](https://i.imgur.com/JCBN7wx.png =500x)

＊＊資料儲存的格式 key 和 value 都只能是「字串」


- JSON.stringfy
- JSON.parse



### 使用方法
- setItem ('key', "value")
```javascript=
localStorage.setItem(key, value)
```
- getItem
```javascript=
localStorage.getItem(key)
```
- removeItem
```javascript=
localStorage.removeItem(key)
```

dataset.id -> 生一個 id

