이벤트 버블링(Event Bubbling)이란?
이벤트 버블링은 이벤트가 발생한 요소에서 시작하여, DOM 계층 구조를 따라 상위(포함하는) 요소들로 차례대로 전파되는 현상입니다. 물속에서 거품이 아래에서 위로 떠오르듯 이벤트가 가장 안쪽 요소에서 바깥쪽 요소로 올라가기 때문에 '버블링(bubbling)'이라는 이름이 붙었습니다.
동작 원리 살펴보기
다음 예제에는 div, span, button 세 가지 요소가 사용됩니다.
- 계층 구조를 유지하기 위해 button 요소는 span 요소 안에, span 요소는 div 요소 안에 중첩시켜야 합니다.
- 모든 요소에 클릭 이벤트를 등록하여, 요소를 클릭하면 해당 메시지를 담은 알림 창(alert)이 열리도록 합니다.
- 프로그램을 실행하면 화면에 아래 이미지와 같은 결과가 나타납니다.
- 특정 요소를 클릭하면 그 요소뿐만 아니라 외부에 있는 포함 요소(부모 요소)들에게도 이벤트가 자동으로 전파되어 함께 실행됩니다.
- 예를 들어 가장 안쪽에 중첩된 요소인 button을 클릭하면, button의 알림 창과 함께 계층 구조 순서대로 span, div의 알림 창도 하나씩 차례로 열립니다.
- 마찬가지로 span 요소를 클릭하면 span의 알림 창과 그 상위 요소인 div의 알림 창이 순서대로 나타납니다.
- 이처럼 이벤트가 발생한 요소에서 시작해 계층 구조를 따라 상위 요소들로 거슬러 올라가며 전파되는 과정을 이벤트 버블링(event bubbling)이라고 합니다.
- 이벤트가 발생한 요소와 버블링되어 올라간 상위 요소들이 모두 실행됩니다.
예제 코드
<html>
<head>
<style>
.styleClass{
display:table-cell;
border:1px solid black;
padding: 20px;
text-align:center;
}
</style>
</head>
<body>
<div class = "styleClass" onclick = "alert('Div clicked')">Div element
<span class = "styleClass" onclick ="alert('Span clicked')">span element
<input type = "button" value = "click me" onclick="alert('Button clicked')">
</span>
</div>
</body>
</html>코드 편집기에서 위 프로그램을 실행하면 다음과 같은 화면이 표시됩니다.
'click me' 버튼(button 요소)을 클릭하면 아래와 같은 결과가 출력됩니다.
실행 결과
위의 'click me' 버튼(button 요소)을 클릭하면 다음과 같은 출력 결과가 화면에 나타납니다.
위 알림 창에서 확인을 누르면 'Span clicked'라는 메시지가 담긴 다음 알림 창이 나타납니다.
이어서 이 알림 창에서 확인을 누르면 'Div clicked'라는 메시지가 담긴 마지막 알림 창이 표시됩니다.
참고: 버블링 막기
이벤트가 상위 요소로 전파되는 것을 원하지 않는 경우에는 이벤트 객체의 stopPropagation() 메서드를 사용하면 됩니다. 이 메서드를 호출하면 해당 요소에서 이벤트 처리가 종료되며, 더 이상 상위 요소로 버블링되지 않습니다. 이를 통해 특정 요소에서만 이벤트가 동작하도록 제어할 수 있습니다.