[JavaScript]Target과 CurrentTarget 차이점

Target과 CurrentTarget 차이점

Target과 CurrentTarget은 DOM Event Interface의 프로퍼티라는 공통점을 가지고 있지만, 이 두 개의 프로퍼티는 결코 동일한 프로퍼티가 아닙니다.

 

이번 포스팅은 DOM Event Interface의 프로퍼티인 Target과 CurrentTarget 차이점을 소개합니다.

---

이벤트

이 둘의 차이점을 설명하기 전에 JavaScript에서 이벤트가 무엇이며 어떻게 동작하는지 이해해야 합니다.

 

웹 사이트를 사용하는 사용자가 HTML 요소에 대한 사건을 일으키는 행위를 이벤트(Event)라고 말합니다.

 

HTML 요소에 대한 사건은 다음과 같은 행위입니다.

- 로그인 버튼을 클릭

- 로그인하기 위해 아이디를 입력

- 검색창에 검색 키워드를 입력

- 스크롤을 했을 때

 

이러한 이벤트가 발생할 때마다 특정 로직이 실행되도록 하는 것을 이벤트 핸들러라고 말합니다. 

 

HTML 태그에 이벤트 핸들러를 연결할 수 있으며, React에서는 다음 예제처럼 특정 태그에 이벤트 핸들러를 연결할 수 있습니다. 즉, div 태그를 클릭하면 onClick 이벤트가 동작하면서 콘솔에 'div 태그 클릭!'을 출력합니다.

 

onClick() 이벤트 핸들러의 매개변수인 e는 이벤트 핸들러 객체를 의미합니다.

export default function App() {
  return (
    <div
      onClick={(e) => {
        console.log('div 태그 클릭!');
      }}
      style={{ width: "300px", height: "100px", backgroundColor: "red" }}
    >
    </div>
  );
}

[실행 결과]

---

Target vs CurrentTarget

Target은 이벤트가 시작된 위치(태그)를 의미하며, CurrentTarget은 이벤트 핸들러와 연결된 위치(태그)를 의미합니다.

 

다음 예제를 통해 이 둘의 차이점을 알아봅시다.

export default function App() {
  return (
    <div 
      onClick={(e) => {
        console.log(e.currentTarget);
        console.log(e.target);
      }}
      style={{ 
        width: "300px", 
        height: "100px", 
        backgroundColor: "red" }}
    >
      <input type="text" />
    </div>
  );
}

[실행 결과]

소스 코드와 실행 결과에서 확인할 수 있듯이 div 태그 내부에 input 태그가 존재합니다.

 

먼저, input 태그 외부이며 div 태그 내부 영역을 클릭해보겠습니다.

콘솔에서 확인할 수 있듯이 e.currentTarget과 e.target이 동일한 값을 출력합니다.

 

즉, div 태그에서 onClick 이벤트가 발생했으므로 e.currentTarget과 e.target은 동일한 값입니다.

 

다음은 input 태그 내부 영역을 클릭해보겠습니다.

e.currentTarget과 e.target이 다른 값을 출력합니다.

 

input 태그가 div 태그 내부에 있기에 div 태그의 onClick 이벤트가 동작하지만 e.currentTarget은 onClick 이벤트 핸들러와 연결된 div 태그의 정보를 출력하고 target은 클릭한 요소인 input 태그의 정보를 출력합니다.

---

정리

• currentTarget은 이벤트 핸들러와 연결된 태그를 가리킵니다.
• target은 이벤트를 발생시킨 태그를 가리킵니다.
• currentTarget과 target이 동일한 경우 이벤트 핸들러가 연결된 태그와 이벤트를 발생시킨 태그가 동일하다는 것을 의미합니다.