e.target 과 e.currentTarget

두부링·2025년 3월 27일

이모저모...

목록 보기
7/12

✅ 이 말의 진짜 뜻은?

  • e.target은 실제 이벤트가 발생한 "자식 요소"라서, 그 안에서 일어난 일이기 때문에 더 다양하고 예측 불가하다.

예시 코드

사용자가 버튼을 클릭해서 폼을 제출하면?
e.target → <button> ← ✅ 버튼이 클릭됐으니까!
e.currentTarget → <form> ← ✅ 이벤트 리스너가 걸려있는 곳


<form onSubmit={(e) => {
  console.log(e.target);
  console.log(e.currentTarget);
}}>
  <input type="text" name="title" />
  <button type="submit">제출</button>
</form>

그래서 "value가 더 확산된다"는 말의 의미는?

e.target은 input, button, select 등 다양한 요소가 될 수 있어., "정확히 뭐가 들어올지 예측하기 어려워" → 확산된다는 표현이 나온 거야!

어떤 상황에서는 <input>일 수도 있고, 어떤 상황에선 <textarea>일 수도 있음 → 다양하게 바뀔 수 있다 = 확산

반면에 e.currentTarget은?

무조건 내가 이벤트 걸어놓은 그 요소! → 예: <form>

그래서 타입도 안정적이고, .action, .method, .elements 등도 안정적으로 접근 가능!

🎯 핵심 요약!

  • e.target은 실제 이벤트가 일어난 요소(자식)라서 뭐가 들어올지 다양하고(확산됨),
  • e.currentTarget은 이벤트가 바인딩된 요소라서 예측 가능하고 안정적이다!

e.currentTarget은 e가 작성된 요소라는 건가요?

👉 답:
그렇다! e.currentTarget은 이벤트 리스너(=함수)를 "작성한 그 요소"다!

profile
하이하잉

0개의 댓글