事件冒泡和事件捕获

探索事件冒泡和事件捕获在JavaScript中的工作方式

冒泡和捕获是DOM事件用于传播的两个模型。

假设您的DOM结构是

<div id="container">
  <button>Click me</button>
</div>

您想跟踪用户何时单击button,您有2个事件监听器,一个在按钮上,一个在#container

请记住,单击子元素将始终传播到其父元素,除非您停止传播(请参阅下文)。

这些事件侦听器将按顺序调用,此顺序由所使用的事件冒泡/捕获模型确定。

起泡表示事件从被单击的项(子项)一直传播到其所有父树,从最近的树开始。

在我们的示例中,button会在#container处理程序。

捕捉相反:外部事件处理程序在更具体的处理程序之前触发,button

默认情况下,所有事件都会冒泡

您可以通过将第三个参数应用于来选择采用事件捕获addEventListener,将其设置为true

document.getElementById('container').addEventListener(
  'click',
  () => {
    //window loaded
  },
  true
)

注意首先运行所有捕获事件处理程序

然后是所有冒泡事件处理程序。

顺序遵循此原则:DOM从Window对象开始遍历所有元素,然后查找被单击的项目。这样做时,它将调用与事件关联的任何事件处理程序(捕获阶段)。

一旦到达目标,它将重复遍历父树的过程,直到Window对象,再次调用事件处理程序(冒泡阶段)

免费下载我的JavaScript初学者手册


更多js教程: