currentTarget vs target 의 차이점 자바스크립트

자바스크립트에서 e.currentTarget와 e.target의 차이점에 궁금한 사항이 있어서 포스팅합니다.

자바스크립트 이벤트는 엘리먼트간에 전파됩니다.(버블링의 경우 제일 안쪽부터 바깥으로, 캡쳐링의 경우 바깥에서 안쪽으로) 일단 그렇게만 알고 계세요. 더 들어가면 복잡해져요 ㅋㅋ.

currentTarget vs target 차이점

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

<div id="mydiv">
  <p>나는 나다</p>
  <a href="#">우리나라</a>
</div>
Code language: HTML, XML (xml)

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

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

위와 같이 예를 들어 설명하면 더 쉽다.

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

target는 이벤트가 발생한 요소이다. 만약 “나는 나다”를 클릭하면 p태그가 target가 되는 것이고, 만약 “우리나라”를 클릭하면 a태그가 target가 되는 것이다.