三者的關系是怎樣的呢
一、事件捕獲和冒泡是現代瀏覽器的執行事件的兩個不同階段
二、事件委托是利用冒泡階段的運行機制來實現的
事件冒泡和捕獲的運行圖
運行條件：當一個事件發生在具有父元素的的元素上時，現代瀏覽器根據事件添加時的設置來執行（冒泡或者捕獲）
通過 addEventListener() 的第三個屬性來設置事件是通過捕獲階段注冊的（true），還是冒泡階段注冊的（false）。默認情況下是false。
事件冒泡
從實際操作的元素（事件）向上級父元素一級一級執行下去，直到達到<html>
有些時候父元素和子元素都定義了click事件，但是不希望點擊子元素的時候執行父元素的click事件（例如dialog彈窗的遮罩層如果是父元素，而dialog彈窗內容層是子元素，同時可以通過點擊遮罩層來關閉彈窗，但是點擊內容層不關閉彈窗），可以通過stopPropagation()在子元素上阻止冒泡。
事件捕獲（一般不會用到）
瀏覽器檢查元素的最外層祖先<html>，是否在捕獲階段中注冊了一個onclick事件處理程序，如果是，則運行它。
然后，它移動到<html>中的下一個元素(點擊的元素的父元素)，并執行相同的操作，然后是下一個元素(點擊的元素的父元素)，依此類推，直到到達實際點擊的元素。
事件捕獲和冒泡的區別
執行順序的不同
冒泡：
捕獲：
事件委托使用場景
如果你想要在大量子元素（包括動態添加的）中單擊任何一個就可以運行一段代碼，這個時候可以把事件監聽器設置在父節點上。
實現方式 jquery 中的 on
相關推薦：
有關javascript中事件冒泡和事件捕獲機制
事件冒泡和事件捕獲實例詳解
Javascript中事件捕獲、事件冒泡以及事件委托機制
以上就是事件捕獲和冒泡以及事件委托對比分析的詳細內容，更多請關注php中文網其它相關文章！