이벤트 버블링, 캡쳐링, 위임

이벤트 흐름

1. 캡쳐링 단게(Capturing phase): 이벤트가 하위 요소로 전파되는 단계
2. 타겟 단계(Target phase): 이벤트가 실제 타겟 요소로 전달되는 단계
3. 버블링 단계(Bubbling phase): 이벤트가 상위 요소로 전파되는 단계

이벤트 버블링

• 이벤트 버블링(Event Bubbling): 자식 요소에서 부모 요소로 이벤트가 전파되는 것
• stopPropagation 메소드로 버블링을 막을 수 있다

이벤트 캡쳐링

• 이벤트 캡쳐링(Event Capturing): 부모 요소에서 자식 요소로 이벤트가 전파되는 것
• 캡쳐링 단계에서 이벤트 핸들러를 동작시키려면, addEventListener 에 세번째 프로퍼티에 true 또는 { capture: true } 를 전달하면 된다

이벤트 위임

• 이벤트 위임(Event Delegation)
  자식 요소 각각에 이벤트 핸들러를 하나씩 등록할 필요 없이 부모 요소에서 한 번에 자식 요소들에 발생한 이벤트를 관리하는 방식을 이벤트 위임이라고 합니다.

참고 자료

• UI Events
• Javascript - Event order
• EventTarget: addEventListener() method - Web APIs | MDN
• 코드잇 제공 자료