이벤트 버블링 메커니즘이 두 번 트리거되는 이유는 무엇입니까?

이벤트 버블링이 두 번 연속으로 발생하는 이유는 무엇인가요?

이벤트 버블링은 웹 개발에서 중요한 개념입니다. 이는 중첩된 HTML 요소에서 이벤트가 트리거될 때 이벤트가 가장 안쪽 요소에서 가장 바깥쪽 요소로 버블링된다는 것을 의미합니다. 이 프로세스는 때때로 혼란을 야기할 수 있습니다. 한 가지 일반적인 문제는 이벤트 버블링이 연속으로 두 번 발생한다는 것입니다.

이벤트 버블링이 두 번 연속으로 발생하는 이유를 더 잘 이해하기 위해 먼저 코드 예제를 살펴보겠습니다.

<div id="outer">
  <div id="inner">
    <button id="button">Click me</button>
  </div>
</div>

<script>
document.getElementById('button').addEventListener('click', function() {
  console.log('Button clicked');
});

document.getElementById('inner').addEventListener('click', function() {
  console.log('Inner div clicked');
});

document.getElementById('outer').addEventListener('click', function() {
  console.log('Outer div clicked');
});
</script>

위 코드는 가장 바깥쪽 &lt ;div></code를 포함하는 중첩된 HTML 구조를 만듭니다. > 요소(id="outer"), 그 안에 중첩된 <code><div> 요소(id="inner") 및 버튼 요소(id=" 버튼"). <div> 元素（id="outer"），一个嵌套在其中的 <div> 元素（id="inner"），以及一个按钮元素（id="button"）。

在这段代码中，我们为每个元素添加了点击事件监听器，用于输出对应元素被点击的信息。当我们在页面上点击按钮时，我们期望的输出结果是：

Button clicked
Inner div clicked
Outer div clicked

然而，实际上的输出却是：

Button clicked
Inner div clicked
Outer div clicked
Inner div clicked
Outer div clicked

可以看到，事件冒泡会连续发生两次，导致事件处理函数重复执行。

这个问题的根本原因在于事件冒泡阶段的执行顺序。在冒泡阶段，事件会由最内层的元素开始向外层元素冒泡，然后再逐级执行父元素的事件处理函数。因此，当我们点击按钮时，点击事件会首先触发按钮的事件处理函数，然后冒泡到嵌套的 <div> 元素上，继续执行该元素的事件处理函数。但是，由于 <div> 元素还嵌套在最外层的 <div> 元素中，所以事件会再次冒泡到最外层的元素上，导致最外层的事件处理函数再次执行。

解决这个问题的方法可以有多种，下面我们来介绍两种常用的方式：

1. 停止事件冒泡：

在事件处理函数中调用 event.stopPropagation() 方法可以阻止事件的进一步传播，即停止事件冒泡。修改上述代码示例的按钮的事件处理函数如下：

document.getElementById('button').addEventListener('click', function(event) {
  console.log('Button clicked');
  event.stopPropagation(); // 阻止事件冒泡
});

使用 event.stopPropagation() 方法后，事件冒泡会在按钮元素上停止，不会再传播到嵌套的 <div> 元素和最外层的 <div> 元素上。因此，事件处理函数只会执行一次，输出的结果为：

Button clicked

2. 监听捕获阶段：

除了事件冒泡阶段外，DOM 事件还有一个捕获阶段。捕获阶段是指事件从最外层的元素开始向内层元素传播的过程。利用捕获阶段，可以在最外层的元素上添加事件监听器，并在捕获阶段处理事件，然后再决定是否执行其他元素上的事件处理函数。修改上述代码示例的最外层 <div> 元素的事件处理函数如下：

document.getElementById('outer').addEventListener('click', function() {
  console.log('Outer div clicked');
}, true); // 添加 true 参数表示监听捕获阶段

通过在最外层元素上添加参数为 true 的事件监听器，可以在捕获阶段执行事件处理函数。这样，在事件冒泡阶段，事件就不会再次触发最外层元素上的事件处理函数，从而避免了重复执行。

总结起来，事件冒泡会连续发生两次是因为事件在冒泡阶段会从最内层元素一直冒泡到最外层元素，并且会执行每个元素上的事件处理函数。为了解决这个问题，我们可以使用 event.stopPropagation()