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

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

이벤트 버블링은 웹 개발에서 중요한 개념입니다. 이는 중첩된 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()

이 코드에서는 각 요소에 대한 클릭 이벤트 리스너를 추가하여 해당 요소의 클릭에 대한 정보를 출력합니다. 페이지에서 버튼을 클릭하면 예상되는 출력은 🎜rrreee🎜 입니다. 그러나 실제 출력은 🎜rrreee🎜 입니다. 보시다시피 이벤트 버블링이 두 번 연속 발생하여 이벤트 처리 기능이 실행됩니다. 반복적으로 . 🎜🎜이 문제의 근본 원인은 이벤트 버블링 단계의 실행 순서에 있습니다. 버블링 단계에서는 이벤트가 가장 안쪽 요소에서 바깥쪽 요소로 버블링된 다음 상위 요소의 이벤트 핸들러 기능을 단계별로 실행합니다. 따라서 버튼을 클릭하면 클릭 이벤트가 먼저 버튼의 이벤트 핸들러를 트리거한 다음 중첩된 <div> 요소까지 버블링하고 요소의 이벤트 핸들러를 계속 실행합니다. 그러나 <div> 요소는 가장 바깥쪽 <div> 요소 내에 중첩되어 있으므로 이벤트는 다시 가장 바깥쪽 요소까지 버블링되어 가장 바깥쪽 이벤트가 발생합니다. 처리 함수가 다시 실행됩니다. 🎜🎜이 문제를 해결하는 방법에는 여러 가지가 있습니다. 일반적으로 사용되는 두 가지 방법을 소개하겠습니다. 🎜

1. 이벤트 버블링 중지:

🎜이벤트 처리 함수이벤트를 호출합니다. stopPropagation() 메서드를 사용하면 이벤트가 더 이상 전파되는 것을 방지할 수 있습니다. 즉, 이벤트 버블링을 중지할 수 있습니다. 위 코드 예제에서 버튼의 이벤트 핸들러 기능을 다음과 같이 수정합니다. 🎜rrreee🎜 event.stopPropagation() 메서드를 사용한 후 이벤트 버블링이 버튼 요소에서 중지되고 더 이상 전파되지 않습니다. 중첩된 <div> 요소와 가장 바깥쪽 <div> 요소에 추가합니다. 따라서 이벤트 처리 기능은 한 번만 실행되며 출력 결과는 다음과 같습니다. 🎜rrreee

2. 리스닝 캡처 단계:

🎜이벤트 버블링 외에도 단계, DOM 이벤트 캡처 단계도 있습니다. 캡처 단계는 가장 바깥쪽 요소에서 내부 요소로 이벤트가 전파되는 프로세스를 나타냅니다. 캡처 단계를 사용하면 가장 바깥쪽 요소에 이벤트 리스너를 추가하고 캡처 단계에서 이벤트를 처리한 다음 다른 요소에 대해 이벤트 핸들러를 실행할지 여부를 결정할 수 있습니다. 위 코드 예제에서 가장 바깥쪽 <div> 요소의 이벤트 핸들러 함수를 다음과 같이 수정합니다. 🎜rrreee🎜가장 바깥쪽 요소에 true 매개변수가 있는 이벤트 리스너를 추가합니다. 이벤트 핸들러는 캡처 단계 중에 실행될 수 있습니다. 이러한 방식으로 이벤트 버블링 단계에서는 이벤트가 가장 바깥쪽 요소에서 이벤트 처리 기능을 다시 트리거하지 않으므로 반복 실행이 방지됩니다. 🎜🎜요약하자면 이벤트 버블링은 버블링 단계에서 가장 안쪽 요소에서 가장 바깥쪽 요소로 버블링되고 각 요소의 이벤트 핸들러가 실행되기 때문에 연속으로 두 번 발생합니다. 이 문제를 해결하려면 event.stopPropagation() 메서드를 사용하여 이벤트가 버블링되는 것을 방지하거나 캡처 단계를 수신하여 이벤트를 처리하여 반복 실행을 방지할 수 있습니다. 🎜