event model

이벤트는 전파 제어와 기본 동작 제어를 나눠서 본다

클릭 자체를 처리하는 일, 부모로 올라가는 전파를 막는 일, 링크나 폼의 기본 동작을 막는 일은 서로 다른 판단입니다.

Capture상위 요소에서 하위 요소 방향으로 내려갑니다.

Target이벤트가 실제 발생한 요소입니다.

Bubble하위 요소에서 상위 요소 방향으로 올라갑니다.

01 리스너 등록 addEventListener로 이벤트 종류와 실행 함수를 연결합니다.

02 캡처 확인 옵션을 켠 리스너는 부모 쪽에서 먼저 실행될 수 있습니다.

03 타깃 처리 event.target으로 실제 클릭된 요소를 구분합니다.

04 버블 활용 상위 요소 하나에 핸들러를 두면 목록 이벤트 위임이 가능합니다.

05 기본 동작 폼 제출과 링크 이동은 preventDefault로 따로 제어합니다.

전파만 막기 부모 핸들러 실행을 막고 싶을 때 사용합니다. stopPropagation()을 선택합니다.

기본 동작 막기 폼 제출, 링크 이동 같은 브라우저 기본 처리를 멈춥니다. preventDefault()를 선택합니다.

여러 항목 처리 목록 전체에 하나의 리스너를 두고 실제 항목을 구분합니다. event.target과 조건문을 같이 봅니다.

submit 문제 검증 실패 시 전파가 아니라 기본 제출 동작을 막아야 합니다.

중복 핸들러 고전 이벤트 모델은 덮어쓰기가 생길 수 있어 표준 모델을 우선합니다.

예외 처리 이벤트 안의 위험한 로직은 try-catch로 중단 범위를 줄입니다.