什么是vuejs v-on的capture模式

Question

什么是vuejs v-on的capture模式

Answer 1

这个涉及到了javascript event，事件操作机制。

我们看下javascript的标准的事件监听函数：

element.addEventListener(<event-name>, <callback>, <use-capture>);

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

第三个参数就是你想要的答案。

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

看个例子，这会很好帮助你理解冒泡和捕获在dom结构中如何过渡的。

// 默认为冒泡阶段中监听事件

https://jsfiddle.net/xiaoluoboding/x02gb8jk/

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

https://jsfiddle.net/xiaoluoboding/x02gb8jk/3/