# 什麼是 DOM？
Document Object Model （文件物件模型）是一個在瀏覽器上提供的介面，瀏覽器將 html 文件（document） 解析為一個個的節點（node）、物件（object），讓我們能用 JavaScript 或其它程式語言來操作、使用它們。

DOM 其實就是瀏覽器提供給我們的一個 API，讓我們能夠在一個固定的標準上去操作網頁裡的元素。

## 事件傳遞機制的順序是什麼；什麼是冒泡，什麼又是捕獲？
事件傳遞分為三個階段，首先是捕獲階段，次要為目標階段，最後是冒泡階段：
1. 捕獲：從瀏覽器的網頁視窗（window）開始，進入文件（document），進入 HTML，然後一層一層的傳到觸發事件的目標。
2. 目標：傳遞到目標，這個階段不屬於捕獲也不屬於冒泡。
3. 冒泡：從目標開始，一層層回傳到網頁視窗（window）為止。

## 什麼是 event delegation，為什麼我們需要它？
「事件代理」就是利用事件傳遞機制的特性，不管目標在哪終究會冒泡回去，不如直接在根節點（父層）加上監聽器作為子節點的代理人，好處是不必為每個元素都增加監聽器，同時還能監聽動態產生的子節點。

## event.preventDefault() 跟 event.stopPropagation() 差在哪裡，可以舉個範例嗎？
+ event.preventDefault()：阻止該元素的預設行為發生，如點擊連結開啟網頁和點擊提交送出表單等。如果在根節點（不管是捕獲還是冒泡階段）加上 event.preventDefault()，這個效果會一直被傳遞下去，所以在子節點中的預設行為同樣會被阻止。**注意 event.preventDefault() 不影響事件傳遞**
+ event.stopPropagation()：阻止事件傳遞給下一節點，若同一個節點還有別的監聽器，其他的監聽器會照常運作。如要終止其他監聽器執行可用 `event.stopImmediatePropagation()`。
---
+ [[第八週]DOM— 操作 DOM 介面](https://medium.com/@miahsuwork/%E7%AC%AC%E5%85%AB%E9%80%B1-dom-%E6%93%8D%E4%BD%9C-dom-%E4%BB%8B%E9%9D%A2-523c135b4fc1)

+ [[第八週]DOM — 瀏覽器事件處理](https://medium.com/@miahsuwork/%E7%AC%AC%E5%85%AB%E9%80%B1-dom-%E7%80%8F%E8%A6%BD%E5%99%A8%E4%BA%8B%E4%BB%B6%E8%99%95%E7%90%86-fb8f6178178a)

+ [[第八週]DOM — 瀏覽器事件傳遞機制](https://medium.com/@miahsuwork/%E7%AC%AC%E5%85%AB%E9%80%B1-dom-%E7%80%8F%E8%A6%BD%E5%99%A8%E4%BA%8B%E4%BB%B6%E5%82%B3%E9%81%9E%E6%A9%9F%E5%88%B6-32abfb67eba3)

+ [DOM 的事件傳遞機制：捕獲與冒泡 by Huli](https://blog.techbridge.cc/2017/07/15/javascript-event-propagation/)