事件捕獲和冒泡以及事件委託對比分析

三者的關係是怎樣的呢

一、事件捕獲和冒泡是現代瀏覽器的執行事件的兩個不同階段
二、事件委託是利用冒泡階段的運作機制來實現的

事件冒泡與捕獲的運行圖

运行条件：当一个事件发生在具有父元素的的元素上时，现代浏览器根据事件添加时的设置来执行（冒泡或者捕获）

透過addEventListener() 的第三個屬性來設定事件是透過擷取階段註冊的（true），還是在冒泡階段註冊的（false）。預設情況下是false。

事件冒泡

從實際操作的元素（事件）向上級父元素一級一級執行下去，直到達到

有些时候父元素和子元素都定义了click事件，但是不希望点击子元素的时候执行父元素的click事件（例如dialog弹窗的遮罩层如果是父元素，而dialog弹窗内容层是子元素，同时可以通过点击遮罩层来关闭弹窗，但是点击内容层不关闭弹窗），可以通过stopPropagation()在子元素上阻止冒泡。

事件捕獲（一般不會用到）

瀏覽器檢查元素的最外層祖先，是否在捕獲階段中註冊了一個onclick事件處理程序，如果是，則運行它。
然後，它移動到中的下一個元素(點擊的元素的父元素)，並執行相同的操作，然後是下一個元素(點擊的元素的父元素)，依此類推，直到到達實際點擊的元素。

事件擷取與冒泡的差異

執行順序的不同
冒泡：

##擷取：

事件委託使用場景

如果你想要在大量子元素（包括動態新增的）中點擊任何一個就可以執行一段程式碼，這個時候可以把事件監聽器設定在父節點上。

實作方式jquery 中的on

相關推薦：

##關於javascript中事件冒泡與事件擷取機制

事件冒泡與事件擷取實例詳解

Javascript中事件擷取、事件冒泡以及事件委託機制

#

以上是事件捕獲和冒泡以及事件委託對比分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！