[JS] event.target vs event.currentTarget

event.Target vs event.currentTarget

핵심은 currentTarget은 이벤트 핸들러가 부착된 것을 가리킨다는 것이다
즉, event.target은 부모로부터 이벤트가 위임되어 발생하는 자식의 위치, 내가 클릭한 자식 요소를 반환한다.
하지만 currentTarget은 이벤트가 부착된 자기자신의 위치를 반환한다.

<li>
  <button>
    <span>Naver</span>
  </button>
</li>

내가 Naver를 클릭했을때 정확히 어떤 것이 반환되는지 알기 위해 콘솔을 찍어두었다.

const onLogin = (event) => {
  console.log(event.target); // <span>Naver</span>
  console.log(event.currentTarget); // <button><span>Naver</span></button>
};

즉, event.target은 자식요소인 span을 리턴하고, event.currentTarget은 자기자신인 button을 반환하는 것을 알 수 있다.

---

출처

https://velog.io/@edie_ko/JavaScript-event-target%EA%B3%BC-currentTarget%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90