[콜럼Vue스] 이벤트 전파와 버블링

<div id="parent" style="padding: 20px; background-color: lightgray;">
  부모 요소
  <button id="child">자식 버튼</button>
</div>

<script>
  // 부모 요소에 캡처링 단계에서 이벤트 리스너 추가
  document.getElementById('parent').addEventListener(
    'click',
    function() {
      alert('캡처링 단계: 부모 요소 클릭됨');
    },
    true // 캡처링 단계에서 처리
  );

  document.getElementById('child').addEventListener('click', function() {
    alert('자식 버튼 클릭됨');
  });
</script>

 

**이벤트 전파(Event Propagation)**는 웹 페이지에서 특정 이벤트가 발생했을 때, 그 이벤트가 DOM 트리 상에서 어떻게 전달되는지를 설명하는 개념임. 이벤트 전파는 **버블링(Bubbling)**과 캡처링(Capturing) 두 단계로 나뉘며, 이를 통해 이벤트가 DOM 트리의 부모 요소나 자식 요소에 영향을 미칠 수 있음.

 

1. **이벤트 전파(Event Propagation)**의 기본 개념

이벤트 전파는 DOM 트리에서 이벤트가 발생했을 때, 그 이벤트가 어떤 순서로 전달되는지를 설명하는 방식임. 이벤트는 캡처링 단계와 버블링 단계를 거쳐 전파됨:

• 캡처링(Capturing): 이벤트가 최상위 부모 요소(즉, document 객체)에서 시작해 이벤트가 발생한 요소까지 내려가는 과정.
• 버블링(Bubbling): 이벤트가 이벤트가 발생한 요소에서 상위 부모 요소로 전파되는 과정.

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

이벤트 버블링이란, 이벤트가 발생한 요소에서 시작해 부모 요소로 전파되는 것을 의미함. 즉, 이벤트가 발생한 후, 해당 이벤트는 상위 요소로 계속 전파되며, 최종적으로 document 객체에 도달할 수 있음.

클릭 이벤트 버블링 :

<div id="parent" style="padding: 20px; background-color: lightgray;">
  부모 요소
  <button id="child">자식 버튼</button>
</div>

<script>
  document.getElementById('parent').addEventListener('click', function() {
    alert('부모 요소 클릭됨');
  });

  document.getElementById('child').addEventListener('click', function() {
    alert('자식 버튼 클릭됨');
  });
</script>

실행 결과:

1. 자식 버튼 클릭 시:
   • "자식 버튼 클릭됨" 경고창이 뜸.
   • 이후 버블링이 발생하여 "부모 요소 클릭됨" 경고창이 뜸.

 

 

설명:

• 자식 버튼에서 발생한 클릭 이벤트는 부모 요소로 전파됨(버블링). 따라서 자식 버튼을 클릭했을 때, 자식 요소의 이벤트 핸들러가 먼저 실행된 후 부모 요소의 이벤트 핸들러도 실행됨.

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

캡처링은 이벤트가 발생한 요소까지 DOM 트리의 부모 요소에서부터 자식 요소로 내려가는 과정임. 기본적으로 이벤트는 캡처링 단계를 먼저 거치지만, 일반적으로는 캡처링 단계에서 이벤트를 처리하지 않음.

캡처링을 활성화하는 방법:

이벤트 리스너를 추가할 때, **useCapture**라는 세 번째 인자를 true로 설정하면 캡처링 단계에서 이벤트를 처리할 수 있음.

실행 결과:

1. 자식 버튼 클릭 시:
   • 먼저 "캡처링 단계: 부모 요소 클릭됨" 경고창이 뜸.
   • 이후 "자식 버튼 클릭됨" 경고창이 뜸.

설명:

• 캡처링 단계에서 부모 요소의 이벤트 핸들러가 먼저 실행됨.
• 이후 자식 요소의 핸들러가 실행되면서 이벤트 처리 순서가 달라짐.

4. 이벤트 전파의 중단

때로는 이벤트 전파를 멈추고 싶을 때가 있음. 예를 들어, 자식 요소에서 발생한 이벤트가 부모 요소로 전파되는 것을 막고자 할 때, stopPropagation() 메서드를 사용할 수 있음.

이벤트 전파 중단 :

<div id="parent" style="padding: 20px; background-color: lightgray;">
  부모 요소
  <button id="child">자식 버튼</button>
</div>

<script>
  document.getElementById('parent').addEventListener('click', function() {
    alert('부모 요소 클릭됨');
  });

  document.getElementById('child').addEventListener('click', function(event) {
    event.stopPropagation(); // 이벤트 전파 중단
    alert('자식 버튼 클릭됨');
  });
</script>

실행 결과:

1. 자식 버튼 클릭 시:
   • "자식 버튼 클릭됨" 경고창만 뜨고, 부모 요소의 이벤트는 실행되지 않음.

설명:

• stopPropagation() 메서드를 사용하면 버블링이 발생하지 않고, 자식 요소의 이벤트만 처리됨.

5. Vue.js에서의 이벤트 버블링 제어

Vue.js에서도 DOM 이벤트 버블링을 제어할 수 있음. .stop 수식어를 사용하여 이벤트 전파를 쉽게 막을 수 있음.

Vue.js에서 이벤트 버블링 방지 예시:

<div id="app">
  <div @click="handleParentClick">
    부모 요소
    <button @click.stop="handleChildClick">자식 버튼</button>
  </div>
</div>

<script>
  Vue.createApp({
    methods: {
      handleParentClick() {
        alert('부모 요소 클릭됨');
      },
      handleChildClick() {
        alert('자식 버튼 클릭됨');
      }
    }
  }).mount('#app');
</script>

• .stop 수식어는 Vue에서 **stopPropagation()**과 동일하게 동작하여, 자식 버튼 클릭 시 부모 요소로 이벤트가 전파되지 않음.

요약

• 이벤트 버블링: 이벤트가 발생한 요소에서 부모 요소로 전파되는 과정.
• 이벤트 캡처링: 이벤트가 부모 요소에서 자식 요소로 전파되는 과정.
• stopPropagation(): 이벤트 전파를 중단하는 메서드. 이를 통해 이벤트가 상위 요소로 전달되지 않도록 할 수 있음.
• Vue.js에서는 .stop 수식어를 통해 이벤트 전파를 쉽게 제어할 수 있음.

이벤트 버블링과 전파는 DOM 트리 상의 상호작용을 제어하고, 필요한 경우 이벤트가 전파되는 과정을 제어하는 중요한 개념임. 이를 잘 활용하면 더 정교한 이벤트 처리가 가능해짐.

정리 및 비교 요약

속성 / 설명 / 사용 시점

target	실제로 이벤트가 발생한 요소	클릭한 구체적인 요소를 알고 싶을 때
currentTarget	이벤트 리스너가 바인딩된 요소	이벤트가 어디에 바인딩되었는지 알 때
preventDefault()	기본 이벤트(예: 링크 이동)를 막음	기본 동작을 중지하고 싶을 때
stopPropagation()	이벤트 전파를 중지함	이벤트 버블링을 막고 싶을 때
clientX, clientY	뷰포트 기준으로 클릭 위치 반환	화면 내에서의 클릭 좌표가 필요할 때
pageX, pageY	문서 전체 기준으로 클릭 위치 반환	페이지