vue中的事件冒泡和捕获(stop、capture)

我们给DOM绑定事件

      对Dom的操作作为事件会从最外面的祖先Dom逐步传递到目标Dom（捕获过程），然后再从目标的Dom原路传出去（冒泡过程）。通常我们只监听冒泡过程。在vue中，当我们添加了事件修饰符capture后，才会变成捕获监听器。

image.png

      这时我们有8个监听器了，在捕获过程和冒泡过程都有监听。输出如下图。

image.png

在h5中的事件捕获冒泡

      我们在js中通过addEventListener方法给Dom添加事件监听。这个方法有三个参数可以传递addEventListener(event,fn,useCapture)。event是事件类型click，focus，blur等；fn是事件触发时将执行的函数方法（function）；第三个参数可以不传，默认是false，这个参数控制是否捕获触发。所以我们只穿两个参数时，这个事件是冒泡传递触发的，当第三个参数存在且为true时，事件是捕获传递触发的。

阻止事件冒泡

      在不使用任何框架的情况下，我们在js中通过stopPropagation方法阻止事件继续传递。 使用框架时可使用对应的框架提供的方法。接下来我将了Vue框架的stop修饰符来阻止事件传递。 我们可以在传递过程中阻止事件继续传递，防止触发不需要的事件。

image.png
image.png