[JS] e.target, e.target.value, e.currentTarget의 역할과 차이점

이벤트 객체의 속성

항목	설명	예시
e.target	이벤트가 실제로 발생한 요소를 참조한다. 주로 클릭, 입력 등의 이벤트에서 사용된다.	부모 요소에 이벤트 리스너가 있을 때, 자식 요소에서 이벤트가 발생하면, e.target은 자식 요소를 가리킨다.
e.target.value	이벤트가 발생한 요소의 값을 참조한다. 주로 폼 요소(input, select, textarea 등)에서 값을 가져올 때 사용된다.	사용자가 텍스트 필드에 입력한 값을 가져오려면 e.target.value를 사용한다.
e.currentTarget	이벤트 핸들러가 현재 실행되고 있는 엘리먼트(이벤트 리스너가 등록된 엘리먼트)를 참조한다. 주로 이벤트 위임 또는 이벤트의 버블링과 관련된 작업에서 사용된다.	부모 요소에 이벤트 리스너가 있을 때, 자식 요소에서 이벤트가 발생하면, e.currentTarget은 부모 요소를 가리킨다

예시코드

e.target

function handleClick(e) {
  console.log(e.target); // 클릭된 요소
}
<button onClick={handleClick}>Click me</button>;

e.target.value

function handleChange(e) {
  console.log(e.target.value); // 입력 필드의 현재 값
}

<input type="text" onChange={handleChange} />;

e.currentTarget

요소에 클릭 이벤트가 등록되어 있고, 이벤트가 발생한 요소와 이벤트 리스너가 등록된 요소가 다를 때 e.currentTarget를 통해 이벤트 리스너가 등록된 요소를 얻을 수 있다.

function handleClick(e) {
  if (e.target === e.currentTarget) return;
  console.log("이벤트 리스너가 등록된 요소:", e.currentTarget);
}

<div onClick={handleClick}>
  <button>Click me</button>
</div>;