进一步理解事件修饰符“.capture”

进一步理解事件修饰符“.capture”

1、DOM事件的传播机制

DOM的事件传播机制有两个阶段：一个是捕获阶段，一个是冒泡阶段。捕获阶段是从外到内，冒泡阶段是从内到外。举例来说，假如有如下的两个嵌套在一起的<div>，如下所示：

如果我们分别内层和外层的<div>定义了捕获阶段和冒泡阶段的点击事件的事件处理方法，那么我们是可以看到其完整的执行顺序的。其执行顺序如下：

    （1）外层<div>的捕获阶段的处理方法被执行；

    （2）内层<div>的捕获阶段的处理方法被执行；

    （3）内层<div>的冒泡阶段的处理方法被执行；

    （4）外层<div>的冒泡阶段的处理方法被执行；

Vue 默认的v-on绑定的事件处理方法是冒泡阶段的事件处理方法，不是捕获阶段的事件处理方法。请参见下面的代码：

 图1嵌套的<div>

这段代码在浏览器中看到的效果如图2所示。当我们点击外层<div>时，外层是target，即此时的最内层，因为vue绑定的事件默认的冒泡阶段的，所以并没有定义外层<div>的捕获阶段的事件处理方法，所以只有外层<div>的冒泡阶段的事件处理方法outerDivClick被执行。所以我们点击外层的<div>里的文字“这是外层的div，你可以点击我”时，看到的输出如图3所示：

 图2 外层<div>被点击

当我们点击内层<div>时，内层是target，即此时的最内层，同理，vue绑定的事件默认的冒泡阶段的，所以并没有定义外层<div>的捕获阶段的事件处理方法，也没有定义内层<div>的捕获阶段的事件处理方法，所以只有冒泡阶段的事件处理方法被执行。又因为外层和内层<div>的冒泡阶段的事件处理方法都被定义了，即outerDivClick和innerDivClick两个都是冒泡阶段的事件处理方法，所以这两个都要被执行。其顺序是先内后外，所以我们点击内层的<div>里的文字“这是内层的div，你可以点击我”时，看到的输出如图4所示：

图4 内层<div>被点击 

2、“.capture”事件修饰符的作用

 如果我们在事件绑定时想绑定捕获阶段的事件处理方法，就可以使用“.capture”修饰符。加了“.capture” 修饰符之后，该事件处理方法是捕获阶段的事件处理方法了。例如，我们给外层的<div>的v-on指令加上“.capture”修饰符，此时，外层的事件处理方法是捕获阶段的，内层的还是冒泡阶段的。上面的代码修改如下：

此时，点击外层的<div>，外层的捕获阶段的事件处理方法被执行。其结果如图4所示：

图4 外层<div>被点击 

点击内层<div>，外层<div>的捕获阶段的事件处理方法先被执行，内层<div>的冒泡阶段的事件处理方法后被执行，其执行结果如图5所示：

图5 内层<div>被点击 

思考：如果我们给内外两层<div>的v-on指令都加上“.capture”修饰符，那么点击外层或点击内层的输出会是什么样子？

此时，如果我们给内外层<div>的v-on指令都加上“.capture”修饰符，那么两个处理方法将都被定义为捕获阶段的事件处理方法，点击外层时，依然是只有外层的捕获处理方法会被执行。点击内层时，两个捕获阶段的事件处理方法都会被执行，执行顺序是先外后内。