e.target vs. e.currentTarget

특정 element를 제어해야하는 경우가 생겼다.

<section data-index-number={1}>
  <span>value</span>
  <div>154,300</div>
</section>

대략 위와 같은 형태에서 section 에 onclick이벤트를 적용했다.
그리고 아래와 같은 형태의 함수로 핸들링을 시도했다.

const handleSection = (e) => {
  // something
  console.log(e.target)
}

처음에는 e.target.dataset으로 진행을 했다. 근데 아래와 같이 나왔다..

DOMStringMap {}

당황스러웠는데.. 의도한 건 해당 객체에 indexNumber라는 키가 있어야 했는데...
그래서 찾아보니 결국
e.target vs. e.currentTarget을 보게 되었다...

깨달은 것을 간단 정리로 마무리한다.
아래 두 사항의 기본 전제는 이벤트가 어디에 바인딩 되어 있는지이다. 아래 예시는 section에 이벤트가 바인딩 되어있다.
CodeSandbox

만약 내가 section>span을 클릭했다면 결과는 이렇다.

e.target: span
e.currentTarget: section

만약 내가 section>div를 클릭했다면 결과는 이렇다.

e.target: div
e.currentTarget: section

결론

e.target은 내가 실제로 클릭한 element
e.currentTarget은 실제 이벤트가 바인딩 되어 있는 element

결국 section에 onclick은 e.currentTarget으로 접근해야 indexNumber를 얻을 수 있다.