[筆記] DOM

[TsaiChihWei]

什麼是 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 介面

• [第八週]DOM — 瀏覽器事件處理

• [第八週]DOM — 瀏覽器事件傳遞機制

• DOM 的事件傳遞機制：捕獲與冒泡 by Huli