이벤트 흐름
- 캡쳐링 단게(Capturing phase): 이벤트가 하위 요소로 전파되는 단계
- 타겟 단계(Target phase): 이벤트가 실제 타겟 요소로 전달되는 단계
- 버블링 단계(Bubbling phase): 이벤트가 상위 요소로 전파되는 단계
이벤트 버블링
- 이벤트 버블링(Event Bubbling): 자식 요소에서 부모 요소로 이벤트가 전파되는 것
stopPropagation
메소드로 버블링을 막을 수 있다
이벤트 캡쳐링
- 이벤트 캡쳐링(Event Capturing): 부모 요소에서 자식 요소로 이벤트가 전파되는 것
- 캡쳐링 단계에서 이벤트 핸들러를 동작시키려면,
addEventListener
에 세번째 프로퍼티에 true
또는 { capture: true }
를 전달하면 된다
이벤트 위임
- 이벤트 위임(Event Delegation)
자식 요소 각각에 이벤트 핸들러를 하나씩 등록할 필요 없이 부모 요소에서 한 번에 자식 요소들에 발생한 이벤트를 관리하는 방식을 이벤트 위임이라고 합니다.
참고 자료