js、vue事件捕获、事件冒泡说明与使用

概念理解 

1、事件捕获(event capturing)

事件从顶层（window对象）开始触发到被点击的精确元素事件触发的过程

2、事件冒泡

事件从点击元素事件触发到顶层对象事件触发的顺序触发过程

3、流程图说明

简单的来说，捕获：一个自顶层元素向最里层元素（HTML代码为包裹的形式的）执行事件的方式；冒泡：从最里层元素向最外层元素触发事件。

 

代码说明

1、普通方式，默认冒泡，先执行里层，再执行外层

2、阻止冒泡e.stopPropagation()，事件不再向上传递。

3、改变默认事件执行方式（冒泡）。采用事件捕获 方式（可以改变重叠元素的事件执行顺序）

4、vue中默认是冒泡，更改为事件捕获方式

可以在父元素添加capture属性采用事件捕获，从而改变事件执行顺序为先执行父元素方法再执行子元素方法

5、vue中阻止事件向上传递，即只想执行子元素点击事件，不想触发父元素点击事件，可以在子元素添加stop属性