概念理解
1、事件捕獲(event capturing)
事件從頂層(window對象)開始觸發到被點擊的精確元素事件觸發的過程
2、事件冒泡
事件從點擊元素事件觸發到頂層對象事件觸發的順序觸發過程
3、流程圖說明
簡單的來說,捕獲:一個自頂層元素向最裏層元素(HTML代碼爲包裹的形式的)執行事件的方式;冒泡:從最裏層元素向最外層元素觸發事件。
代碼說明
1、普通方式,默認冒泡,先執行裏層,再執行外層
2、阻止冒泡e.stopPropagation(),事件不再向上傳遞。
3、改變默認事件執行方式(冒泡)。採用事件捕獲 方式(可以改變重疊元素的事件執行順序)
4、vue中默認是冒泡,更改爲事件捕獲方式
可以在父元素添加capture屬性採用事件捕獲,從而改變事件執行順序爲先執行父元素方法再執行子元素方法
5、vue中阻止事件向上傳遞,即只想執行子元素點擊事件,不想觸發父元素點擊事件,可以在子元素添加stop屬性