Javascript事件捕获与事件冒泡

1,745 阅读1分钟

什么是事件冒泡与事件捕获

dom标准事件流的触发的先后顺序为:**先捕获再冒泡。**即当触发dom事件时,会先进行事件捕获,捕获到事件源之后通过事件传播进行事件冒泡。

事件源:当鼠标点击或者触发dom事件时(被触发dom事件的这个元素被叫作事件源)

事件捕获: 浏览器会从**根节点 =>事件源(由外到内)**进行事件传播。

事件冒泡默认情况下,事件使用冒泡事件流事件源 =>根节点(由内到外)。进行事件传播。一层一层往上抛。

例:当事件(例如单击事件)在某一DOM元素上被触发时,事件将沿着该节点的各个父结点冒泡穿过整个DOM节点层次。在冒泡过程中的任何时候都可以终止事件的冒泡。如果不停止事件的传播,事件将一直通过DOM冒泡直至到达文档根。 如下图:

例:给每个元素添加捕获事件,点击span。效果如下:

给每个元素添加事件冒泡,点击span, 效果:

注:我们通过给元素设置addEventListener(enent,function,useCapture)添加监听事件。其函数有三个参数:

  • event:事件名称,例如click, keyup,keydown等

  • function:当触发注册的事件后调用的回调函数,function。

  • useCapture:可选。布尔值,指定事件是否在捕获或冒泡阶段执行。

  • true - 事件句柄在捕获阶段执行

  • false- false- 默认。事件句柄在冒泡阶段执行

面试题: