[JS] event의 target과 currentTarget의 차이

처음 DOM을 살펴볼 때 헷갈리는게 target과 currentTarget이다.
'둘 다 target인데 현재 타겟과 그냥 타겟 차이가 뭐지?'
하고 혼동이 있었던 기억이 있다.😅

target 이란?

event.target

부모로부터 이벤트가 내려와 발생하는 자식의 위치
즉, 내가 클릭한 자식 요소를 가리킨다.

event.target은 알겠는데 event.currentTarget은 뭘까.
사실 이게 헷갈리는 것이었다.

event.currentTarget

이벤트를 처리하는 요소. 화살표 함수를 사용해 핸들러를 만들거나 다른 곳에 바인딩하지 않은 경우엔 this가 가리키는 값과 같다.
화살표 함수를 사용했거나 함수를 다른 곳에 바인딩한 경우엔 event.currentTarget를 사용해 이벤트가 처리되는 요소 정보를 얻을 수 있음
(출처 : 모던자바스크립트)

명확하게 설명하자면, 내가 클릭한 이벤트 핸들러를 설정한 것의 자체를 가리킨다. (표현이 틀렸을 수도?)

아래에서 예시를 보면 이해가 쉬울 것 같다.

<div>
    <button id="myButton">
      <span>target과 currentTarget</span>
    </button>
 </div>

// js

function onTarget(event) {
  console.log(event.target);
  console.log(event.currentTarget);
}

적재적소에 사용하기 귀해 잘 구분해서 알아두기⭐️