js、vue事件捕獲、事件冒泡說明與使用

概念理解 

1、事件捕獲(event capturing)

事件從頂層(window對象)開始觸發到被點擊的精確元素事件觸發的過程

2、事件冒泡

事件從點擊元素事件觸發到頂層對象事件觸發的順序觸發過程

3、流程圖說明

簡單的來說,捕獲:一個自頂層元素向最裏層元素(HTML代碼爲包裹的形式的)執行事件的方式;冒泡:從最裏層元素向最外層元素觸發事件。

 

代碼說明

1、普通方式,默認冒泡,先執行裏層,再執行外層

2、阻止冒泡e.stopPropagation(),事件不再向上傳遞。

3、改變默認事件執行方式(冒泡)。採用事件捕獲 方式(可以改變重疊元素的事件執行順序)

4、vue中默認是冒泡,更改爲事件捕獲方式

可以在父元素添加capture屬性採用事件捕獲,從而改變事件執行順序爲先執行父元素方法再執行子元素方法

5、vue中阻止事件向上傳遞,即只想執行子元素點擊事件,不想觸發父元素點擊事件,可以在子元素添加stop屬性

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章