[JS] currentTarget vs Target

 

 

 

currentTarget : 이벤트를 등록해 놓은 요소를 반환한다. 

Target : 이벤트가 발생한 요소를 반환한다.  

 

말이 어려우니 다음과 같이 예시를 들어보자. 

<div id="mydiv">
  <p>사과</p>
  <a href="#">바나나</a>
</div>

const myDiv = document.getElementById('mydiv');

myDiv.addEventListener('click',(e)=>{
  console.log('currentTarget : ',e.currentTarget.tagName)
  console.log('target : ',e.target.tagName)
});

 

 

 

결과값은 다음과 같다.

currentTarget는 이벤트를 등록해 놓은 요소이기 때문에 listener를 붙여놓은 div가 출력된다. 

target은 이벤트가 발생한 요소를  반환하기 때문에 다음과 같다.  (target의 값을 눈여겨 보시라!) 

//사과를 클릭하면 p태그가  target되어 출력되고 
currentTarget :  DIV
target :  P

//바나나를 클릭하면 a태그가 target되어 출력된다. 
currentTarget :  DIV
target :  A

 

정리! 

currentTarget은 이벤트를 등록해놓은 리스너가 달린 요소를! 

target은 실제 이벤트가 발생한 요소를 반환한다!