什么是事件监听器上的捕获模式

Question

在事件修饰符下的vue文档中,有一个调用的示例,capture其中包含以下内容:

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

我已经做了一些搜索,但是没有找到关于如何修改事件绑定的明确答案,然后我想到了自己'你知道谁总能找到答案吗？堆栈溢出'

Answer 1

所以发布后我偶然发现了这篇文章,清楚地说明了这一点.让我们说这个例子你有三个元素嵌套在一起:

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

当发生单击事件时,有两个阶段:第一阶段称为捕获,第二阶段称为冒泡.当你点击.inner,该事件从最外层容器元素贯穿下来.outer,到.middle,然后.inner在拍摄阶段,然后.inner到.middle,然后.outer在冒泡阶段.

如果为click事件处理程序设置了capture.inner:

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

然后点击它,它会调用doThis(...)三次,第一次来自.outer,第二次来自.middle,第三次来自.inner.

如果为单击事件处理程序设置了捕获.middle

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

然后你点击它,它将调用doThis(...)两次,第一次来自.outer和第二次.middle

Answer 2

一个元素上的气泡和捕获事件处理程序都只会被触发一次，区别在于它们被触发的时间（在子元素之前或子元素之后）。捕获模式意味着处理程序在子元素上的任何处理程序之前触发。气泡模式（默认），意味着在所有子元素完成其处理程序后触发处理程序。您甚至可以通过执行以下操作来放置捕获模式和气泡模式事件处理程序<div v-on:click="doThis" v-on:click.capture="doThis">

这个JS 小提琴演示了单击嵌套的内部元素如何首先以“从外到内”的顺序触发捕获处理程序，然后以“从内到外”的顺序触发气泡处理程序。