DOM 이벤트는 단순히 타겟 요소에서만 발생하지 않습니다. 이벤트는 캡쳐링 → 타겟 → 버블링 3단계를 거쳐 전파됩니다.
사용자가 버튼을 클릭하면, 이벤트는 먼저 window에서 시작해 타겟까지 내려갑니다 (캡쳐링). 타겟에 도달한 후, 다시 window까지 올라갑니다 (버블링).
중첩된 요소를 클릭하면 이벤트가 어떻게 전파되는지 실시간으로 확인할 수 있습니다.
실제 코드로 동작 원리를 확인하세요.
// 버블링 (기본) — 타겟 → window 순서
document.querySelector('.parent')
.addEventListener('click', (e) => {
console.log('버블링:', e.currentTarget);
});
// 캡쳐링 — window → 타겟 순서
document.querySelector('.parent')
.addEventListener('click', (e) => {
console.log('캡쳐링:', e.currentTarget);
}, { capture: true }); // 또는 세 번째 인자에 trueaddEventListener의 세 번째 인자에 true 또는 { capture: true }를 전달하면 캡쳐링 단계에서 이벤트를 처리할 수 있습니다.stopPropagation()은 이벤트의 전파를 중단합니다. 현재 요소에서 이벤트 처리 후 부모/자식 요소로 더 이상 전파되지 않습니다.preventDefault()는 이벤트의 기본 동작을 취소합니다. 예를 들어 링크 클릭 시 페이지 이동, 폼 제출 시 새로고침 등을 막습니다. 이벤트 전파는 그대로 진행됩니다.event.target으로 실제 클릭된 요소를 판별합니다.