[JavaScript] Target, currentTarget 차이점

currentTarget은 클릭 이벤트가 걸려있는 요소를 반환한다.
Target는 자식 요소가 클릭되면 자식 요소를 반환한다. 즉, 클릭 이벤트가 부모에 걸려있어도 진짜로 클릭되는 요소가 반환된다.

const clickHandler = (event) => {
  console.log(event.target);
  console.log(event.currentTarget);
}

<div onClick={(e) => { clickHandler(e) }}>
  <h3>제목</h3>
</div>

아래에서 부모 영역(하늘색), 자식 영역(분홍색) 둘 다 클릭해보자. currentTarget은 변화가 없는 반면 Target은 클릭하는 요소에 따라 달라진다.