바깥 컨텍스트
캡처 리스너가 먼저 본다.
이벤트는 target에서 시작하지만 capture와 bubble 경로를 지난다
리스너를 어디에 붙였는지, 어느 단계에서 실행되는지, 기본 동작을 막을지에 따라 같은 클릭도 다른 결과가 된다.
capture
document
container
button target
부모 요소
target으로 내려가는 중간 경로다.
실제 시작점
event.target이 되는 가장 안쪽 요소다.
bubble
button target
container
document
대상 처리
상태 변경과 기본 동작 차단을 결정한다.
이벤트 위임
부모 리스너가 target을 판별한다.
상위 전파
막지 않으면 더 바깥으로 올라간다.
바깥에서 안쪽
{ capture: true } 리스너가 먼저 본다.
대상 요소 실행
상태 변경, 값 읽기, 기본 동작 차단 여부를 결정한다.
안쪽에서 바깥
대부분의 이벤트가 부모로 올라가며 위임 패턴을 만든다.
브라우저 기본 동작
취소되지 않으면 링크 이동, 폼 제출 같은 기본 동작이 실행된다.
| API | 막는 대상 | 대표 상황 |
|---|---|---|
preventDefault() |
브라우저 기본 동작 | 검증 실패 시 폼 제출을 중단한다. |
stopPropagation() |
상위 요소로 올라가는 전파 | 모달 내부 클릭이 배경 닫기를 건드리지 않게 한다. |
removeEventListener() |
같은 함수 참조의 리스너 | 화면 이탈, 모달 닫힘, 일회성 처리 뒤 정리한다. |
핵심: target은 “어디서 시작했는가”이고 currentTarget은 “지금 실행 중인 리스너가 붙은 곳”이다. 둘을 구분해야 위임과 전파 제어가 꼬이지 않는다.