TLDR;
Capturing → 요소의 이벤트가 실행 될때 최상단 document 에서부터 이벤트가 event target 까지 전달되는 것
Bubbling → 자식이 누른게 부모까지 이벤트가 전파되는 것
Native Bubbling & Capturing
capturing
•
이벤트가 trigger 됐을때 window → document → html → body → … 순으로 전파되는것
•
기본적으로는 활성화 되어있지 않음
bubbling
•
이벤트가 실제로 trigger 됐을때 target → 부모 요소 → … → → html → document → window 순으로 전파되는것
Why tho?
•
하나의 부모가 가지고 있는 자식들에서 일어나는 이벤트를 부모에서 한번에 처리할 수 있도록 하기위해 → 자식들 전부한테 이벤트 리스너 달아주지 않아도 되니까
Bubbling을 멈추는 법
•
event.stopPropagation()
◦
이벤트가 부모로 전파되는 역할을 멈춤
Bubbling 되지 않는 이벤트
•
blur - 리액트에선 버블링 됨
•
focus - 리액트에선 버블링 됨
•
mouseleave
•
mouseenter
•
load
•
unload
•
abort
•
error
•
beforeunload
Event.target vs Event. currentTarget
이벤트가 trigger 된곳과 event listener가 붙은곳은 항상 같지 않다!
•
event.target - 이벤트를 trigger 한 녀석
•
event.currentTarget - 이벤트를 실제로 처리하는 녀석
리액트에서
•
캡쳐링을 활성화 하는법 - onClickCapture라는 property를 태그에 주입 시 캡쳐링 수행
<!-- 리액트에서 활성화 방법 -->
<div style={style} onClickCapture={handleOuterClick}>
<div style={style} onClickCapture={handleInnerClick}>
Click Me
</div>
</div>
HTML
복사
•
리액트 버전 16 이하에선 native JS와 비슷하게 작동해 bubbling 시 Document 까지 전달됨, 리액트 17부턴 root 까지만 전달됨
