2022-09-26浏览器00
请注意,本文编写于 524 天前,最后修改于 524 天前,其中某些信息可能已经过时。

参考分析

冒泡是从下向上,DOM 元素绑定的事件被触发时,此时该元素为目标元素,目标元素执行后,它的祖先元素绑定的事件会向上顺序执行。

addEventListener 函数的第三个参数设置为 false,说明不为捕获事件,即为冒泡事件。

捕获则和冒泡相反,目标元素被触发后,会动目标元素的最顶层祖先元素往下执行到目标元素为止。

当一个元素绑定了两个事件,一个是冒泡,一个是捕获。

首先需要明确的是,绑定了几个事件就会执行几次。

对于执行顺序的问题需要注意一下。该 DOM 上的事件如果被触发,会有这几种情况。

  • 如果该 DOM 是目标元素,则按事件绑定顺序执行,不区分冒泡/捕获
  • 如果该 DOM 是处于事件流中的非目标元素,则先执行捕获,后执行冒泡

因为 W3C 标准有说明,先发生捕获事件,后发生冒泡事件。所有事件的顺序是:其它元素捕获阶段事件-> 本元素代码书序事件 ->其它元素冒泡阶段事件

另外需要注意的是,在冒泡阶段,向上执行的过程中,已经执行过的捕获事件不再执行,只执行冒泡事件。

本文作者:前端小毛

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!