※ 認識DOM(四)

※ 說明事件委派 (Event Delegation) ，背後的運作機制。

網頁元素接收事件的順序，流程有兩種個方向的傳遞：

• 由下而上的，稱為事件冒泡 (event bubbling)
• 由上而下的，稱為事件捕獲 (event capturing)

※ 事件冒泡 Event Bubbling

事件冒泡指的是「從啟動事件的節點 (event.target) 開始，逐層往上傳遞」，直到整個網頁的根節點 document 為止。

例如在 Todo List 裡監聽刪除事件時，click 事件發生在刪除按鈕 i.delete 上，但由於事件為往上傳遞，因此 ul 也收到了 click 事件，因而啟動了監聽器裡的 handler。

※ event.stopPropagation()

如果不希望某個事件在DOM樹中進一步傳播時，可以使用這個方法。例如，在一個位於某個父元素內的按鈕觸發事件時，如果不想讓這個事件影響到父元素，就可以使用 event.stopPropagation()。

※ 事件捕獲 Event Capturing

由上而下的傳遞則稱為「事件捕獲」(Event Capturing) 。

當你點擊某個元素時，瀏覽器會先從最高層開始 capturing，一路前往到事件 target，再向上 bubbling。由於元素之間有這樣的上下回報機制，我們的事件才能順利地動起來。

※ 檢查事件是怎麼觸發的、又傳去了哪裡的工具：

• console.log(this)
• console.log(event.target)