关于浏览器的事件流

一 事件流的定义

事件流：DOM(文档对象模型)结构是一个树形结构，当一个HTML元素产生一个事件时，该事件会在元素节点与根节点之间的路径传播，路径所经过的节点都会收到该事件，这个传播过程可称为DOM事件流。

二 事件流的阶段

1 捕获阶段：事件从Document节点自上而下向目标节点传递的阶段

2 目标阶段：真正的目标节点正在处理事件的阶段

3 冒泡阶段：事件从目标节点自下而上像Document节点传递的阶段

三 捕获事件流

捕获事件可以在支持W3C标准的浏览器中使用addEventListener处理，该函数有以下三个参数：

1 事件名

2 触发执行函数

(e) => {
  const {
    target,
    currentTarget
  } = e
  console.log(`target是${target.id}`)
  console.log(`currentTarget是${currentTarget.id}`)
}

3 冒泡阶段还是捕获阶段执行，默认是在冒泡阶段执行

注：e.target:触发事件的元素

        e.currentTarget:绑定事件的元素（就是冒泡阶段和捕获阶段，事件传递的当前节点）

四 阻止事件流

阻止事件流的常用两种方式

e.stopPropagation():阻止目标元素的事件冒泡到父级元素

e.preventDefault():取消一个目标元素的默认行为（例如：a 链接，input标签的submit等）

参考文章：传送门