event.target과 event.currentTarget의 차이점은 무엇인가요?
분야: 프론트엔드
event.target과 event.currentTarget은 모두 이벤트 객체의 속성이며, 각각 "이벤트가 실제로 발생한 요소" 와 "이벤트 리스너가 연결된 요소" 를 가리킵니다. 이 둘의 차이점을 이해하려면 이벤트 버블링을 알아야 합니다. 이벤트는 특정 요소에서 발생한 후 부모 요소들로 전파되는 과정(버블링)을 거치는데, 이 과정에서 target과 currentTarget이 다르게 동작합니다.
예를 들어, 부모 요소에 이벤트 리스너를 등록했지만 자식 요소에서 이벤트가 발생하여 버블링된 상황에서, target은 "이벤트가 발생한 요소"인 자식 요소를 가리킵니다. 반면, currentTarget은 "이벤트 리스너가 연결된 요소"인 부모 요소를 가리킵니다.
쉽게 말해, target은 “사용자가 직접 상호작용한, 즉 이벤트가 발생한 요소”를, currentTarget은 “그 이벤트를 듣고 있는 요소”를 나타냅니다. 예를 들어, <div> 안에 <button>이 있고, <div>에 이벤트 리스너가 부착되어 있다면, 버튼을 클릭했을 때 target은 <button>을, currentTarget은 <div>를 반환합니다.
이 차이는 이벤트 위임이나 이벤트 전파 처리 시 중요합니다. target과 currentTarget을 적절히 활용하면, 이벤트 처리 시 원하는 대상을 명확히 지정하여 예기치 않은 동작을 방지할 수 있습니다.