이벤트가 버블링되고 여러 번 트리거되는 이유는 무엇입니까?-JS 튜토리얼-php.cn

이벤트가 버블링되고 여러 번 트리거되는 이유는 무엇입니까?

王林

풀어 주다： 2024-02-19 15:46:06

원래의

599명이 탐색했습니다.

이벤트가 버블링되고 여러 번 트리거되는 이유는 무엇입니까?

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

이벤트 버블링은 웹 개발에서 흔히 발생하는 현상입니다. 즉, 요소에서 이벤트가 트리거되면 이벤트가 요소에서 버블링되어 해당 상위 요소에서 동일한 이벤트가 차례로 트리거됩니다. 그러나 때로는 버블링 프로세스 중에 이벤트가 두 번 트리거되는 경우도 있습니다. 왜 이런 일이 발생하는지 더 잘 이해하려면 이벤트 버블링의 원리부터 시작하여 구체적인 코드 예제를 통해 분석해야 합니다.

이벤트 버블링의 원리는 DOM 트리 구조를 기반으로 합니다. HTML 문서에서 모든 요소는 중첩 관계에 따라 트리 구조로 구성됩니다. 이벤트가 트리거되면 이벤트가 발생한 요소에서 상위 요소를 따라 루트 요소에 도달할 때까지 이벤트가 버블링됩니다. 버블링 프로세스 중에 이벤트는 각 상위 요소에서 동일한 이벤트 핸들러를 차례로 트리거합니다. 이 설계의 장점은 이벤트 위임 처리를 쉽게 수행할 수 있고 자연스러운 이벤트 흐름을 구현할 수 있다는 것입니다.

그러나 이벤트 버블링은 주로 이벤트 처리 기능의 부적절한 바인딩이나 불완전한 이벤트 방지 메커니즘으로 인해 두 번 트리거됩니다. 구체적인 코드 예를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
  <title>事件冒泡示例</title>
</head>
<body>
  <div id="outer">
    <div id="inner">
      <button id="btn">Click me!</button>
    </div>
  </div>

  <script>
    var outer = document.getElementById('outer');
    var inner = document.getElementById('inner');
    var btn = document.getElementById('btn');

    outer.addEventListener('click', function() {
      console.log('Outer clicked!');
    });

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

    btn.addEventListener('click', function() {
      console.log('Button clicked!');
      event.stopPropagation();
    });
  </script>
</body>
</html>

로그인 후 복사

이 예에는 두 개의 중첩된 레벨이 있는 div 요소와 가장 안쪽 div 내에 중첩된 버튼이 있습니다. 각 div 요소와 버튼에 클릭 이벤트 핸들러를 바인딩하고 해당 정보를 콘솔에 출력합니다.

버튼을 클릭하면 "Button clicked!"가 한 번만 출력될 것으로 예상할 수 있지만 실제로는 두 번 출력됩니다. 이는 이벤트 버블링 프로세스 중에 이벤트가 각 상위 요소의 이벤트 핸들러를 차례로 트리거하기 때문입니다. 즉, 버튼을 클릭하면 버튼의 클릭 이벤트 핸들러가 먼저 트리거된 다음 가장 안쪽의 div 요소가 트리거됩니다. 차례로 트리거되고 가장 바깥쪽 div 요소에서 이벤트 핸들러 기능이 실행됩니다. 버튼의 이벤트 핸들러에서 event.stopPropagation() 메서드를 호출했으므로 이 메서드는 이벤트가 버블링되는 것을 방지합니다. 그러나 이벤트 핸들러 내에서 이 메서드를 호출해도 후속 이벤트 핸들러가 실행되는 것을 방지할 수 없으므로 가장 안쪽 div 요소의 이벤트 핸들러는 계속 한 번 트리거됩니다. event.stopPropagation()方法，这个方法会阻止事件继续冒泡上去。然而，在事件处理函数内部调用该方法并不会阻止之后的事件处理函数的执行，所以最内层div元素上的事件处理函数还是会被触发一次。

要解决这个问题，我们可以在按钮的事件处理函数中使用event.stopImmediatePropagation()方法，该方法除了阻止事件冒泡，还能够阻止后续事件处理函数的执行。修改代码如下：

btn.addEventListener('click', function(event) {
  console.log('Button clicked!');
  event.stopImmediatePropagation();
});

로그인 후 복사

这样，当我们点击按钮时，就只会输出一次"Button clicked!"。

总结来说，事件冒泡会出现两次触发的情况，主要是由于事件处理函数的绑定方式不当或者事件阻止冒泡的机制不完善。我们需要正确地使用event.stopPropagation()和event.stopImmediatePropagation()

이 문제를 해결하려면 버튼의 이벤트 처리 함수에서 event.stopImmediatePropagation() 메서드를 사용하면 이벤트 버블링을 방지할 수 있을 뿐만 아니라 후속 이벤트 실행도 방지할 수 있습니다. 처리 기능. 다음과 같이 코드를 수정하세요. 🎜rrreee🎜이렇게 하면 버튼을 클릭하면 "버튼 클릭!"이 한 번만 출력됩니다. 🎜🎜요약하자면 이벤트 버블링은 주로 이벤트 처리 기능의 부적절한 바인딩이나 불완전한 이벤트 방지 메커니즘으로 인해 두 번 트리거됩니다. 이벤트 버블링 및 실행을 제어하려면 event.stopPropagation() 및 event.stopImmediatePropagation() 메서드를 올바르게 사용해야 합니다. 이벤트 버블링의 원리와 메커니즘을 이해해야만 이벤트 버블링으로 인해 발생하는 문제를 더 잘 처리하고 웹 애플리케이션의 사용자 경험을 향상시킬 수 있습니다. 🎜

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