event.target vs event.currentTarget 차이

target 과 currentTarget 차이
target : 이벤트가 발생한 요소 반환
currentTarget : 이벤트를 등록해 놓은 요소 반환 (이벤트 리스너를 가진 요소)

•   target 예시

const mydiv = (e) => {
    console.log("target", e.target);
};

// ① 배경이 파란색 부분(div tag) 클릭 시
// ② 배경이 빨간색 부분(span tag) 클릭 시


<div onClick={mydiv} style={{ background: "blue" }}>
    <span style={{ background: "red" }}>대한민국</span>
</div>

위 소스 결과

 

• currentTarget 예시

const mydiv = (e) => {
    console.log("currentTarget", e.currentTarget);
};

// ① 배경이 파란색 부분(div tag) 클릭 시
// ② 배경이 빨간색 부분(span tag) 클릭 시


<div onClick={mydiv} style={{ background: "blue" }}>
    <span style={{ background: "red" }}>대한민국</span>
</div>

위 소스 결과

 

• 붉은색 부분을 눌러도 이벤트를 가진 파란색 속성(div tag)에 접근하고 싶다면 currentTarget 사용