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

2019-03-30  本文已影响0人  __笑我一世沉沦丶

我们给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
上一篇下一篇

猜你喜欢

热点阅读