🌱 기초 프론트엔드
이벤트 버블링이 뭔가요?
쉽게 이해하기
물속에서 공기 방울이 수면으로 올라가는 걸 떠올려보세요. 아래에서 위로 올라가죠. 웹에서도 버튼을 클릭하면 그 클릭 이벤트가 버튼 → 버튼을 감싼 div → body → html 순서로 올라갑니다. 이렇게 이벤트가 부모로 전달되는 걸 버블링이라고 해요.
핵심 정리
자식 요소에서 발생한 이벤트가 부모 요소로 전달되는 현상입니다.
자세히 알아보기
웹 페이지에서 어떤 요소를 클릭했을 때, 그 클릭 이벤트는 그 요소에서만 처리되지 않습니다. 클릭된 요소부터 시작해서 부모, 조부모, 최상위 요소까지 차례로 이벤트가 전달됩니다. 이게 이벤트 버블링입니다.
예를 들어 목록 안에 있는 항목 하나를 클릭하면, 그 항목의 클릭 이벤트뿐만 아니라 목록 전체의 클릭 이벤트도 같이 발동할 수 있어요. 때로는 이게 유용하지만, 의도하지 않은 동작을 일으킬 수도 있습니다.
실무에서는 이벤트 위임(Event Delegation)이라는 기법에 활용됩니다. 리스트 항목 100개에 각각 이벤트를 달지 않고, 리스트 하나에만 이벤트를 달아도 버블링 덕분에 어떤 항목이 클릭됐는지 알 수 있어요. 이렇게 하면 코드가 훨씬 간결해지고 성능도 좋아집니다.
만약 버블링을 막고 싶다면 stopPropagation() 메서드를 사용하면 됩니다. 이벤트가 더 이상 부모로 전달되지 않게 막아줍니다.