js事件流冒泡原理

在讲述冒泡原理之前，我们先了解一下事件流。事件流包括三个阶段：捕获阶段，目标阶段和冒泡阶段。

当在某个元素上触发了一个事件时，这个事件会按照以下步骤进行传递：

• 目标元素： 首先，事件会在目标元素上被触发。目标元素是指被用户操作的那个元素，比如一个按钮或者一个链接。
• 捕获阶段： 然后，事件会向上传递到目标元素的父元素。在这个阶段，可以使用事件捕获来处理事件。事件捕获是指从根元素开始，向下传递到目标元素的过程。在这个过程中，可以使用event.stopPropagation()方法来阻止事件的进一步传递。
• 目标元素和冒泡阶段： 接着，事件会到达目标元素的父元素。在这个阶段，可以使用event.stopPropagation()方法来阻止事件的进一步传递。同时，事件也会向其他兄弟元素传递。
• 冒泡阶段： 最后，事件会向DOM树的上方传递，直到到达根元素或者被某个元素捕获。在这个阶段，可以使用event.stopPropagation()方法来阻止事件的进一步传递。同时，也可以使用event.preventDefault()方法来阻止事件的默认行为。

理解事件流冒泡的原理对于正确处理和利用事件非常重要。事件流冒泡是基于 DOM 结构的，因此在理解其原理时需要考虑 DOM 树的结构。

例如当一个事件在某个元素上触发时，比如点击了一个按钮，浏览器会按照以下步骤处理：

（1） 首先，事件会在触发元素上被捕获（Capturing Phase），即从根节点一直往下捕获到触发事件的元素。

（2）然后，事件在触发元素上触发（Target Phase）。

（3）最后，事件会开始冒泡（Bubbling Phase），即从触发元素开始向上冒泡，依次触发其父元素的相同事件。

这样的事件流模型使得我们可以在不同层次的元素上注册相同类型的事件，而且不用担心它们之间的冲突。