[JS] 이벤트 버블링, 캡쳐링, 위임

이벤트 전파는 다음과 같이 3단계로 구분된다.

1. 캡처링 단계:

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

2. 타깃 단계:

이벤트각 이벤트 타깃에 도달

3. 버블링 단계:

이벤트가 하위 요소에서 상위 요소 방향으로 전파 (자식 요소에서 부모 요소로 전파)
기본적으로 이벤트 버빌링이 일어나고, 이를 막으려면 이벤트 객체에서 stopPropagation 메소드로 전파를 막을 수 있음

 

이벤트 위임

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