※ 認識DOM(四)
更新於 發佈於 閱讀時間約 1 分鐘
※ 說明事件委派 (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)
留言0
查看全部
你可能也想看
Google News 追蹤
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
前言部分講得很淺，現在我們來深入認識一下「劇情」是做什麼的。
※為避免怕大家搞混，以下都將情節稱為「事件」，還請見諒。
❈❈❈
一、角色有推展、有動作，而不單單只是一個畫面，沒有前後，沒頭沒尾。
二、一個事件扣著一個事件，而不是這個做完了就沒事，完全延宕。
三、每個事件
社團招生活動怎麼規劃？招生時程怎麼安排？要如何掌握招生的風險控管？這篇彙整我過往的活動加上行銷的經歷，以電商的「行銷漏斗－曝光互動轉換」和「活動誘因公式」來規劃招生計畫。
組件之間的通信是 Vue 應用開發中的一個重要方面。Vue 提供了一種名為事件發射（emit）的機制，讓子組件能夠向父組件發送消息。本文將介紹 Vue 中的事件發射（emit）機制，並通過實際範例演示其用法。
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
前言部分講得很淺，現在我們來深入認識一下「劇情」是做什麼的。
※為避免怕大家搞混，以下都將情節稱為「事件」，還請見諒。
❈❈❈
一、角色有推展、有動作，而不單單只是一個畫面，沒有前後，沒頭沒尾。
二、一個事件扣著一個事件，而不是這個做完了就沒事，完全延宕。
三、每個事件
社團招生活動怎麼規劃？招生時程怎麼安排？要如何掌握招生的風險控管？這篇彙整我過往的活動加上行銷的經歷，以電商的「行銷漏斗－曝光互動轉換」和「活動誘因公式」來規劃招生計畫。
組件之間的通信是 Vue 應用開發中的一個重要方面。Vue 提供了一種名為事件發射（emit）的機制，讓子組件能夠向父組件發送消息。本文將介紹 Vue 中的事件發射（emit）機制，並通過實際範例演示其用法。