JavaScript中的事件冒泡？事件传播的解释

迷南。 2022-06-09 08:51 236阅读 0赞

# [JavaScript中的事件冒泡？事件传播的解释][JavaScript]   #

事件冒泡是你在学习javaScript旅途中遇到的一个术语，它涉及到当一个元素被另一个元素嵌套时调用事件处理的顺序，并且两个元素注册了同一个事件（例如，点击事件）。

但是事件冒泡仅仅是难题的一部分。它经常和事件捕获和事件传播一起被提及，并且对这三个概念有着很深的了解是学习javaScript事件必不可少的，例如，假如你想实现事件委托。

第 1 段（可获 1.23 积分）

0 ![170137_hkOd_35.jpeg][] Render 3周前

点击图像不仅为相应的IMG元素生成一个单击事件,但也为父元素,祖父元素等等生成点击事件, 一路通过所有元素的祖先元素,在window 对象之前终止。

在DOM术语中,图像是事件目标,点击来自最里面的元素。事件目标，加上它的祖先，从它的父元素到window 对象，在DOM树中形成一个分支。 例如，在图像库中，该分支将由节点组成：IMG，A，LI，UL，BODY，HTML，document，window。

第 3 段（可获 1.18 积分）

0 ![170137_hkOd_35.jpeg][] Render 1周前

还要注意那个分支确定是静态的，也就是说，它是在事件初始调度时建立的。在事件处理期间对树进行的改动将被忽略。

事件传播是双向的，从 window 到事件目标，然后再反转过来。这种传播可以分为三个阶段：

1.  从 window 到事件目标的父级节点：这是 ***捕捉阶段***
2.  事件目标本身：这是 ***目标阶段***
3.  从事件目标的父级节点回到 window：***冒泡阶段***

通过调用监听器的类型可以区分这些阶段。

第 5 段（可获 1.24 积分）

0 ![144110_pRNK_35.png][] pauli 22小时前

### 事件捕捉阶段 ###

这个阶段只会调用 ***捕获者** *监听器，就是说，那些监听器在注册的时候，[addEventListener][] 的第三个参数使用了`true` 值：

el.addEventListener('click', listener, true)

如果这个参数缺省，其默认值是 `false`，事件监听器也就不是捕获者。

因此，在这一阶段，只有从 window 到事件目标路径上的捕获者会被调用。

### 事件目标阶段 ###

这个阶段所有注册到事件目标的监听器都会被调用，其捕获标志的值不管是什么都没关系。

第 6 段（可获 1.16 积分）

0 ![144110_pRNK_35.png][] pauli 22小时前

### 事件冒泡阶段 ###

事件冒泡阶段只有不是捕获者的监听器会被调用。也就是说，在调用 `addEventListener()` 注册这些监听器的时候，第三个参数是`false`。

el.addEventListener('click', listener, false) // listener doesn't capture
    el.addEventListener('click', listener) // listener doesn't capture

注意，在捕获阶段中所有事件如 `focus`、`blur`、`load` 等向下流向事件目标时，不会冒泡。这个过程会在 *目标*阶段后结束。

因此，到传播结束的时候，这个分支上所有监听器都确定会被调用一次。

第 7 段（可获 0.98 积分）

0 ![144110_pRNK_35.png][] pauli 21小时前

事件冒泡不是在每一类事件上都会发生。在传播期间，监听器可以通过读取 `event `对象的布尔属性 `.bubbles` 来获得某个事件是否会冒泡。

[W3C UIEvents 规范][W3C UIEvents]中详细阐述了三个事件流阶段。

![072330_9mfJ.png][]

## 访问传播信息 ##

我提到过 `event` 对象的 `.bubbles` 属性。这个对象还提供了其它属性可以让监听器访问与传播相关的信息。

第 8 段（可获 1.18 积分）

0 ![163441_hG2O_35.jpg][] 边城16小时前

看看由 SitePoint ([@SitePoint][SitePoint]) 在 [CodePen][] 上创建的 Pen[jmXdpz][]。

