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

时间:2024-04-02 07:33:50

概念理解 

1、事件捕获(event capturing)

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

2、事件冒泡

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

3、流程图说明

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

简单的来说,捕获:一个自顶层元素向最里层元素(HTML代码为包裹的形式的)执行事件的方式;冒泡:从最里层元素向最外层元素触发事件。

 

代码说明

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

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

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

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

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

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

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

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

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

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

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

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

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

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