event.target과 event.currentTarget의 차이점
event.target과 event.currentTarget은 모두 이벤트 객체에 포함된 속성이지만, 가리키는 대상은 서로 다릅니다.
이 차이를 제대로 이해하려면 이벤트 버블링(Event Bubbling) 개념을 함께 알아두는 것이 중요합니다.
이벤트는 특정 요소에서 발생한 뒤, 해당 요소의 부모 요소로 차례대로 전파됩니다. 이 과정을 이벤트 버블링이라고 합니다. 이 버블링 과정에서 target과 currentTarget은 서로 다른 값을 가지게 됩니다.
event.target
→ 이벤트가 실제로 발생한 요소
event.currentTarget
→ 이벤트 리스너가 등록된 요소
예를 들어,
안에 이 있고
에 클릭 이벤트 리스너를 등록했다고 가정해봅시다.
이 상태에서 사용자가
을 클릭하면 이벤트는 버튼에서 발생한 뒤 부모인 이 상태에서 사용자가
로 버블링됩니다.
이때:
event.target은 사용자가 직접 클릭한
event.currentTarget은 이벤트 리스너가 연결된
를 가리키게 됩니다.
즉,
target은 “사용자가 실제로 상호작용한 요소”,
currentTarget은 “현재 이벤트를 처리 중인 요소”라고 이해하면 쉽습니다.
이 차이는 특히 이벤트 위임(Event Delegation) 을 사용할 때 매우 중요합니다. 하나의 부모 요소에 이벤트를 등록해 여러 자식 요소의 이벤트를 처리할 경우, target과 currentTarget을 구분하지 않으면 의도하지 않은 요소가 동작할 수 있습니다. 상황에 맞게 두 속성을 정확히 사용하면 이벤트 처리 로직을 더 안전하고 명확하게 작성할 수 있습니다.
