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

event.target
event.currentTarget



# 둘의 차이점은?

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

<div onclick="checkTarget();">
  <span>test</span>
</div>

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

function checkTarget(event) {
  var ele = event.currentTarget;
  console.log(ele);
}

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

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

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