甚至可以在框外点击：这种情况下，事件目标会是 `BODY` 或 `HTML` 元素，这取决于点击在屏幕上的位置。

## 停止传播 ##

事件传播可以由任何监听器通过调用事件对象的 [stopPropagation][] 方法来停止。这就意味着传播路径上当前目标之后的所有节点上注册的监听器都不会被调用。相反，当前目标注册的监听器仍然会收到事件通知。

第 10 段（可获 1.19 积分）

0 ![170137_hkOd_35.jpeg][] Render 1天前

我们可以通过[从之前的 Demo 派生出来的简单示例][Demo]来检查这个行为，只需要在其中一个监听器中插入对`stopPropagation() `的调用即可。现在我们已经在注册到 window 的监听器列表的最前面添加了一个新的捕获监听器：

window.addEventListener('click', e => { e.stopPropagation(); }, true);
    window.addEventListener('click', listener('c1'), true);
    window.addEventListener('click', listener('c2'), true);
    window.addEventListener('click', listener('b1'));
    window.addEventListener('click', listener('b2'));

这样，无论哪个盒子被点击，传播都会较早结束，只能到达 `window `上注册的捕获监听器。

第 11 段（可获 0.7 积分）

0 ![163441_hG2O_35.jpg][] 边城15小时前

## 事件取消 ##

某些事件与浏览器在传播结束时执行的默认操作相关联。 比如, 单击链接元素或单击表单提交按钮会导致浏览器导航到新页面，或分别提交表单。

可以避免在事件取消时执行这样的默认行为,通过在侦听器中调用事件对象[e.preventDefault][] 方式阻止默认行为。

## 结论 ##

这样，我希望能够向你展示事件冒泡和事件捕获在JavaScript中是如何工作。如果您有任何问题或意见,我很高兴在下面的讨论中听到这些问题和意见。

第 13 段（可获 1.44 积分）

0<a title="纠正此翻译" class="ui very basic mini icon button" href="https://coyee.com/article/translate/12211-event-bubbling-in-javascript-event-propagation-explained?section=13&correct=54477" "=""> ![170137_hkOd_35.jpeg][] Render 1周前

## 参考 ##

*  [Document Object Model (DOM) Level 2 Events Specification][Document Object Model _DOM_ Level 2 Events Specification]
 *  [W3C DOM4 – Events][W3C DOM4 _ Events]
 *  [DOM – Living Standard – Events][DOM _ Living Standard _ Events]
 *  [W3C UI Events – DOM Event Architecture][W3C UI Events _ DOM Event Architecture]
 *  [MSN – Events and the DOM][MSN _ Events and the DOM]

[JavaScript]: https://coyee.com/article/12211-event-bubbling-in-javascript-event-propagation-explained
[170137_hkOd_35.jpeg]: https://coyee.com/uploads/user/20170815/170137_hkOd_35.jpeg
[144110_pRNK_35.png]: https://coyee.com/uploads/user/20170821/144110_pRNK_35.png
[addEventListener]: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
[W3C UIEvents]: https://www.w3.org/TR/DOM-Level-3-Events/
[072330_9mfJ.png]: https://coyee.com/uploads/img/20170525/072330_9mfJ.png
[Copyright _ 2016 _MIT_ ERCIM_ Keio_ Beihang]: http://www.w3.org/Consortium/Legal/2015/doc-license
[163441_hG2O_35.jpg]: https://coyee.com/uploads/user/20170406/163441_hG2O_35.jpg
[SitePoint]: https://codepen.io/SitePoint
[CodePen]: https://codepen.io/
[jmXdpz]: https://codepen.io/SitePoint/pen/jmXdpz/
[stopPropagation]: https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
[Demo]: https://codepen.io/SitePoint/pen/aWPXQg
[e.preventDefault]: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
[Document Object Model _DOM_ Level 2 Events Specification]: https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow
[W3C DOM4 _ Events]: https://www.w3.org/TR/dom/#events
[DOM _ Living Standard _ Events]: https://dom.spec.whatwg.org/#events
[W3C UI Events _ DOM Event Architecture]: https://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture
[MSN _ Events and the DOM]: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events