本篇為 [FE102] 前端必備：JavaScript 這門課程的學習筆記。如有錯誤歡迎指正。
前言
久久未更新，自從加入第四期程師導師計畫後，不知不覺持續寫程式也快滿三個月了。這禮拜進入第二次複習週，雖然仍有許多進度要補上，回頭複習也同樣重要！
於是乎，趁這週把之前實作過的 Todo List 觀念再重整一次，除了練習如何透過 JavaScript 操控 DOM 元素、也熟悉事件傳遞機制、如何進行事件監聽等等，寫下這篇筆記做記錄。
目標功能
- 新增 todo
- 刪除 todo
- 標記 todo 為已完成/未完成
- 延伸：搭配 localStorage 本地儲存
Step1. 分析網頁所需元素
wrapper：包含整個 Todo List 的容器.todo__input：輸入欄位 input 和新增按鈕.todo__list：放置所有 todo 的容器.todo：切換狀態 checkbox、todo 標題、刪除按紐
Step2. 開始切版
按照設計稿，寫出程式碼如下：
- 在
<label>標籤中放入input標籤，就不需指定 for 和 id。可參考：HTML<label>标签的 for 属性。
將上述程式碼再加入 css 屬性，排版後版面如下：
Step3. 建立監聽事件
在處理事件時，通常會需要指派監聽者（Event listeners）來監聽事件觸發。
透過監測 DOM 中的某一元素（element），當使用者觸發某事件（event）時，就會執行後續動作（functuion），語法如下：
element.addEventListener(‘event’, function, useCapture)- event 事件：監聽事件類型，如：
click或keypress - function 功能：當指定事件觸發時執行函式
- useCapture：指定事件在捕獲或冒泡階段執行，預設值為 flase（冒泡）
參考筆記：[week 7] DOM 事件傳遞機制：捕獲與冒泡、事件代理
新增 todo
- 在輸入框
點選 Add/按下 Enter 鍵，可新增 todo - 新增後清空輸入框內容
步驟如下：
- 選取需要的 DOM 元素，監聽該元素的
click/keypress事件
2. 若接收到事件，以函式 addTodos 處理新增 todo
3. 利用跳脫函式 escapeHtml 處理特殊字元，防止程式碼無法正常顯示
刪除 todo
- 點擊右側叉叉圖示，可刪除 todo
遇到問題：動態新增
由於 todo 是「動態新增」，若直接選取 .btn-delete，將無法對後來新增的按鈕進行監聽。
解決辦法：事件代理
我們可透過事件傳遞機制，改成對父元素（事件代理）進行事件監聽，如此即可對底下的所有 .btn-delete 進行監聽。
標記 todo 為已完成/未完成
- 點擊左側框框，能夠切換狀態為
check/uncheck
步驟如下：
- 同樣監聽 checkbox 的父元素
.todo__list - 若點擊目標包含 checkbox，即可切換狀態
延伸：搭配 localStorage 本地儲存
localStorage
- 是由 HTML5 提供的一種 Web Storage
- 儲存大小約 5MB
- 可將資料儲存在用戶端，資料就不會因重整頁面或關閉瀏覽器而消失
- 以 key-value pair 的形式保存，且會轉成 JSON 字串格式
localStorage method
- 儲存資料：
localStorage.setItem(‘key’, ‘value’) - 讀取資料：
let storageValue = localStorage.getItem(key, — value) - 清除資料：
localStorage.removeItem(key) - 清除全部資料：
localStorage.clear()
搭配 localStorage 實作 Todo List，我們可將資料存放在瀏覽器。但似乎還需要時間來研究如何使用，等之後熟悉用法會再來更新！
參考內容：
1. [JS初心者]帶你用localStorage做出一個陽春版「To-Do List」(待辦清單)-1
2. Day 20–30 天 Progressive Web App 學習筆記 — To-Do List 實作 PWA — (新增/修改/刪除待辦事項清單)
3. JS30-Day15-LocalStorage
4. HTML5 Web Storage
5. [JavaScript] Cookie、LocalStorage、SessionStorage 三種差異
