target / currentTarget

Patrick·2021년 5월 11일
0

Javascript

목록 보기
18/18
post-thumbnail

Javascript 그리고 React를 사용하다보면 어떤 곳을 클릭해야하는 일이 생기며, 이 클릭한 요소를 가져오는 방법이 필요하다.
이 때 사용하는 것이 바로 e.target.value 혹은 e.currentTarget.value 이다.

그런데 이 둘은 어떻게 다른 것일까?
이를 알기 위해서는 이벤트 버블링에 대해서 알아야하는데, 이는 나중에 다시 포스팅하도록 하겠다.

우선 간단하게 이 둘의 차이를 보자면,
target은 이벤트버블링의 가장 마지막에 위치한 최하위 요소를 반환하게 된다.
즉, 클릭 되어진 요소를 기준으로 사용하는 경우 사용해볼 수 있다.

그러나

currentTarget의 경우 이벤트가 바인딩된 요소, 해당하는 그 요소를 반환하게 된다.


function checkTarget(e) {
  let element = e.currentTarget;
  console.log(element);
}

<div onclick="checkTarget();">
  <span>test</span>
</div>

이런 코드가 있다고 해보자.
만약 사용자가 div 내부에 위치한 span tag를 클릭하는 경우 event property에 따라서 서로 다른 요소를 반환하게 될 것이다.

  • e.target.value
    클릭 된 span tag를 반환하게 된다
  • e.currentTarget.value
    이벤트가 바인딩 된 div 요소를 반환하게 된다

이 예제의 경우 1 depth 정도의 간단한 하위 구조를 가지고 있지만, 복잡해지는 경우 target만 사용하는 경우 어떤 요소가 클릭되어 반환되어야 하는지 그 결과가 달라질 수 있다.
이런 경우 currentTarget을 사용하면 보다 편리하게 사용 할 수 있을 것이다.

profile
예술을 사랑하는 개발자

0개의 댓글