DOM Event
事件流
事件流分为三个阶段:事件捕捉,目标触发,事件冒泡
事件捕捉
注册事件类型发生后,从html
到目标节点的父节点,会触发每一个节点注册的捕捉事件。事件捕捉阶段不包括目标节点,即目标节点的事件触发并不发生在这个阶段。
目标触发
当事件捕捉阶段结束,就到了目标阶段。这个时候再目标节点上触发事件的顺序,是不分事件捕捉和事件冒泡,而是根据注册顺序依次执行。
事件冒泡
目标阶段触发完后,到了冒泡阶段。从目标节点的父节点到html
节点,依次触发该节点注册的冒泡事件。
event对象
需要关注的参数和方法不多。
event方法
preventDefault
:阻止节点的浏览器行为;a
标签不会跳转,button
不会触发点击特效。
stopPropagation
:阻止事件流的进一步发生。
event属性
target
: 目标节点。
currentTarget
:注册当前触发事件的节点
addEventListener
target.addEventListener(type, listener[, options])
;
target.addEventListener(type, listener[, useCapture])
;
我们常用的是第二种,通过Boolean
来开启事件捕捉。
我们主要看看第一种使用方法,拥有options
的配置项。
options
:
-
capture
:是否事件捕捉 -
once
:事件最多触发一次 -
passive
:声明触发事件不会使用prevenDefault