概念理解
1、事件捕获(event capturing)
事件从顶层(window对象)开始触发到被点击的精确元素事件触发的过程
2、事件冒泡
事件从点击元素事件触发到顶层对象事件触发的顺序触发过程
3、流程图说明
简单的来说,捕获:一个自顶层元素向最里层元素(HTML代码为包裹的形式的)执行事件的方式;冒泡:从最里层元素向最外层元素触发事件。
代码说明
1、普通方式,默认冒泡,先执行里层,再执行外层
2、阻止冒泡e.stopPropagation(),事件不再向上传递。
3、改变默认事件执行方式(冒泡)。采用事件捕获 方式(可以改变重叠元素的事件执行顺序)
4、vue中默认是冒泡,更改为事件捕获方式
可以在父元素添加capture属性采用事件捕获,从而改变事件执行顺序为先执行父元素方法再执行子元素方法
5、vue中阻止事件向上传递,即只想执行子元素点击事件,不想触发父元素点击事件,可以在子元素添加stop属性