event.target과 event.currentTarget의 차이점에 대해 설명해주세요

[klmhyeonwoo]

event.target과 event.currentTarget의 차이점에 대해 설명해주세요

@prgmr99, @klmhyeonwoo

[prgmr99]

모르는 것 투성이!!!

---

두 속성의 핵심 차이는 **"이벤트가 발생한 지점인가, 아니면 이벤트 리스너가 달린 지점인가"**에 있습니다.

1. 한 문장 요약

• event.target: 이벤트가 실제로 발생한 가장 안쪽의 요소 (클릭한 바로 그 놈)
• event.currentTarget: 이벤트 리스너가 직접 부착된 요소 (이벤트를 감시하고 있는 주인)

2. 구체적인 차이점

① event.target (Origin)
사용자가 실제로 클릭하거나 터치한 요소를 가리킵니다. 이벤트 버블링이 일어나더라도 이 값은 변하지 않고, 처음 이벤트가 시작된 지점을 끝까지 유지합니다.

② event.currentTarget (Owner)
이벤트 핸들러(함수)가 등록된 요소를 가리킵니다. 자바스크립트 코드 내에서 element.addEventListener를 호출할 때 사용한 그 element를 의미하며, 핸들러 내부의 this와 일치합니다.

[klmhyeonwoo]

아 새롭게 학습하신건가요?!

[prgmr99]

뭔가 예전에 공부했던거 같은데, 아예 설명을 못해서... 다시 학습했슴다..!

[klmhyeonwoo]

event.target은 이벤트가 실제로 발생한 요소를 의미하고,
event.currentTarget은 이벤트가 바인딩된 요소를 의미합니다.

function handleClick(event) {
  console.log(event.currentTarget); // <div>
  console.log(event.target); // <p>
}

<div onClick={handleClick}>
  <p>Click me!</p>
</div>