event.target과 event.currentTarget의 차이점

규갓 God Gyu·2025년 1월 31일

면접질문

목록 보기
59/142

모두 이벤트 객체의 속성, 각각 이벤트가 실제로 발생한 요소 / 이벤트 리스너가 연결된 요소를 가리킴

둘의 차이점을 이해하려면 이벤트 버블링을 알아야 함
이벤트는 특정요소에서 발생 후 부모 요소들로 전파되는 과정(버블링)을 거치는데, 이 과정에서 다르게 동작함

ex - 부모 요소에 이벤트 리스너를 등록했지만 자식 요소에서 이벤트가 발생하여 버블링된 상황에 target은 이벤트가 발생한 요소인 자식 요소를 가리킴

반면 currentTarget은 이벤트 리스너가 연결된 요소인 부모 요소를 가리킴

쉽게 말해 target은 사용자가 직접 상호작용한, 즉 이벤트가 발생한 요소,
currentTarget은 그 이벤트를 듣고 있는 요소를 나타냄

ex - div안에 button이 있고 div에 이벤트 리스너가 부착되어 있으면, 버튼 클릭 시 target은 button, currentTarget은 div를 반환

이 차이는 이벤트 위임이나 이벤트 전파 처리 시 중요
target과 currentTarget을 적절히 활용하면, 이벤트 처리 시 원하는 대상을 명확히 지정하여 예기치 않은 동작을 방지할 수 있음

profile
웹 개발자 되고 시포용

0개의 댓글