Event bubbling, capturing
Event bubbling과 capture는 브라우저가 상속 관계의 요소들의 event를 어떻게 처리하는지에 대한 단계를 설명하는 용어입니다.
capturing 단계를 이용해야 하는 경우는 흔치 않기 때문에 우선 bubbling에 대해 알아봅시다.
bubbling
그 중 bubbling이 일어나면,
부모 요소와 자식 요소에 같은 type의 event가 등록되어 있다면
자식요소에서 event가 발생해도 부모요소의 event가 함께 실행됩니다.
예를 들어,
부모 요소와 자식 요소에 모두 click event가 등록되어 있을 때 자식요소에서 click event가 발생하면, bubbling이 일어나 부모 요소의 event 콜백함수도 실행됩니다.
이 때 부모 요소에서 발생한 event의 target은 클릭이 발생한 자식요소이고, currentTarget은 이벤트를 받은 부모 요소입니다.
bubbling을 막고싶다면 stopPropagation()을 쓸 수 있습니다.
event.stopPropagation();하지만 상위 요소에서 일어나는 event를 강제로 막는 것은 어떤 결과를 가져올지 파악하기 어렵습니다.
따라서 아래처럼 조건문으로 target과 currentTarget이 같지 않으면 이벤트를 끝내도록 해줍니다.
if (event.Target !== event.currentTarget) return;
References
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling_and_capture
https://ko.javascript.info/bubbling-and-capturing
https://academy.dream-coding.com/courses/browser101
