반응형
이벤트 버블링(Event Bubbling)은 웹 개발에서 이벤트가 DOM 요소에서 발생할 때,
이 이벤트가 상위 요소로 전파되는 과정을 설명하는 개념이다.
이벤트 버블링의 작동 원리
- 이벤트 발생: 사용자가 버튼을 클릭하거나 링크를 클릭하는 등 특정 이벤트가 발생한다.
- 이벤트 전파: 이벤트가 발생한 요소(타겟 요소)에서 시작하여, 해당 요소의 상위 요소들로 순차적으로 전파된다.
- 상위 요소 처리: 각 상위 요소는 이벤트를 감지하고, 해당 이벤트에 대한 핸들러를 실행할 수 있다.
- 전파 종료: 이벤트는 최상위 요소인 document까지 전파된 후, 더 이상 전파되지 않는다.
이벤트 버블링 예시
아래는 이벤트 버블링을 보여주는 간단한 예시 코드이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Bubbling Example</title>
<style>
.parent { padding: 20px; background: lightblue; }
.child { padding: 20px; background: lightgreen; }
</style>
</head>
<body>
<div class="parent" id="parentDiv">
Parent Div
<div class="child" id="childDiv">
Child Div
</div>
</div>
<script>
document.getElementById('parentDiv').addEventListener('click', function() {
alert('Parent Div Clicked!');
});
document.getElementById('childDiv').addEventListener('click', function() {
alert('Child Div Clicked!');
});
</script>
</body>
</html>이 코드에서 Child Div를 클릭하면, Child Div Clicked! 알림이 먼저 표시된 다음, Parent Div Clicked! 알림이 표시된다.
이것은 이벤트가 childDiv에서 시작하여 상위 요소인 parentDiv로 전파되기 때문이다.
이벤트 버블링의 장단점
- 장점:
- 단일 핸들러 사용: 상위 요소에서 이벤트를 처리하여, 하위 요소에 대한 개별 이벤트 핸들러를 설정할 필요가 없다.
- 이벤트 위임: 이벤트 핸들러를 상위 요소에 설정하여, 동적으로 생성된 하위 요소에 대한 이벤트 처리가 가능하다.
- 단점:
- 예상치 못한 이벤트: 상위 요소에서 이벤트가 처리되면서, 특정 하위 요소의 클릭이 상위 요소의 핸들러를 호출할 수 있어 예상치 못한 동작이 발생할 수 있다.
- 복잡성 증가: 많은 상위 요소가 이벤트를 처리하는 경우, 이벤트가 여러 핸들러를 통과하게 되어 복잡해질 수 있다.
이벤트 버블링 제어
- 이벤트 버블링 방지: event.stopPropagation() 메서드를 사용하여 이벤트의 상위 요소로의 전파를 중지할 수 있다.
document.getElementById('childDiv').addEventListener('click', function(event) {
alert('Child Div Clicked!');
event.stopPropagation(); // 이 줄을 추가하면 상위 요소의 핸들러는 호출되지 않는다.
});이벤트 버블링은 웹 페이지에서 이벤트 처리를 효율적으로 관리할 수 있도록 도와주는 중요한 개념이다.
'개발 지식' 카테고리의 다른 글
| [개발 지식] Cors 해결 방법 (React + TypeScript, Spring Boot) (0) | 2024.08.30 |
|---|---|
| [개발 지식] 체리픽(cherry-pick) (0) | 2024.08.25 |
| [개발 지식] HTTP 응답 상태 코드(100, 200, 300, 400, 500) (0) | 2024.08.23 |
| [개발 지식] 로컬 스토리지 vs 쿠키 (0) | 2024.08.23 |
| [개발 지식] Sock.js와 Stomp.js 관계 (0) | 2024.08.23 |