이벤트 흐름

이벤트 전파와 기본 동작 제어

이벤트는 대상 요소에서만 끝나지 않는다. 캡처링, 타깃, 버블링 단계를 이해해야 preventDefault와 stopPropagation을 구분할 수 있다.

01

리스너 등록

addEventListener로 이벤트 종류와 실행 함수를 연결한다.

handler
02

캡처 단계

옵션을 켠 리스너는 상위 요소부터 먼저 실행될 수 있다.

capture
03

타깃 단계

클릭이나 입력이 실제 발생한 요소의 핸들러가 실행된다.

target
04

버블 단계

이벤트가 부모 요소로 올라가며 위임 패턴에 활용된다.

bubble
05

기본 동작

폼 제출이나 링크 이동은 preventDefault로 막을 수 있다.

default

전파 차단 · 제출 차단 · 이벤트 위임 점검

전파 차단 stopPropagation은 부모 핸들러 실행을 막지만 기본 동작 자체를 막지는 않는다.
제출 차단 폼 검증 실패 시 submit 이벤트에서 preventDefault를 호출한다.
이벤트 위임 목록 전체에 하나의 핸들러를 두고 event.target으로 실제 항목을 구분한다.