D52_W7 DOM 少年事件簿之真珠美人魚

標題沒什麼特別意思，只是覺得這樣寫很帥而已。(?)

DOM 的事件傳遞機制：捕獲與冒泡筆記：
- e.stopPropagation: 停止事件傳遞
- e.stopImmediatePropagation(): 停止同一層級事件傳遞
- 思考：既然我們要阻止網頁預設行為，那網頁有哪些預設行為呢？
- 參考資料：浏览器默认行为
- Event.preventDefault()
DOM 少年，你是誰？

其實 DOM 就是一個 API！因為 html 跟 JS 無法直接溝通，所以 DOM 是一個翻譯...

What is the DOM?
The Document Object Model (DOM) is a programming interface for HTML and XML documents.

Introduction to the DOM

Day02-網頁三兄弟：HTML、CSS、JavaScript.md

Day03-深入理解網頁架構：DOM

重新認識 JavaScript: Day 11 前端工程師的主戰場：瀏覽器裡的 JavaScript

...DOM，展開吧 DOM 讓我們認識你

node 節點就是一個個標籤跟文本內容，看很多文章把 DOM 比喻為一棵樹，裡面有節點、葉子、樹枝（連結）之類的，每個節點有著我們需要的資料

比較人類一點的比喻是，節點是每個年紀發生的故事之類的。

DOM 告訴我你的事

getElementsByTagName
getElementsByClassName
getElementsById
querySelector
querySelectorAll

Traversal 遍歷：找資料、拿資料

Traversing the DOM with JavaScript

hw4：簡答題

什麼是 DOM？
DOM: Document Object Model 直譯叫做「文件物件模型」，不過這樣寫鬼才看得懂。根據 MDN 的介紹，DOM 其實就是一個 API，html 跟 JS 透過這個介面來溝通、交換資料。
DOM 會把 html 裡面的標籤（包含文件、圖片等）定義成物件，這些物件會形成一個樹狀結構，接著我們透過一些常用的內建函式來抓取、更改資料。
事件傳遞機制的順序是什麼；什麼是冒泡，什麼又是捕獲？
1. 事件傳遞的機制是先捕獲後冒泡。
2. 假設有個 html 網頁有這樣的結構：
```
<ul>
 <li>
     <button>點我</button>
 </li>
</ul>
```
  捕獲：capturing，當點擊「點我」這個按鈕時，網頁偵測到事件的發生，於是事件開始由上而下傳遞。
  
  從 window 開始往下傳遞:
  
  window -> document -> html -> body -> ul -> li 為止，這裡都是捕獲階段。
  
  到達按鈕時是 AT_TARGET 階段，接著事件往回傳遞，變成冒泡階段。
  
  冒泡：bubbling，當事件經過捕獲且到達 AT_TARGET 階段後，開始要由下往上回到 window 了，這時會變成 li -> ul -> body -> html -> document -> window
什麼是 event delegation，為什麼我們需要它？
事件代理人，像是把某件事委託給他人去做。
因為事件傳遞機制的特性，因此當我們在監聽網頁時，可以把 eventListener 只放在最上層就可以監聽所有下層的活動，這樣一來除了方便管理以外，也可以增加效率。
event.preventDefault() 跟 event.stopPropagation() 差在哪裡，可以舉個範例嗎？
event.preventDefault(): 取消網頁預設行為
瀏覽器有一些預設行為，例如按下 submit 按鈕，會把欄內的資料送到後端。若使用者沒有填寫完整，這時會造成資料缺失，因此我們可以經過驗證之後再決定要不要送出，這時就可以取消預設行為，來控制網頁功能。
參考資料：preventDefault - 取消預設觸發行為

event.stopPropagation(): 取消事件傳遞行為
當事件傳遞發生時，會經過捕獲與冒泡階段，而取消事件傳遞就是讓事件停止在某一個節點上。

兩者差異：小明去買一杯珍珠奶茶，點餐的時候跟老闆說：「老闆，一杯珍奶不要珍珠」，珍奶加珍珠就是一種預設行為（如果珍奶裡面沒有珍珠，那就是廣告不實），不加珍珠就是取消預設行為；老闆接到訂單以後，轉身開始製作飲料，整個做飲料的過程就是事件傳遞行為：「拿杯子 -> 倒奶茶 -> 封口 -> 裝袋」，如果在做到一半的過程中，小明跟老闆說：「老闆我不要了」，這時候行為可能會停在倒奶茶，或者封口之後，這就是取消事件傳遞。
然後，小明可能會被老闆揍。