제목

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

프론트엔드 개발자, JavaScript 초보자

핵심 요약

• 이벤트 버블링(Event Bubbling): 자식 요소에서 발생한 이벤트가 부모 요소로 상향 전파되는 방식 (Child → Parent → Grandparent)
• 이벤트 캡처링(Event Capturing): 문서 최상단에서 하위 요소까지 이벤트가 하향 전파되는 방식 (Document → Grandparent → Parent → Child)
• event.stopPropagation()을 통해 이벤트 전파를 중단할 수 있음

섹션별 세부 요약

1. 이벤트 처리의 비유: 식당 웨이터

• 20개 테이블에 20명 웨이터 배치는 비효율적
• 1명의 웨이터가 모든 테이블을 감시하는 방식이 효율적
• 이벤트 처리 시 이벤트 버블링과 캡처링을 통해 효율적으로 관리 가능

2. 이벤트 버블링 예시

• addEventListener로 요소에 이벤트 리스너 등록
• 클릭 시 자식 → 부모 → 조부모 순으로 이벤트 전파
• 코드 예시:

```javascript

document.getElementById("grandparent").addEventListener("click", () => {

console.log("Grandparent clicked");

});

```

3. 이벤트 캡처링 예시

• addEventListener의 세 번째 파라미터를 true로 설정하여 캡처링 모드 활성화
• 이벤트 전파 순서: 문서 → 조부모 → 부모 → 자식
• 코드 예시:

```javascript

document.getElementById("child").addEventListener("click", (e) => {

e.stopPropagation(); // 이벤트 전파 중단

});

```

결론

• 이벤트 버블링과 캡처링을 이해하면 DOM 트리에서 이벤트를 효율적으로 처리 가능
• event.stopPropagation()을 사용하여 불필요한 이벤트 전파를 방지해야 함
• 실무에서 이벤트 핸들러 중복을 방지하고 성능 최적화에 유리함