이벤트는 어떻게 흐를까?

🧭 이벤트 흐름의 세 단계

자바스크립트에서 이벤트는 아래와 같은 순서로 흐릅니다:
  1. 캡처링 단계: 최상위 요소(document)부터 이벤트 대상 요소까지 내려감
  2. 타깃 단계: 실제 이벤트가 발생한 요소
  3. 버블링 단계: 이벤트가 상위 요소로 다시 올라감

🔍 addEventListener의 세 번째 인자

기본적으로 이벤트는 버블링 단계에서만 처리되지만, `addEventListener`의 세 번째 인자에 `true`를 주면 **캡처링 단계**에서 이벤트를 처리할 수 있습니다. 
// 캡처링 단계에서 이벤트 등록
parent.addEventListener("click", handler, true);

// 버블링 단계에서 이벤트 등록 (기본값)
child.addEventListener("click", handler);

🎯 언제 어떤 단계를 써야 할까?

- 대부분의 경우 버블링 단계만 사용해도 충분함 - 특정 이벤트를 조기에 막고 싶을 때는 캡처링을 활용할 수 있음 - 이벤트 위임(delegate)을 활용하면 버블링은 특히 유용함

💡 이벤트 전파 중단하기

// 전파 막기
event.stopPropagation();

// 기본 동작까지 막기
event.preventDefault();
이벤트가 상위로 전달되지 않도록 하고 싶을 때 `stopPropagation()`을 사용합니다. 단, 이 경우 상위 요소에서 이벤트를 인식하지 못하므로 주의가 필요합니다.