[ JavaScript ] currentTarget vs target 차이점

자바스크립트를 공부하던 중  e.currentTarget와 e.target의 차이점이 궁금해서 포스팅하게 되었다. 쉽게 말하자면 자바스크립트는 이벤트가 요소(element) 간에 전파가 된다. 이런 경우로 인해 currentTarget과 target이 선택하는 요소가 달라진다.

 

 

currentTarget vs target 차이점

---

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

 

 

예제

 

---

 

<div class="currDiv">
  <p>나를 선택하면 나는 target</p>
  <a href="#">다른 target</a>
</div>

const currDiv = document.getElementById('currDiv');

currDiv.addEventListener('click',(e)=>{
  console.log('currentTarget : ',e.currentTarget.tagName) // currentTarget : div
  console.log('target : ',e.target.tagName) // target : p
});

 

위의 예제를 보면 currentTarget은 currDiv로 이벤트를 등록한 요소이기 때문에 addEventListener를 붙여놓은 div태그가 된다. 

 

target은 이벤트가 발생하는 요소를 가리키기 때문에 '나를 선택하면 나는 target'이 p태그가 되고 '다른 target'을 설정하면 a태그가 target이 된다.