DOM 이벤트 전파와 리스너 옵션
브라우저 이벤트는 capture, target, bubble 단계를 지나며 listener 옵션과 event 객체로 전파와 기본 동작을 제어한다.
| 개념 | 의미 | 대표 API/값 | 확인할 것 |
|---|---|---|---|
| Capture | 부모에서 target으로 내려가는 단계 | { capture:true } | 이 단계가 정말 필요한가 |
| Target | 이벤트가 발생한 실제 요소 | event.target | 위임 처리에서 대상 확인 |
| Bubble | target에서 부모로 올라가는 단계 | 기본 전파 방향 | 부모 핸들러가 의도치 않게 실행 |
| Stop | 전파를 중단 | stopPropagation() | 다른 기능까지 막지 않는가 |
| Default | 브라우저 기본 동작 제어 | preventDefault() | 링크/폼 동작을 왜 막는지 명확한가 |
이벤트 처리는 “어디서 발생했나”와 “어느 단계에서 누가 듣는가”를 분리하면 전파 버그를 줄일 수 있다.