共计 1100 个字符,预计需要花费 3 分钟才能阅读完成。
一些概念
事件对象(Event Object)
用户触发的点击,滚动,输入等 UI 事件,或者自定义事件,在浏览器中都会被抽象为一个 Event Object
(事件对象),事件对象接口封装了事件类型(type)、目标对象(target),当前目标(curentTarget)等属性,也定义了stopPropagation
、preventDefault
等方法。
参考文档:https://dom.spec.whatwg.org/#…
事件目标(event target)
事件触发的源目标对象,对应事件对象中的 target 属性
当前事件目标(current event target)
当前执行函数的目标对象,对应事件对象中 curentTarget 属性,可能是事件目标。
事件派发和 DOM 事件流
触发一个事件之后,事件对象被派发给目标对象,派发之前,先计算传播路径propagation path
,传播路径对应着文档的树结构,是一个事件目标及其所有祖先的有序列表。如下图所示,事件对象在传播过程中经过三个阶段:
- 捕获阶段(Capture phase)
- 目标阶段(Target phase)
- 冒泡阶段(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}) // 同上
自定义事件
正文完
发表至: javascript
2019-08-17