※ 認識DOM(四)

閱讀時間約 1 分鐘

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

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

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

※ 事件冒泡 Event Bubbling

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

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

raw-image

※ event.stopPropagation()

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

※ 事件捕獲 Event Capturing

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

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

raw-image

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

  • console.log(this)
  • console.log(event.target)
    全端網頁開發專業知識分享
    留言0
    查看全部
    發表第一個留言支持創作者!
    ※ 認識非同步概念(四)
    閱讀時間約 6 分鐘
    ※ 認識非同步概念(五)
    閱讀時間約 1 分鐘
    ※ 認識DOM(一)
    閱讀時間約 2 分鐘
    ※ 認識DOM(二)
    閱讀時間約 1 分鐘
    ※ 認識DOM(三)
    閱讀時間約 6 分鐘
    ※ 讓程式碼更簡潔的方法
    閱讀時間約 2 分鐘