버블링(Bubbling)은 자바스크립트 이벤트 전파의 한 방식으로, 이벤트가 발생한 요소에서 시작하여 그 요소의 부모 요소들로 차례로 전파되는 과정을 의미합니다. 기본적으로 자식 요소에서 발생한 이벤트가 부모 요소로 전파되는 방식입니다.
버블링의 동작 원리
- 이벤트 발생: 특정 요소에서 이벤트가 발생합니다. (예: 버튼 클릭)
- 버블링 시작: 이벤트는 가장 깊은 요소(이벤트가 발생한 요소)에서 시작하여 그 요소의 부모로 전파됩니다.
- 부모 요소로 전파: 각 부모 요소에서 해당 이벤트를 처리할 수 있는 기회를 가지며, 최상위 요소인 document까지 전파됩니다.
예제
다음은 버블링을 설명하기 위한 간단한 예제입니다:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>버블링 예제</title>
<style>
#grandparent {
padding: 20px;
border: 2px solid red;
}
#parent {
padding: 20px;
border: 2px solid blue;
}
#child {
padding: 20px;
border: 2px solid green;
}
</style>
</head>
<body>
<div id="grandparent">조부모
<div id="parent">부모
<button id="child">자식 버튼</button>
</div>
</div>
<script>
const grandparent = document.getElementById('grandparent');
const parent = document.getElementById('parent');
const child = document.getElementById('child');
grandparent.addEventListener('click', function() {
console.log('조부모 클릭됨!');
});
parent.addEventListener('click', function() {
console.log('부모 클릭됨!');
});
child.addEventListener('click', function() {
console.log('자식 버튼 클릭됨!');
});
</script>
</body>
</html>설명
- HTML 구조: 조부모, 부모, 자식 요소로 이루어진 구조입니다. 자식 요소는 버튼입니다.
- JavaScript: 각 요소에 클릭 이벤트 리스너를 추가했습니다.
- 조부모 요소 클릭 시 "조부모 클릭됨!" 메시지 출력
- 부모 요소 클릭 시 "부모 클릭됨!" 메시지 출력
- 자식 버튼 클릭 시 "자식 버튼 클릭됨!" 메시지 출력
실행 결과
- 버튼을 클릭하면, "자식 버튼 클릭됨!", "부모 클릭됨!", "조부모 클릭됨!" 순서로 메시지가 출력됩니다. 이는 이벤트가 자식 요소에서 발생하고, 부모 요소로 버블링되기 때문입니다.
버블링의 장점
- 이벤트 위임: 부모 요소에 이벤트 리스너를 추가하여 자식 요소의 이벤트를 한 번에 처리할 수 있어 성능 향상과 코드 간소화에 도움이 됩니다.
- 효율적인 이벤트 관리: 많은 자식 요소가 있는 경우, 각각에 이벤트를 등록할 필요 없이 부모 요소에만 등록하여 관리할 수 있습니다.
버블링은 이벤트 처리에서 중요한 개념이므로 이해하고 활용하는 것이 중요합니다!
'JAVASCRIPT' 카테고리의 다른 글
| location 객체 (0) | 2024.10.30 |
|---|---|
| window 객체 (0) | 2024.10.30 |
| preventDefault(), stopPropagation(), return false 차이점 (0) | 2024.10.30 |
| 이벤트 객체 (0) | 2024.10.30 |
| 객체란? (0) | 2024.10.24 |