자바스크립트 event target 프로퍼티와 currentTarget 프로퍼티의 차이점은?

자바스크립트의 이벤트 중 클릭한 요소를 가져오는 방법으로 event 객체의 target 또는 currentTarget 프로퍼티를 사용합니다. 이때 이 둘의 차이점은 무엇이고 어떤 경우에 무엇을 사용해야하는지 알아봅니다.

event.target
event.currentTarget

# 둘의 차이점은?

event.target은 이벤트버블링의 가장 마지막에 위치한 최하위의 요소를 반환합니다. 즉 클릭된 요소를 기준으로 사용하는 경우 event.target을 사용합니다. 하지만 event.currentTarget의 경우 이벤트가 바인딩된 요소, 해당하는 요소를 반환합니다. 아래 에제를 봐주세요.


아래는 스크립트 코드입니다.


만약 사용자가 div 내부의 span 태그를 클릭한 경우 어떻게 될까요? event 프로퍼티에 따라 아래와 같이 서로 다른 요소를 반환할 수 있습니다.

• event.target  //  클릭된 span 태그를 반환
• event.currentTarget  //  이벤트가 바인딩된 div 요소를 반환
  

위 예제는 간단한 1 depth의 하위 구조를 가졌지만 복잡해지는 경우 event.target 만으로는 어떤 요소가 클릭되어 반환되어야하는지 그 결과가 달라질 수 있습니다. 이런 경우 event.currentTarget을 활용하는 것이 더욱 편리할 것입니다.