e.target, e.currentTarget 차이

 

 

e.target, e.currentTarget

 

 

target은 부모로부터 이벤트가 위임되어 발생하는 자식의 위치, 내가 클릭한 자식 요소를 반환함

=> 클릭이 일어난 바로 그 요소

 

currentTarget은 이벤트가 부착된 부모의 위치를 반환함

=> 클릭이 일어난 요소부터 상위로 올라가며(버블링) 이벤트 핸들러가 등록된 요소를 가리킴

 

 

 

 

 

1. button 안에 자식 없을 때

 

 

 

 

 

 

 

2. 하위 div 만들었을 때

 

 

 

target은 하위를 가리킴

 

 

 

 

 

 

3. 하위 div 2개일 때

 

 

 

target : 가장 하위(secondChild)를 가리킴

currentTarget : button 을 가리킴

 

 

 

 

 

 

 

4. 하위 div 5개 만들어봄

 

 

 

target : 가장 하위(fifthChild)를 가리킴

currentTarget : button 을 가리킴

 

 

 

 

 

 

---

 

 

이벤트 버블링 / 캡쳐링

하위 컴포넌트에서 이벤트가 발생하면 캡처링-버블링이 발생함

 

 

 

 

 

이벤트 캡처링

: 최상위 부모 요소인 html부터 처음 이벤트가 발생한 요소까지 내려가 이벤트 핸들러가 있는지 검사 - 호출 하는 것

 

 

이벤트 버블링

: 이벤트가 처음 발생한 요소->html요소까지 이벤트 핸들러가 있는지 검사-호출하는 것

 

 

 

 

이벤트 핸들러는 버블링 단계에 동작함 

 

 

캡처링 타입의 이벤트 핸들러가 등록 되어 있다면

 

모든 캡처링 핸들러가 먼저 호출된 후 버블링 핸들러가 호출됨

 

 

 

 

 

 

정리

 

 

 

target은 부모로부터 이벤트가 위임되어 발생하는 자식의 위치, 내가 클릭한 자식 요소를 반환함

=> 클릭이 일어난 바로 그 요소

 

currentTarget은 이벤트가 부착된 부모의 위치를 반환함

=> 클릭이 일어난 요소부터 상위로 올라가며(버블링) 이벤트 핸들러가 등록된 요소를 가리킴

 

 

 

 

 

 

 

 

참고 블로그

https://db2dev.tistory.com/entry/JS-%EC%9D%B4%EB%B2%A4%ED%8A%B8%EC%9D%98-target%EA%B3%BC-currentTarget-%EC%B0%A8%EC%9D%B4-with-%EB%B2%84%EB%B8%94%EB%A7%81