[원티드 프리온보딩] TIL - (3)

5월 5일

target과 currentTarget

onClick과 같은 이벤트가 발생했을 때, event.target은 핸들러가 부착된 요소의 가장 안 쪽에 있는 자식을 의미하고 event.currentTarget은 핸들러가 부착된 요소 그 자체를 의미한다.

const onClick = (e) => {
  console.log(e.target);
  console.log(e.currentTarget);
};

<li>
  <button onClick={onClick}>
    <span>Target</span>
  </button>
</li>;

이와 코드의 결과는 다음과 같이 된다.

<!-- e.target -->
<span>Target</span>

<!-- e.currentTarget -->
<button>
  <span>Target</span>
</button>