什么是事件冒泡与事件捕获
dom标准事件流的触发的先后顺序为:**先捕获再冒泡。**即当触发dom事件时,会先进行事件捕获,捕获到事件源之后通过事件传播进行事件冒泡。
事件源:当鼠标点击或者触发dom事件时(被触发dom事件的这个元素被叫作事件源)
事件捕获: 浏览器会从**根节点 =>事件源(由外到内)**进行事件传播。
事件冒泡:默认情况下,事件使用冒泡事件流。事件源 =>根节点(由内到外)。进行事件传播。一层一层往上抛。
例:当事件(例如单击事件)在某一DOM元素上被触发时,事件将沿着该节点的各个父结点冒泡穿过整个DOM节点层次。在冒泡过程中的任何时候都可以终止事件的冒泡。如果不停止事件的传播,事件将一直通过DOM冒泡直至到达文档根。 如下图:
例:给每个元素添加捕获事件,点击span。效果如下:
给每个元素添加事件冒泡,点击span, 效果:
注:我们通过给元素设置addEventListener(enent,function,useCapture)
添加监听事件。其函数有三个参数:
-
event
:事件名称,例如click, keyup,keydown等 -
function
:当触发注册的事件后调用的回调函数,function。 -
useCapture
:可选。布尔值,指定事件是否在捕获或冒泡阶段执行。 -
true
- 事件句柄在捕获阶段执行 -
false
- false- 默认。事件句柄在冒泡阶段执行
面试题: