A Dirty Deal
概述
- 事件根据事件模型规定的传播路径被逐级传递, 在传播过程中依次触发对应的事件监听器, 然后被继续传递. 直到完成事件传播, 或是传播过程被终止.
事件路径 和 DOM 分支 ( branch )
- 从事件源所在节点 ( event.target ) 逐级向上一直追溯到 window 对象的路径中的一系列节点, 构成了一个 DOM 分支.
- 这个分支就是该事件传播的路径
- 示意图:
-
在下图中, <td> 元素就是 事件源所在节点. 它和父级元素层层向上构成了一个事件在不同阶段传播的路径.
事件传播的路径和事件传播的三个阶段
-
事件传播的阶段 Event Propagation Phases:
- 事件传播是JS DOM事件中各阶段的概括, 由三个阶段组成:
-
捕获阶段 capture phase
- 事件从 window 对象逐级向下传播, 直到目标对象的父节点的过程
-
目标阶段 target phase
- 事件到达目标节点自身
-
冒泡阶段 bubble phase
- 事件从目标的父节点逐级向上传播, 一直到达 window 对象的过程
-
event.target 和 event.currentTarget
- event.target :
- 事件源, 事件传播路径的中心
- event.currentTarget:
- 在事件传播过程中, 每次触发监听器时, 监听器所在(绑定)的对象.
监听器的绑定
- 在一个节点上, 可以绑定多个同类型的事件监听器. 当事件传播到这个节点上的时候, 监听器根据绑定的先后依次触发. (队列)
不同类型的监听器在三个阶段的表现:
- 使用 addEventListener() 绑定事件监听器
target.addEventListener(type, listener[, useCapture])- 捕获型事件监听器:
- 在 addEventListener() 函数中, 第三个参数 (捕获标志位) 为true 的事件监听器.
el.addEventListener('click', listener, true)
- 在 addEventListener() 函数中, 第三个参数 (捕获标志位) 为true 的事件监听器.
- 捕获型事件监听器:
-
捕获阶段:
- 在捕获阶段的路径中, 捕获器 ( capturer listener ) 会主动捕获事件, 然后触发.
-
目标阶段:
- 在这个阶段, 目标节点上的所有监听器会按照绑定的顺序依次地触发.
-
冒泡阶段:
- 在这个阶段, 节点上的非捕获监听器会被触发.
-
不会冒泡的事件
- 需要注意的是, 有一部分事件是不会冒泡的:
- 例如 focus, blur, load 事件.
- 因此它们的监听器必须设置为捕获器才会有效.
- 需要注意的是, 有一部分事件是不会冒泡的:
控制事件传播
-
event.stopPropagation()
- 事件的传播路径停止在当前监听器的节点上.
- 路径中该位置上的其他同类事件监听器仍然能够响应事件.
-
event.stopImmediatePropagation()
- 事件的传播立即结束.
- 该位置上的其他同类事件监听器不会被触发
-
取消事件默认行为
- event.preventDefault()
