dom event loop

DOM 이벤트 처리 흐름도

사용자 행동을 화면 변화로 연결하려면 요소 선택부터 리스너 정리까지 한 흐름으로 봐야 합니다.

select

요소 선택

`querySelector`로 변경할 대상을 정확히 잡습니다.

listen

감지 등록

`addEventListener`에 이벤트 이름과 함수를 넘깁니다.

event

정보 확인

`target`, `key`, `value`로 사용자의 행동을 읽습니다.

mutate

화면 변경

텍스트, 속성, 클래스, 새 요소를 필요한 만큼 바꿉니다.

cleanup

DOM 이벤트 처리 흐름도 정리

한 번만 쓸 리스너는 같은 함수 참조로 제거합니다.

기본 동작 제어

폼 제출과 링크 이동은 필요할 때 `preventDefault`로 막습니다.

함수 참조 유지

제거할 리스너는 익명 함수보다 이름 있는 함수로 등록합니다.

변경 범위 제한

조작할 요소를 좁게 선택해 다른 영역을 실수로 바꾸지 않습니다.