vue.js - 什么是事件监听器的捕获模式

Question

在Event Modifiers下的vue文档中，有一个名为 capture 的修饰符示例，它声明如下:

<!-- use capture mode when adding the event listener -->
<div v-on:click.capture="doThis">...</div>

我进行了一些搜索，但没有找到关于这如何修改事件绑定(bind)的明确答案，然后我心想‘你知道谁总是有答案吗？堆栈溢出'

Answer 1

所以在发布后我偶然发现了 this article这清楚地说明了这一点。对于这个例子，假设您有三个相互嵌套的元素:

<div class="outer">
    <div class="middle">
        <div class="inner"></div>
    </div>
</div>

当点击事件发生时，有两个阶段:第一个阶段称为捕获，第二个阶段称为冒泡。当你点击.inner时，事件从最外层的容器元素.outer向下遍历，到.middle，再到 .inner在capturing阶段，然后从.inner到.middle，再到.outer 在冒泡阶段。

如果在 .inner 上为点击事件处理程序设置了 capture:

<div class="outer">
    <div class="middle">
        <div class="inner" v-on:click.capture="doThis"></div>
    </div>
</div>

然后你点击它，它会在捕获阶段点击.outer，然后是.middle，然后是.inner，这将导致 doThis(...) 被调用，之后冒泡阶段开始。

如果在 .middle 上为点击事件处理程序设置了 capture

<div class="outer">
    <div class="middle" v-on:click.capture="doThis">
        <div class="inner"></div>
    </div>
</div>

然后你点击它，它会命中.outer，然后是.middle，在捕获阶段，这会导致doThis(...) 被调用，然后在捕获阶段点击 .inner，之后冒泡阶段开始。

编辑:感谢下面所有的精彩回复，我已经修改了答案以修复我不正确的地方。