DOM事件架构DOM-Event-Architecture

37次阅读

共计 1100 个字符,预计需要花费 3 分钟才能阅读完成。

一些概念

事件对象(Event Object)

用户触发的点击,滚动,输入等 UI 事件,或者自定义事件,在浏览器中都会被抽象为一个 Event Object(事件对象),事件对象接口封装了事件类型(type)、目标对象(target),当前目标(curentTarget)等属性,也定义了stopPropagationpreventDefault 等方法。

参考文档:https://dom.spec.whatwg.org/#…

事件目标(event target)

事件触发的源目标对象,对应事件对象中的 target 属性

当前事件目标(current event target)

当前执行函数的目标对象,对应事件对象中 curentTarget 属性,可能是事件目标。

事件派发和 DOM 事件流

触发一个事件之后,事件对象被派发给目标对象,派发之前,先计算传播路径propagation path,传播路径对应着文档的树结构,是一个事件目标及其所有祖先的有序列表。如下图所示,事件对象在传播过程中经过三个阶段:

  1. 捕获阶段(Capture phase)
  2. 目标阶段(Target phase)
  3. 冒泡阶段(Bubbling phare)

事件对象在传播过程,执行当前事件目标对该事件对象在该阶段注册的监听,可以回调函数中通过 stopPropagation 方法停止事件对象的进一步传播,codepen 例子。

事件监听

事件目标通过 addEventListener 方法注册监听器

语法

target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener[, useCapture]);

options

listener的配置项:

  • capture:Boolean,表示 listener 是否在捕获阶段触发
  • once:Boolean,表示 listener 是否最多只被调用一次
  • passive:Boolean,表示 listener 是否永远不会调用 preventDefault 方法,如果 listener 调用了,客户端将会忽略,并抛出一次客户端警告,该属性可以被用来优化滚动性能

useCapture
是否注册为捕获阶段的listener,默认为 false

el.addEventListener('click', callback) // 默认冒泡阶段执行监听
el.addEventListener('click', callback, true) // 设置为捕获阶段执行监听
el.addEventListener('click', callback, { capture: false}) // 同上

自定义事件

正文完
 0