버블링과 캡처링

• 이벤트 발생 시 이벤트가 발생한 가장 안쪽 요소가 타깃 요소(event.target) 가 됨

• DOM 이벤트는 캡쳐링 단계, 타깃 단계, 버블링 단계로 나뉘어서 최상위 조상에서 타깃 객체로 내려간 후 다시 최상위 조상으로 올라감

• 공식적으론 3개의 이벤트 흐름이 있지만 캡쳐링과 버블링 간계의 핸들러는 타깃 단계에서 트리거됨

• 이벤트 캡쳐링은 트리 따라 내려가면서 addEventListener(...,{capture: true}(true로 축약 가능)) 로 할당된 핸들러 동작시킴

• 타깃 요소에 설정된 핸들러 호출 후 이벤트는 event.target 로 부터 이벤트 버블링으로 다시 최상위 노드 까지 전달되면서 각 요소에 on<\event> 로 할당된 핸들러 중, 세 번째 인수가 없거나 false, {capture:false} 인 핸들러만 호출됨

• 각 핸들러는 event 객체의 프로피티인 target(이벤트가 발생한 가장 안쪽의 요소), currentTarget(=this, 이벤트를 핸들링 하는 현재 요소(핸들러가 실제 할당된 요소)), eventPhase(현재 이벤트 흐름 단계, 캡쳐링 = 1, 타깃 = 2, 버블링 = 3)

• 핸들러에서 event.stopPropagation() 을 사용해 이벤트 버블링 멈추기 가능하지만 추후 버블링이 필요할 수 있기 떄문에 추천하지 않음

• event.stopImmediatePropagation() 사용해 버블링 멈추고 요소에 할당된 다른 핸들러 동작도 막음

• removeEventListner() 로 핸들러 제거할 떄는 같은 단계(true 인자 삽입)에 있어야 함

• 캡쳐링 단계는 거의 쓰이지 않으며 주로 버블링만 쓰임

• 거의 모든 이벤트는 버블링 되지만 버블링 되지 않는 이벤트 또한 존재하므로 주의 필요