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

Service

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

My

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

Policy

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

© 2026 그알것 · What Still Matters

질문 목록Browser
Browser

이벤트 전파(event propagation)에 대해서 설명해주세요

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

면접관의 질문 의도

캡처링/버블링 단어를 들어본 사람인지, 위임·전파 차단을 _실제 버그 시나리오_와 연결해 설명하는 사람인지를 가른다.

큐레이션 답변

학습 자료

DOM 이벤트는 보통 _캡처링_으로 window→타깃까지 내려오고, 타깃에서 실행된 뒤 _버블링_으로 다시 올라간다. addEventListener의 capture 옵션으로 캡처링 단계에서 잡을지, 기본값(버블링)으로 잡을지를 정할 수 있다. stopPropagation은 같은 노드 이후 전파를 끊고, stopImmediatePropagation은 같은 노드의 다른 리스너까지 막는다. 이 모델이 _이벤트 위임_을 가능하게 하고, 모달 바깥 클릭 닫힘·드롭다운 처리 같은 패턴의 동작 기반이다.

좋은 답변 구조

  1. 01이벤트 객체·타깃·리스너·전파 단계라는 구성 요소부터 정의한다
  2. 02캡처링 → 타깃 → 버블링의 단계 흐름을 구체적인 DOM 트리 예시로 설명한다
  3. 03stopPropagation·stopImmediatePropagation·capture 옵션 같은 _분기 동작_을 짚는다
  4. 04이벤트 위임·모달 외부 클릭 닫힘 같은 디버깅 포인트로 마무리한다

자주 실수하는 포인트

버블링만 설명하고 캡처링 단계를 빠뜨린다
stopPropagation과 preventDefault를 같은 기능으로 헷갈린다
stopPropagation을 관성적으로 써서 상위 위임 로직을 끊는다
stopImmediatePropagation으로 같은 노드의 다른 리스너까지 막히는 차이를 모른다

실무 맥락

  • 리스트 행마다 클릭 핸들러를 다는 대신 위임으로 묶는 구현
  • 모달/드롭다운에서 "바깥 클릭 시 닫기"를 만들면서 stopPropagation을 잘못 쓰는 디버깅
  • 라이브러리 컴포넌트가 끼어 있는 페이지에서 의도 없는 클릭 차단이 나는 상황

본인 경험에 녹이는 힌트

이벤트 위임으로 수백 행 리스트의 리스너 비용을 줄여본 적이 있다면 전파 모델 이해를 답변 후크로 쓸 수 있다

stopPropagation 한 줄 때문에 상위 메뉴 닫힘이 깨진 버그를 잡아본 적이 있다면 그 케이스가 그대로 답이 된다

캡처링 단계에서 잡아 키보드 단축키를 가로챈 경험이 있다면 단계별 활용으로 연결할 수 있다

커뮤니티 인기 답변

전체 0개

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

관련 꼬리 질문

Q1capture 옵션과 기본 버블링 동작은 어떻게 다르나요
Q2stopPropagation과 preventDefault의 차이는 무엇인가요
Q3이벤트 위임을 사용할 때 전파 지식이 왜 필요한가요
아직 답을 쓰지 않았어요.
큐레이션 답변과 다른 사람 답변을 보고, 자기 언어로 답을 정리해보면 학습 효과가 가장 큽니다.
목차
  • 01면접관의 질문 의도
  • 02큐레이션 답변
  • 03좋은 답변 구조
  • 04자주 실수하는 포인트
  • 05실무 맥락
  • 06본인 경험에 녹이는 힌트
  • 07커뮤니티 인기 답변준비중
  • 08관련 꼬리 질문