浅谈---事件冒泡--事件捕获--Vue2.0中的capture

前言

本文主要介绍 事件冒泡 和 事件捕获 以及Vue中的capture

主要内容

事件捕获

含义:从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发,也就是说事件从最上一级元素开始往下查找，直到捕获到事件目标(target)。
直白点:事件触发顺序    父元素->子元素

事件冒泡

含义:从最不精确的对象(document 对象)开始触发，然后到最精确对象(也可以在窗口级别捕获事件，不过必须由开发人员特别指定),也就是说事件从事件目标(target)开始，往上冒泡直到页面的最上一级元素。
直白点:事件触发顺序    子元素->父元素

事件冒泡和事件捕获-图解

W3C标准事件监听

W3C标准事件监听其实是事件冒泡和事件捕获的混合体,任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达了事件源元素。然后，再从事件源往上进行事件冒泡，直到到达document。
使用`addEventListener函数`可以自由选择事件冒泡和事件捕获

element.addEventListener(event-name, callback, use-capture);
表示在 element 这个对象上面添加一个事件监听器，当监听到有 event-name 事件发生的时候，调用 callback 这个回调函数。 use-capture 这个参数，表示该事件监听是在“捕获”阶段中监听（设置为 true）还是在“冒泡”阶段中监听（设置为 false）。

Vue2.0中的capture

代码直接粘走执行,效果很明了

在冒泡阶段中监听事件(默认)

    
    
    
    



  

    
One
    

      
Two
      

        
Three. Click Me!!!
      
    
  

添加修饰符 .capture后 在捕获阶段中监听事件

    
    
    
    



  

    
One
    

      
Two
      

        
Three. Click Me!!!
      
    
  

在Vue.js中，我们用修饰符来达到事件监听是捕获还是冒泡阶段中监听的效果。

...

意思就是不加.capture是事件冒泡,加上.capture就是事件捕获

最后

首先能帮到你最好,写的不对的地方也请多多见谅,请帮我指正出来,欢迎大牛们来!!!

差点忘了

要是对你有帮助,或者觉着写的还可以,可以 推荐和收藏!
3Q!