[프론트] Event 버블링과 캡쳐링을 서술하고 이를 방지하기 위한 방법을 서술하세요

한줄 정리

이벤트 버블링은 이벤트가 발생한 요소에서부터 부모로 전파되며 상위요소의 이벤트 핸들러가 실행되는 현상을 뜻합니다. 
브라우저의 이벤트 흐름은 캡처링 → 타겟 → 버블링 순서로 이루어지며,
버블링 단계에서 자식에서 발생한 이벤트가 부모로 전달됩니다.

이를 방지하기 위한 방법은 바로 e.stopPropagation()입니다. 

 

설명

안에 있는 버튼을 클릭했는데 밖의 부모의 onClick이 발동하는 경우를 보셨을겁니다. 

이게 바로 Event 버블링을 고려하지 않아서 발생한 문제인데요,

브라우저가 어떤 식으로 이벤트를 인식하는지 이해하면  어렵지 않은 개념입니다. 

 

브라우저의 이벤트 DOM 트리에서 캡처링 단계에 자식까지 내려갔다가
자식에서 다시 root인 html로 다시 돌아가는 버블링과정에서 이벤트를 인식해내는데요,

그러는 과정에서 자식에서 발동한 이벤트가 부모의 이벤트 리스너를 발동합니다. 

 

캡처링: 이벤트가 타겟까지 내려오는 과정
버블링: 이벤트가 타겟에서 부모 방향으로 전파되는 과

 

이를 막기 위해서는 자식에서 e.stopPropagation를 해줘야합니다. 

그러면 해당 함수를 호출한 그 시점에서 전파를 중단합니다.