[ JS / javaScript ] target 과 currentTarget의 차이

이벤트 핸들링에서 event.target과 event.currentTarget은 서로 다른 요소를 참조할 수 있다.

이 둘의 주요 차이점은 이벤트가 실제로 발생한 요소(event.target)와 이벤트 리스너가 등록된 요소(event.currentTarget)를 가리킨다는 것

 

event.target

• event.target은 이벤트가 실제로 발생한(구체적인) 요소를 가리킵니다.
• 이벤트 버블링이나 캡처링 과정에서도 event.target은 변하지 않습니다.
• 사용자가 클릭하거나 상호작용하는 실제 요소를 나타냅니다.

event.currentTarget

• event.currentTarget은 이벤트 핸들러(리스너)가 등록된 요소를 가리킵니다.
• 이벤트 버블링이나 캡처링 과정에서 event.currentTarget은 이벤트를 처리하는 현재 요소로, 이벤트 리스너가 실제로 등록된 요소를 나타냅니다.
• 따라서 이벤트 핸들러 내에서 this 키워드와 같은 값을 가집니다(단, 화살표 함수를 사용하는 경우 this의 값은 달라질 수 있습니다).

//HTML
<div id="parent">
  Parent
  <button id="child">Child</button>
</div>

//JS
document.getElementById('parent').addEventListener('click', function(event) {
  console.log('event.target:', event.target.id); // 실제 클릭된 요소의 ID
  console.log('event.currentTarget:', event.currentTarget.id); // 이벤트 리스너가 등록된 요소의 ID
});

child를 클릭하면 event.target은 실제로 click이 일어난 child를 가리키고, event.currentTarget은 이벤트가 등록된 요소를 가르킨다.

 

이렇게 되는 이유는 이벤트 버블링 때문인데

1. child 요소에서 click 이벤트가 발생
2. 이 이벤트는 child에서 시작하여 DOM 트리를 따라 parent 요소로 버블링(거품이 올라가듯이)되어 올라간다.
3. parent 요소에 도달했을 때, parent에 등록된 클릭 이벤트 리스너가 실행
4. 이 과정에서 event.target은 원래 클릭된 요소인 child를 계속 가리키고, event.currentTarget은 이벤트 리스너가 실행되는 현재 요소인 parent를 가리킨다.

child 클릭

 

반대로 Parent를 클릭하면 동일한 요소를 가리킨다.

Parent 클릭