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

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

이벤트 버블링은 DOM에서 요소가 이벤트(예: 클릭 이벤트)를 트리거할 때 이벤트가 문서 객체의 맨 위로 버블링될 때까지 요소에서 상위 요소로 버블링된다는 것을 의미합니다. 이벤트 버블링은 DOM 이벤트 모델의 일부입니다. 이를 통해 개발자는 이벤트 리스너를 상위 요소에 바인딩할 수 있으므로 하위 요소가 이벤트를 트리거할 때 이벤트가 버블링 메커니즘을 통해 캡처되고 처리될 수 있습니다.

그러나 때때로 개발자는 이벤트가 버블링되어 두 번 트리거되는 상황에 직면할 때가 있습니다. 이는 일반적으로 중첩된 요소에서 발생합니다. 두 번 트리거되는 이유를 더 잘 이해하기 위해 특정 코드 예제를 살펴보겠습니다.

HTML 코드는 다음과 같습니다.

<div id="parent">
  <div id="child">
    <button id="button">点击我</button>
  </div>
</div>

JavaScript 코드는 다음과 같습니다.

var parent = document.getElementById("parent");
var child = document.getElementById("child");
var button = document.getElementById("button");

parent.addEventListener("click", function(event) {
  console.log("父元素被点击");
});

child.addEventListener("click", function(event) {
  console.log("子元素被点击");
});

button.addEventListener("click", function(event) {
  console.log("按钮被点击");
  event.stopPropagation();
});

위 코드에는 클릭 이벤트 리스너에 각각 바인딩된 상위 요소, 하위 요소 및 버튼이 있습니다. 웹 페이지에서 버튼을 클릭하면 버블링 규칙에 따라 이벤트가 하위 요소에서 상위 요소로 전달됩니다.

이제 버튼 클릭을 시뮬레이션해 보겠습니다. 버튼을 클릭하면 콘솔에 다음 출력이 인쇄됩니다.

按钮被点击
子元素被点击

왜 두 번 트리거됩니까?

이벤트 버블링은 트리거 요소에서 시작하여 순차적으로 상위 요소까지 버블링되며, 이 과정에서 하위 요소와 상위 요소의 두 레이어를 통과하기 때문입니다. 버튼을 클릭하면 버튼의 클릭 이벤트가 먼저 트리거되고 "버튼이 클릭되었습니다"가 인쇄됩니다. 그런 다음 이벤트는 계속해서 하위 요소까지 버블링되어 하위 요소의 클릭 이벤트를 트리거하고 "하위 요소가 클릭되었습니다"를 인쇄합니다. 마지막으로 버블링은 상위 요소까지 계속되어 상위 요소의 클릭 이벤트를 트리거합니다.

그렇다면 이벤트가 버블링되어 두 번 트리거되는 것을 방지하는 방법은 무엇일까요?

버튼의 클릭 이벤트 핸들러에서 event.stopPropagation()을 호출하여 이벤트 버블링을 중지할 수 있습니다. 위 코드에서는 버튼의 클릭 이벤트에 이 메서드를 사용했습니다. 버튼을 다시 클릭하면 콘솔은 하위 및 상위 요소에 계속 버블링하지 않고 "버튼 클릭"만 인쇄합니다. event.stopPropagation()来阻止事件继续冒泡。在上述代码中，我们已经在按钮的点击事件中使用了这个方法。当我们再次点击按钮时，控制台将只打印出"按钮被点击"，而不会继续冒泡至子元素和父元素。

总结来说，事件冒泡会触发两次的情况通常出现在嵌套元素中，当一个元素触发了某个事件时，事件会从触发元素开始向上冒泡至父元素，直到冒泡到最顶层的文档对象为止。然而，我们可以通过调用event.stopPropagation()

요약하자면 이벤트 버블링은 일반적으로 중첩된 요소에서 두 번 트리거됩니다. 요소가 이벤트를 트리거하면 이벤트는 최상위 문서 객체로 버블링될 때까지 트리거 요소에서 상위 요소로 버블링됩니다. 그러나 event.stopPropagation()을 호출하여 이벤트가 계속해서 버블링되는 것을 방지할 수 있으므로 이벤트가 두 번 트리거되는 것을 방지할 수 있습니다. 🎜

위 내용은 이벤트 버블링이 두 번 트리거되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!