DOM 이벤트 전파와 리스너 계약

리스너를 어디에 붙였는지, 어느 단계에서 실행되는지, 기본 동작을 막을지에 따라 같은 클릭도 다른 결과가 된다.

document

바깥 컨텍스트

캡처 리스너가 먼저 본다.

container

부모 요소

target으로 내려가는 중간 경로다.

button target

실제 시작점

event.target 이 되는 가장 안쪽 요소다.

button target

대상 처리

상태 변경과 기본 동작 차단을 결정한다.

container

이벤트 위임

부모 리스너가 target을 판별한다.

핵심target은 “어디서 시작했는가”이고 currentTarget은 “지금 실행 중인 리스너가 붙은 곳”이다. 둘을 구분해야 위임과 전파 제어가 꼬이지 않는다.