그알것 — 그럼에도 알아야 할 것들
홈질문커뮤니티
로그인
그알것 — 그럼에도 알아야 할 것들

Service

  • 홈
  • 소개
  • 질문
  • 커뮤니티

My

  • 내 워크스페이스
  • 저장한 질문
  • 작성한 답변

Policy

  • 이용약관
  • 개인정보처리방침
  • 문의

© 2026 그알것 · What Still Matters

질문 목록Browser
Browser

이벤트 버블링과 캡처링에 대해 설명해 주세요.

실무4/5
설계3/5
인간2/5
기초3/5

면접관의 질문 의도

방향 차이만 외워 왔는지, 아니면 위임·전파 차단·외부 클릭 같은 실전 패턴과 연결할 수 있는지를 가른다.

큐레이션 답변

학습 자료

브라우저 이벤트는 항상 캡처링 → 타깃 → 버블링의 3단계로 흐른다. 캡처링은 window에서 시작해 타깃 요소까지 "내려오는" 단계이고, 버블링은 타깃에서 다시 상위로 "올라가는" 단계다. 기본적으로 addEventListener는 버블링 단계에서 동작하고, capture: true를 주면 캡처링 단계에서 잡을 수 있다. stopPropagation으로 이 흐름을 끊을 수 있고, preventDefault는 별개로 기본 동작만 막는다는 점을 함께 본다.

좋은 답변 구조

  1. 01이벤트가 캡처링 → 타깃 → 버블링 3단계로 흐른다는 공통 골격부터 짚는다
  2. 02각 단계의 방향(아래로/위로)과 addEventListener의 기본값을 정리한다
  3. 03stopPropagation·preventDefault·event.target/currentTarget 같은 제어 도구를 보여 준다
  4. 04이벤트 위임·외부 클릭 감지처럼 이 흐름 위에 올라가는 실전 패턴으로 마무리한다

자주 실수하는 포인트

버블링과 캡처링의 방향을 반대로 설명한다
stopPropagation과 preventDefault를 같은 의미로 섞어 쓴다
이벤트 위임을 "성능 최적화"로만 설명하고 전파 흐름과의 연결을 빠뜨린다
event.target과 currentTarget을 구분하지 못해 위임 코드에서 잘못된 요소를 잡는다

실무 맥락

  • 리스트 아이템마다 핸들러를 거는 대신 부모에 위임으로 처리하는 대량 렌더 화면
  • 모달 외부 클릭을 감지해 닫는 "바깥 클릭" 패턴을 구현하는 오버레이 컴포넌트
  • 외부 라이브러리가 자체적으로 stopPropagation을 호출해 상위 핸들러가 안 도는 디버깅 상황

본인 경험에 녹이는 힌트

리스트가 길어져 위임 패턴으로 옮긴 경험이 있다면 event.target과 closest 활용 이야기로 풀어낼 수 있다

모달이나 드롭다운에서 "바깥 클릭으로 닫기"를 구현하며 전파 흐름을 추적한 경험이 있다면 캡처링 활용 사례로 보여 줄 수 있다

외부 라이브러리 컴포넌트가 이벤트를 막아 디버깅한 경험이 있다면 stopPropagation의 부작용 이야기로 자연스럽게 이어갈 수 있다

커뮤니티 인기 답변

전체 0개

아직 공개된 답변이 없어요. 첫 공개 답변을 남겨보세요.

관련 꼬리 질문

Q1이벤트 위임에서 event.target과 currentTarget은 어떻게 구분해서 쓰나요
Q2stopPropagation을 남발하면 어떤 문제가 생기나요
Q3캡처링 단계가 꼭 필요한 케이스는 어떤 상황인가요
아직 답을 쓰지 않았어요.
큐레이션 답변과 다른 사람 답변을 보고, 자기 언어로 답을 정리해보면 학습 효과가 가장 큽니다.
목차
  • 01면접관의 질문 의도
  • 02큐레이션 답변
  • 03좋은 답변 구조
  • 04자주 실수하는 포인트
  • 05실무 맥락
  • 06본인 경험에 녹이는 힌트
  • 07커뮤니티 인기 답변준비중
  • 08관련 꼬리 질문