DOM Event

DOM 이벤트 전파와 리스너 옵션

브라우저 이벤트는 capture, target, bubble 단계를 지나며 addEventListener 옵션과 event 객체의 속성으로 전파와 기본 동작을 제어합니다.

이벤트 객체가 리스너에 도달하는 과정

addEventListener

사용자 동작

click, input, submit, keydown은 Event 또는 MouseEvent 같은 객체로 전달됩니다.

전파 단계

{ capture: true }는 내려가는 단계에서 실행되고, 기본값은 target 이후 bubble 단계입니다.

리스너 실행

event.target은 실제 발생 요소, currentTarget은 현재 리스너가 붙은 요소입니다.

기본 동작

preventDefault는 cancelable 이벤트에만 의미가 있고, passive 리스너에서는 막을 수 없습니다.

user actioncapturetarget/bubblelistener optionscleanup
이벤트 전파 점검

위임은 부모 리스너에서 target을 검사하는 패턴입니다. stopPropagation, stopImmediatePropagation, AbortController signal은 남용하면 디버깅이 어려워집니다.