기본적으로 addEventListener(fn)은 버블링 단계에서만
동작합니다. 켜면 3개 박스 모두에 addEventListener(fn, true) 캡처 리스너가 추가됩니다.
⚠️ 캡처링 리스너가 꺼져 있어 이 설정은 효과가 없습니다. 먼저 위 토글을 켜세요.
⚡ 이벤트 전파 3단계
① 캡처링 — window → outer → middle
↓
② 타깃 — inner (target 단계)
↓
③ 버블링 — middle → outer → window
브라우저는 클릭 지점까지 위→아래로 내려가며(캡처링) 먼저 훑고,
타깃에 도달한 뒤 다시 아래→위로 올라오며(버블링) 조상 요소들에게
알립니다. stopPropagation()은 이 경로를 그 자리에서 끊어버립니다.
🗂️ 이벤트 위임 (Event Delegation)
항목 1 li#1
항목 2 li#2
항목 3 li#3
리스너는 <ul> 부모 단 하나에만 달려 있습니다.
새로 추가한 항목도 e.target.closest('li')로 버블링을 타고 올라온 이벤트를 잡아내기 때문에
바로 클릭됩니다 — 자식마다 리스너를 달 필요가 없습니다.
🐍 JS 코드 예시 event.js
// 캡처링 리스너 (3번째 인자 true)
outer.addEventListener('click', handler, true);
// 버블링 리스너 (기본값)
outer.addEventListener('click', handler);
// 전파 중단
middle.addEventListener('click', e => {
e.stopPropagation(); // 상위/하위 전파만 중단
});
// 이벤트 위임 — 부모 하나로 자식 전부 처리
list.addEventListener('click', e => {
const li = e.target.closest('li');
if (li) console.log(li.dataset.id, '클릭됨');
});