[JS] CurrentTarget 프로퍼티란 무엇인가? <타블로그 복붙>

자바스크립트의 이벤트 중 클릭한 요소를 가져오는 방법으로 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을 활용하는 것이 더욱 편리할 것입니다.

 

 

 

 

출처: webisfree.com/2017-09-06/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-event-target-%ED%94%84%EB%A1%9C%ED%8D%BC%ED%8B%B0%EC%99%80-currenttarget-%ED%94%84%EB%A1%9C%ED%8D%BC%ED%8B%B0%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90%EC%9D%80