本文共 1178 字，大约阅读时间需要 3 分钟。

事件冒泡的原理

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事

件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的 父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最 顶层，即document对象（有些浏览器是window）。 其实在事件冒泡之前，程序内部最先执行的是事件的捕获，既然用户触发了一个事件，那么程序就要知道是哪里或者说哪个元素触发了事件，所以就要先去捕获事件，只有捕获了事件，才能去执行事件的冒泡。具体的流程请参考下图： 也就是说在一个事件被触发的时候，程序会从最顶层开始由上到下开始一层一层的捕获事件源，在捕获的过程中是不会执行事件冒泡或者其他代码的，因此这个过程是不被我们所看到的，待捕获到事件源以后，就会从事件源出发（现在仅假设没有阻止事件冒泡的情况），从下到上开始执行事件冒泡，这也就是说，在事件源的上方，任何一个容器只要绑定了和事件源一样的事件，都会依次被默认执行，这种现在就叫做事件的冒泡。 这整个过程被称作事件传导，分为以下三个阶段：

• 事件捕捉（Capturing）阶段：事件将沿着DOM树向下传送，经过目标节点的每一个祖先节点，直至目标节点。例如，用户单击了一个超链接，则该单击事件将从document节点转送到html元素、body元素以及包含该链接的p元素。目标节点就是触发事件的DOM节点。

• 目标（target）阶段：在此阶段中，事件传导到目标节点。浏览器在查找到已经指定给目标事件的监听器后，就会运行该监听器。

• 冒泡（Bubbling）阶段：事件将沿着DOM树向上转送，再次逐个访问目标元素的祖先节点直到document节点。该过程中的每一步，浏览器都将检测那些不是捕捉事件监听器的事件监听器并执行它们。（即：与触发事件无关的事件监听器也由于冒泡将被执行）。

事件冒泡有什么用？

对于事件冒泡，根据其原理可知，它会让事件源的父辈元素们都会触发相关事件（绑定了事件为前提），那么如果以后开发过程中需要这个功能的话可以使用事件冒泡的原理来处理。即当子元素触发事件后，父元素也跟着触发相同事件。

但是，事件冒泡的弊端也来源于此，我们本来只想让我们的目标元素触发事件，谁知连同父辈元素们也依次触发了相同事件，这就违背了我们的本意。那么怎么才能阻止事件冒泡呢?在这里推荐一种极为简单的方法。

阻止事件冒泡

要想阻止哪个元素的事件冒泡，直接在该元素处理事件代码后面加上 return false; 即让事件处理以后返回false，这样就事件冒泡就从此处结束了（从哪里加入return false； 事件冒泡就会止于哪个元素）

转载地址：https://blog.csdn.net/weixin_40612082/article/details/80472145 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！