[Javascript] 알면 알수록 오묘한 자바스크립트의 세계

박세화·2023년 5월 17일

Javascript

목록 보기
1/12

event 안의 target의 value 끄집어내기

const onChange = (e) => {
    const {
      target: { value },
    } = e;
};

event 안의 target안의 value를 잡기
밑에서 value 를 바로 사용가능함.

이건 밑의 코드와 같다.

const value = e.target.value

ㄷㄷ 신기 굳이 왜 첫 번째 방법으로 쓰는지, 그 효용은 잘 모르겠지만

target vs currentTarget

event.target 은 이벤트가 일어나는 장소, event.currentTarget 은 이벤트 핸들러가 부착되어있는 장소

The currentTarget read-only property of the Event interface identifies the current target for the event, as the event traverses the DOM. It always refers to the element to which the event handler has been attached, as opposed to Event.target, which identifies the element on which the event occurred and which may be its descendant.

<button onClick={onLogin}>
	<span>naver</span>
</button>

👀 그렇다면 이 코드에서
event.target<span>naver</span> 를 반환하고
event.currentTarget<button> 태그 전체를 반환한다.(안에 있는 span 자식까지도)

0개의 댓글