[TypeScript]evet.target 과 evet.currentTarget의 차이

TypeScript 공부를 하던 중 처음보는 currentTarget을 만나 공부 후 정리

사실 해당 내용은 TypeScript와는 상관이 없는 JS 내용입니다. 

---

정의

- currentTarget : evet handler가 정의된 요소를 반환

- target : 이벤트가 발생된 요소를 반환

 

예시코드로 보자

---

예시 코드

function App() {
  ...

  const onClick = (e:React.FormEvent<HTMLButtonElement>) => {
    console.log("커런트",e.currentTarget);
    console.log("그냥 타겟",e.target);
  }

  return( 
    <div>
      <form onSubmit={onSubmit}>
        <input value={value} onChange={onCange} type="text" placeholder='username'></input>
        <button onClick={onClick}><span>Log in</span></button>
      </form>
    </div>
  )
}

 

---

콘솔 출력

위처럼 button을 클랙 했을때 나오는 console은 위와같은 차이점이 생긴다.

---

재밌는 사항

버튼의 가장 바깥쪽을 클릭하면 동일하게 나온다

이유는 가장 밖을 클릭하면 난 span이 아닌 button요소를 클릭한 것이기 때문이다.