事件流：事件捕获，事件冒泡

事件流

当事件发生时，会在发生事件的元素节点与DOM树根节点之间按照特定的顺序进行传播， 这个过程称之为事件流。

事件流分为事件捕获和事件冒泡二个阶段，默认为事件冒泡

事件捕获

事件由父元素传递到子元素的过程叫做事件捕获。（ture） 查找事件的过程：document–>html–>body–>元素节点–>文本节点向下响应

当点击按钮时执行顺序 => body,button , span 

当点击body时只输出body

事件冒泡（默认）

事件由子元素传递到父元素的过程叫做冒泡（false） 查找事件的过程：文本节点–>元素节点—>body—>html—>document向上响应

当点击按钮时执行顺序 => span , button , body

当点击body时只输出：body

阻止事件捕获，冒泡

js

// 阻止事件冒泡
if ( e && e.stopPropagation ) 
    //因此它支持W3C的stopPropagation()方法 
    e.stopPropagation();   //event.stopPropagation()
else 
    //否则，我们需要使用IE的方式来取消事件冒泡 
    window.event.cancelBubble = true; 
}

// 阻止事件捕获
e.stopImmediatePropagation()；

vue

• .stop 阻止冒泡事件
• .self 只有点击当前元素的时候，才会触发处理函数（忽略冒泡/捕获事件的影响）
• .once 处理函数只被触发一次

<!-- 使用 .stop 阻止冒泡事件-->
<div @click.stop="divClick"></div>
<div @click.self="divClick"></div>
<div @click.self.once="divClick"></div>