이벤트 전파 event propagation
어떤 요소에서 이벤트가 발생했을 때 해당 이벤트가 트리 구조상 인접한 요소들에게도 전달되는 것
<body>
<div class="large">
<div class="medium">
<div class="small">
!!
</div>
</div>
</div>
</body>이벤트 버블링
이벤트 버블링은 예를 들어 위 코드에서 div.small를 클릭해 바인딩 된 이벤트를 실행시킨다면 div.medium, div.large, body에 바인딩 되어있는 이벤트까지 같이 실행되는 것이다.
이벤트 캡쳐
이벤트 캡쳐는 이벤트 버블링과는 반대 방향으로 상위 요소에서 하위 요소로 해당 태그를 찾아 내려간다. 위 코드에서 body를 클릭하면 div.small의 이벤트까지 실행되는 것이다. 이벤트 캡처는 기본값이 아니고 addEventListener() API에서 옵션 객체에 capture: true를 설정해줘야한다.
currentTarget => 현재 onClick 이벤트가 바인딩 되어있는 그 요소를 가져온다.
그냥 target이면 그 이벤트가 바인딩되어있는 요소의 자식이 눌려서 이벤트 실행이 안될 수도 있음
event.stopPropagation()
이벤트 전파를 중단시키고 싶으면 실행시키고 싶은 함수에 event.stopPropagation() 을 추가한다. 해당 함수가 바인딩 된 요소의 부모요소의 이벤트는 실행되지 않는다.
컴포넌트로 import 되어도 이벤트 전파는 이루어지기 때문에 유의해야 한다.
