事件捕獲和冒泡以及事件委託的原理和區別

時間 2019-12-13

原文原文鏈接

爲何要弄清楚事件捕獲和冒泡以及事件委託

1、面試必問的問題
2、在過去糟糕的日子裏，瀏覽器的兼容性比如今要小得多，Netscape（網景）只使用事件捕獲，而Internet Explorer只使用事件冒泡。當W3C決定嘗試規範這些行爲並達成共識時，他們最終獲得了包括這兩種狀況（捕捉和冒泡）的系統，最終被應用在如今瀏覽器裏。
3、容易把事件委託理解爲單獨的執行階段

三者的關係是怎樣的呢

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

事件冒泡和捕獲的運行圖

運行條件：當一個事件發生在具備父元素的的元素上時，現代瀏覽器根據事件添加時的設置來執行（冒泡或者捕獲）

經過 addEventListener() 的第三個屬性來設置事件是經過捕獲階段註冊的（true），仍是冒泡階段註冊的（false）。默認狀況下是false。html

事件冒泡

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

有些時候父元素和子元素都定義了click事件，可是不但願點擊子元素的時候執行父元素的click事件（例如dialog彈窗的遮罩層若是是父元素，而dialog彈窗內容層是子元素，同時能夠經過點擊遮罩層來關閉彈窗，可是點擊內容層不關閉彈窗），能夠經過stopPropagation()在子元素上阻止冒泡。