Event.currentTarget과 Event.target

이벤트 핸들러 내부 this binding 시 currentTarget 속성과 target 속성의 차이

 

document.body.innerHTML = '<div id="clickDiv">클릭';

document.getElementById('clickDiv').addEventListener('click', function(event){
    console.log(event.currentTarget);
    console.log(event.target);
});

 

이벤트 핸들러가 바인딩된 엘리먼트는 event.currentTarget 

 

이벤트가 실제로 발생한 엘리먼트는 event.target

 

참고

https://stackoverflow.com/questions/10086427/what-is-the-exact-difference-between-currenttarget-property-and-target-property

What is the exact difference between currentTarget property and target property in JavaScript

DOC

https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

Event.currentTarget - Web APIs | MDN

https://developer.mozilla.org/en-US/docs/Web/API/Event/target

Event.target - Web APIs | MDN