一 事件流的定义
事件流: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等)
参考文章:传送门