이벤트 전파 단계와 e.target vs e.currentTarget

이벤트 전파(Event Propagation)란?

브라우저에서 이벤트가 발생하면, 해당 이벤트는 DOM 트리 상에서 부모 요소 → 자식 요소 또는 자식 요소 → 부모 요소 방향으로 전파됨.

이벤트 전파의 3단계

 

단계	설명	특징
1. 캡처링(Capturing Phase)	부모 → 자식 방향으로 이벤트 탐색	잘 사용되지 않음 (addEventListener에 { capture: true } 옵션으로 가능)
2. 타깃(Target Phase)	이벤트가 실제 발생한 요소에서 실행	이벤트 발생 대상 (ex. 클릭된 버튼)
3. 버블링(Bubbling Phase)	자식 → 부모 방향으로 이벤트 전파	기본값이며 가장 많이 사용

전파 예시

<div id="outer">
  <ul>
    <li><img src="..." /></li>
  </ul>
</div>

• img 태그를 클릭하면 이벤트는 다음과 같이 전달:

  캡처링: div → ul → li → img  
  타깃: img  
  버블링: img → li → ul → div
  

이벤트 전파 제어 방법

방법	설명	예시
event.stopPropagation()	이벤트 전파(버블링/캡처링) 중지	@click.stop
event.preventDefault()	기본 동작 차단 (ex. form submit)	@submit.prevent
.once	이벤트 한 번만 실행	@click.once="handler"

---

e.target vs e.currentTarget 차이

속성	설명	어떤 요소를 가리키는지
e.target	이벤트가 실제로 발생한 요소	가장 안쪽에 클릭한 DOM 요소
e.currentTarget	이벤트가 등록된 요소(핸들러 바인딩된 대상)	바깥쪽에서 이벤트를 들은 요소

 

예시 코드

<div id="parent" @click="handleClick">
  <button>Click me</button>
</div>

methods: {
  handleClick(event) {
    console.log('target:', event.target);
    console.log('currentTarget:', event.currentTarget);
  }
}

• event.target: <button> → 사용자가 실제 클릭한 요소
• event.currentTarget: <div id="parent"> → 핸들러가 등록된 요소

 

이미지 클릭 예시 (다단계 구조)

<div id="outer" @click="handleClick">
  <ul>
    <li>
      <img src="img.png" />
    </li>
  </ul>
</div>

methods: {
  handleClick(event) {
    console.log('e.target:', event.target.tagName);         // IMG
    console.log('e.currentTarget:', event.currentTarget.tagName); // DIV
  }
}

 

정리 요약

구분	의미
이벤트 전파	이벤트가 DOM 트리 상에서 이동하는 흐름
캡처링 → 타깃 → 버블링	전파 순서
e.target	실제 이벤트 발생한 요소
e.currentTarget	이벤트 리스너가 등록된 요소