e.currentTarget과 e.target의 차이점

e.currrentTarget vs e.target

input 태그에서 값을 받아올 때 맨날 e.target만 사용했었는데 e.currentTarget의 존재를 프리온보딩 피드백을 받으며 처음 알게 되었다

input 태그는 자식 태그가 없고 보통 onChange를 통해 값의 변화만을 추적하기에 망정이지 다른 태그에서 무지성으로 e.target만을 사용했으면 큰일날 뻔 했다... 라고 반성을 좀 했다 ㅡ,,ㅡ;;

값 비교

const handleClick = (e) => {
    console.log(e.target);
    console.log(e.currentTarget);
}

<div onClick={handleOnClick}>
    bbb
    <div>aaa</div>
    <div>ccc</div>
</div>

위와 같은 컴포넌트가 있다고 가정하자

컴포넌트는 bbb 영역과 aaa 영역, ccc 영역으로 나눠진다

aaa 영역과 ccc 영역은 bbb 영역의 자식 영역으로, 자식 영역은 부모 영역의 onClick 이벤트를 위임받는다

// bbb를 눌렀을 때 결과값

<div>
    bbb
    <div>aaa</div>
    <div>ccc</div>
</div>
//e.target

<div>
    bbb
    <div>aaa</div>
    <div>ccc</div>
</div>
//e.currentTarget

bbb 영역을 클릭했을 때는 두 개의 출력값이 똑같은 것을 볼 수 있다

이벤트 핸들러가 부착된 컴포넌트인 bbb를 눌렀기 때문으로, 핸들러가 부착된 컴포넌트와 이벤트가 발생한 컴포넌트가 같기 때문이다

// aaa를 눌렀을 때 결과값

<div>aaa</div>
//e.target

<div>
    bbb
    <div>aaa</div>
    <div>ccc</div>
</div>
//e.currentTarget

허나 aaa 영역을 클릭하면 이야기가 달라진다

이벤트가 실제로 발생한 컴포넌트는 클릭된 aaa 컴포넌트이므로 e.target은 aaa 컴포넌트만을 반환한다

하지만 이벤트 핸들러가 부착된 컴포넌트는 bbb 컴포넌트이므로 e.currentTarget은 bbb 컴포넌트와 자식 컴포넌트를 전부 반환한다

// ccc를 눌렀을 때 결과값

<div>ccc</div>
//e.target

<div>
    bbb
    <div>aaa</div>
    <div>ccc</div>
</div>
//e.currentTarget

ccc 영역을 클릭할 때도 aaa 영역을 클릭했을 때와 비슷한 결과가 출력된다

왜 이런 걸까요

e.target은 이벤트 핸들러가 부착된 컴포넌트가 아닌 이 이벤트를 위임받았고, 이벤트가 실제로 발생한 컴포넌트를 반환한다

e.currentTarget은 이벤트 핸들러가 부착된 컴포넌트만을 가리킨다

위와 같은 경우 나의 의도는 bbb 태그를 불러오는 것이었는데 자식 태그인 aaa 태그만이 불러와져 버리면 컴포넌트상에서 오류가 발생할 수 있다

e.currentTarget을 적절히 사용하자

참고자료

JavaScript | event target과 currentTarget의 차이점

JavaScript | event target과 currentTarget의 차이점