[JavaScript] Event의 target과 currentTarget

2022. 11. 1. 15:28·JavaScript
반응형

Event 객체에는 Target과 currentTarget이 존재한다. 

 

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

<button onClick={handleClick}>
    <span>버튼</span>
</button>

target은 이벤트를 발생시킨 주체를 의미하고, currentTarget은 이벤트 핸들러를 가지고 있는 

요소를 나타낸다. 

필요에 따라 target 또는 currentTarget을 사용해서 이벤트 핸들링을 하면 된다. 

반응형
저작자표시 비영리 변경금지 (새창열림)

'JavaScript' 카테고리의 다른 글

[JavaScript] 함수형 프로그래밍 - 함수형으로 전환하기_1  (0) 2022.11.13
[JavaScript] 함수형 프로그래밍 - 개요  (0) 2022.11.12
nullish coalescing operator ( nullish 병합 연산자 : ?? )  (0) 2022.10.24
[JavaScript] Vanilla JavaScript로 상태 관리 만들기!  (1) 2022.10.01
[JavaScript] ?? 문법  (1) 2022.09.22
'JavaScript' 카테고리의 다른 글
  • [JavaScript] 함수형 프로그래밍 - 함수형으로 전환하기_1
  • [JavaScript] 함수형 프로그래밍 - 개요
  • nullish coalescing operator ( nullish 병합 연산자 : ?? )
  • [JavaScript] Vanilla JavaScript로 상태 관리 만들기!
잉여개발자
잉여개발자
풀스택 개발자를 목표로 잉여롭게 개발 공부도 하면서 다양한 취미 생활도 즐기고 있는 잉여 개발자입니다.
  • 잉여개발자
    잉여로운 개발일지
    잉여개발자
    • 분류 전체보기 (789)
      • 개발정보 (36)
      • 개발환경 (7)
      • 개발생활 (19)
      • React (141)
        • 이론 (23)
        • 기능 (12)
        • 실험실 (88)
        • 버그 (6)
        • 패스트캠퍼스 (9)
        • Npm (3)
      • React Native (28)
        • 공통 (6)
        • TypeScript (3)
        • JavaScript (18)
        • 버그 (1)
      • Next.js (30)
        • 이론 (13)
        • 실험실 (13)
        • 버그 (3)
      • Web (35)
      • 알고리즘 (202)
        • 풀이 힌트 (39)
      • JavaScript (47)
      • TypeScript (29)
        • 기초 (27)
        • 실험실 (2)
      • Node.js (13)
        • 이론 (0)
        • 기능 (3)
        • 실험실 (9)
        • 버그 (1)
      • 도커 (4)
      • CCNA (22)
        • 이론 (4)
        • 문제 (18)
      • 취미생활 (167)
        • 잉여로운 칵테일 (2)
        • 잉여의 식물키우기 (130)
        • 잉여로운 여행기 (11)
        • 잉여의 제2외국어 (21)
        • 잉여로운 책장 (2)
      • Java (1)
        • Java의 정석 (1)
      • 꿀팁 공유 (3)
  • 태그

    리액트
    바질
    리얼클래스
    식물
    알고리즘
    webpack
    typescript
    Node.js
    바질 키우기
    next.js
    ChatGPT
    영어독학
    Docker
    ReactNative
    네트워크
    Babel
    덤프
    redux
    CCNA
    프로그래머스
    자바스크립트
    javascript
    네이버 부스트캠프
    CSS
    리얼학습일기
    다이소
    react
    타일러영어
    타입스크립트
    영어회화
  • hELLO· Designed By정상우.v4.10.1
잉여개발자
[JavaScript] Event의 target과 currentTarget
상단으로

티스토리툴바