• 0
  • 2
January 31, 2025

이벤트 버블링(Bubbling) & 캡처링 (Capturing)

답변 확인

1. 이벤트 버블링(Event Bubbling)

  • 이벤트 버블링은 특정 요소에서 이벤트가 발생했을 때, 해당 이벤트가 부모 요소로 전파되는 현상을 의미
  • 즉, 이벤트가 가장 안쪽의 요소에서 시작하여 바깥쪽 요소로 전파됩니다. 예를 들어, 버튼을 클릭했을 때 버튼 자체에서 이벤트가 발생한 후, 이 이벤트가 div → body → document → window 순으로 전파됨
  • 기본적으로 브라우저는 이벤트 전파를 버블링 단계에서 처리하도록 설계되어 있습니다.
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>이벤트 버블링</title>
  </head>
  <body>
    <div id="parent" style="padding: 20px; background-color: lightblue;">
      <button id="child">클릭하세요</button>
    </div>
    <script>
      document.getElementById('parent').addEventListener('click', function () {
        alert('부모 요소 클릭');
      });
      document.getElementById('child').addEventListener('click', function () {
        alert('자식 요소 클릭');
      });
    </script>
  </body>
</html>

실행 결과

  1. child 버튼을 클릭하면 먼저 "자식 요소 클릭"이 출력

  2. 이후 "부모 요소 클릭"이 출력

  3. 즉, 이벤트가 자식 요소에서 부모 요소로 전파

2. 이벤트 캡처링(Event Capturing)

  • 이벤트 캡처링은 이와 반대 방향으로 진행됩니다.
  • 즉, 이벤트가 최상위 부모 요소에서부터 시작해 점점 타겟 요소로 내려오면서 전파 window에서 이벤트가 시작되어 document → body → div 를 거쳐 버튼에 도달하는 방식
  • 기본적으로 캡처링 단계는 비활성화되어 있지만, addEventListener 함수의 세 번째 옵션으로 true를 설정하면 캡처링 단계에서 이벤트를 처리할 수 있음
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>이벤트 캡처링</title>
  </head>
  <body>
    <div id="parent" style="padding: 20px; background-color: lightcoral;">
      <button id="child">클릭하세요</button>
    </div>
    <script>
      document.getElementById('parent').addEventListener(
        'click',
        function () {
          alert('부모 요소 클릭');
        },
        true
      );
      document.getElementById('child').addEventListener(
        'click',
        function () {
          alert('자식 요소 클릭');
        },
        true
      );
    </script>
  </body>
</html>

실행 결과

  1. child 버튼을 클릭하면 "부모 요소 클릭"이 먼저 출력

  2. 이후 "자식 요소 클릭"이 출력

  3. 즉, 이벤트가 부모 요소에서 자식 요소로 전파

3. 이벤트 전파 방지

  • 이벤트의 전파를 막기 위해 event.stopPropagation()을 사용할 수 있음
<script>
    document.getElementById('child').addEventListener('click', function(event) {
        alert('자식 요소 클릭');
        event.stopPropagation();
    });
</script>

실행 결과

  • child 버튼을 클릭하면 "자식 요소 클릭"만 출력되고 "부모 요소 클릭"은 실행되지 않습니다.

4. 이벤트 버블링과 캡처링의 활용

  • 이벤트 버블링은 이벤트 위임 패턴에서 유용하게 활용
  • 동적으로 추가되는 자식 요소가 있는 경우 부모 요소에 이벤트 리스너를 등록하면 효율적으로 관리할 수 있음
<ul id="list">
  <li>아이템 1</li>
  <li>아이템 2</li>
  <li>아이템 3</li>
</ul>
<script>
  document.getElementById('list').addEventListener('click', function (event) {
    if (event.target.tagName === 'LI') {
      alert(event.target.textContent + ' 클릭됨');
    }
  });
</script>
  • 반면, 캡처링은 부모 요소에서 먼저 이벤트를 처리해야 할 경우 사용됨 예를 들어, 트래킹 기능을 구현할 때 유용할 수 있음

5. 이벤트 전파 과정에서 발생할 수 있는 문제

  • 이벤트 중첩으로 인해 동일한 이벤트가 여러 번 실행될 수 있음
  • 캡처링 단계에서 불필요한 이벤트가 실행되어 성능 저하 발생 가능
  • 이벤트 위임 시 의도치 않은 요소에서 이벤트가 발생할 가능성 있음

이러한 문제를 방지하기 위해 다음과 같은 방법을 사용

  1. event.stopPropagation()을 사용하여 이벤트 전파를 차단할 수 있음

  2. event.preventDefault()를 사용하여 브라우저의 기본 동작(예: 링크 이동, 폼 제출)을 방지할 수 있음

결론

구분 설명 전파 방향
이벤트 버블링 이벤트가 자식 요소에서 부모 요소로 전파됨 내부 → 외부
이벤트 캡처링 이벤트가 부모 요소에서 자식 요소로 전파됨 외부 → 내부
전파 방지 event.stopPropagation()을 사용하여 이벤트 전파를 막을 수 있음
기본 동작 방지 event.preventDefault()를 사용하여 브라우저 기본 동작을 막을 수 있음

Top comments (2)

  • DavidYang2월 19일

    우와 댓글이다~

  • Olivia2월 19일

    오오 ~~ :) 너무 글 좋네용