30_Event bubbling & capturing

Event bubbling과 capturing은 브라우저의 이벤트 전파 방식을 설명하는 용어입니다. 먼저 이벤트 전파란 브라우저에서 이벤트가 발생한 요소부터 시작하여 상위 요소로 전파되는 과정을 말합니다.

✅ Event Capturing (캡처링):
이벤트 캡처링은 이벤트가 최상위 요소에서 시작하여 실제 타겟 요소로 전파되는 과정입니다.
이벤트가 발생한 요소부터 상위 요소로 전파되면서 각 요소에서 등록된 이벤트 핸들러가 호출됩니다.
이벤트 캡처링은 이벤트를 가장 바깥쪽 요소에서부터 가장 안쪽 요소로 전파시키며, 이 과정에서 이벤트 버블링보다 먼저 발생합니다. 이벤트 캡처링 단계에서는 보통 부모 요소에서 자식 요소로 이벤트가 전파되는 것입니다.

✅ Event Bubbling (버블링):
이벤트 버블링은 이벤트가 최하위 요소에서부터 시작하여 상위 요소로 전파되는 과정입니다.
이벤트가 발생한 요소에서 시작하여 최상위 요소로 전파되면서 각 요소에서 등록된 이벤트 핸들러가 호출됩니다.
이벤트 버블링은 이벤트 캡처링 이후에 발생하며, 대부분의 경우 기본적으로 활성화됩니다.
이벤트 버블링 단계에서는 보통 자식 요소에서 부모 요소로 이벤트가 전파되는 것입니다.

 

요약하자면, 캡처링은 가장 바깥쪽 요소부터 시작하여 내부로, 버블링은 반대로 내부에서 바깥쪽으로 이벤트가 전파됩니다. 이러한 이벤트 전파 방식은 이벤트 핸들링에서 특정 요소의 이벤트만 처리하거나, 여러 요소 간에 이벤트를 공유할 때 유용하게 사용됩니다.