이벤트 버블링: HTML 문서에서 이벤트의 전파 원리와 활용 방법

이벤트 버블링(Event Bubbling)은 HTML 문서 구조에서 이벤트가 발생했을 때, 그 이벤트가 부모 요소로 계속해서 전파되는 현상을 말합니다. 이것은 이벤트의 처리를 조금 더 직관적으로 만들어주는데 기여합니다.

 

예를 들어, HTML 구조가 있다고 가정해봅시다.

만약 버튼(#child)을 클릭한다면, 클릭 이벤트는 버튼에서 시작해서 부모로 계속해서 전파됩니다. 즉, 클릭 이벤트는 먼저 버튼에서 처리되고, 그 다음에는 부모 요소인 div#parent에서도 처리됩니다. 이렇게 이벤트는 하위 요소에서 상위 요소로 전파되는 것을 이벤트 버블링이라고 합니다.

이벤트 버블링은 이벤트 핸들러를 더 효율적으로 사용할 수 있게 합니다. 예를 들어, 여러 개의 하위 요소들이 동일한 이벤트를 처리해야 할 때, 부모 요소에 이벤트 핸들러를 하나만 등록해놓고 이벤트가 버블링됨에 따라 필요한 하위 요소들에서 이벤트를 처리할 수 있습니다.

이벤트 버블링은 이벤트를 조금 더 유연하게 다룰 수 있게 해주지만, 때로는 의도치 않은 동작을 초래할 수도 있습니다. 이를 원치 않는 경우에는 event.stopPropagation() 메서드를 사용하여 이벤트 버블링을 중지시킬 수 있습니다.

 

<div id="parent">
    <button id="child">Click me!</button>
</div>