vue中的.capture和.self区分及初步理解

.capture和.self区分

capture和self主要是函数执行顺序的问题

.capture先执行父级的函数,再执行子级的触发函数(一般用法),

即是给元素添加一个监听器,当元素发生冒泡时,先触发带有该修饰符的元素。若有多个该修饰符,则由外而内触发。

            
                123             
        

此时点击子级的div时,会先执行alert(‘1’),再执行alert(‘2’)

self是只执行子级本身的函数

            
                123             
        

此时点击子级的div会执行alert(‘2’),不会执行alert(‘1’)

修饰符capture和self

capture

.capture事件修饰符的作用添加事件侦听器时使用事件捕获模式

即是给元素添加一个监听器,当元素发生冒泡时,先触发带有该修饰符的元素。若有多个该修饰符,则由外而内触发。

就是谁有该事件修饰符,就先触发谁。(捕获阶段触发,从外向内,没有capture修饰符的,从内向外冒泡触发)




    
    .capture事件修饰符
    
    


obj1
obj2
obj3
obj4

self

只当事件是从侦听器绑定的元素本身触发时才触发回调




    
    .capture事件修饰符
    
    


box1
box2
box3

以上是本人暂时的理解,希望可以帮助到大家,如果有不同见解,可以一起讨论学习!! 

你可能感兴趣的:(vue中的.capture和.self区分及初步理解)