이벤트 시스템 심화 — 캡처링, 버블링, 그리고 이벤트 위임의 원리

① 캡처링(Capturing)    document → html → body → ... → 타깃의 부모
② 타깃(Target)          실제 이벤트가 발생한 요소
③ 버블링(Bubbling)      타깃의 부모 → ... → body → html → document

// 버블링 단계에서 실행 (기본값)
element.addEventListener('click', handler);
element.addEventListener('click', handler, false);

// 캡처링 단계에서 실행
element.addEventListener('click', handler, true);
element.addEventListener('click', handler, { capture: true });

<div id="outer">
  <div id="inner">
    <button id="btn">클릭</button>
  </div>
</div>

const outer = document.getElementById('outer');
const inner = document.getElementById('inner');
const btn = document.getElementById('btn');

// 캡처링 단계 리스너
outer.addEventListener('click', () => console.log('outer 캡처'), true);
inner.addEventListener('click', () => console.log('inner 캡처'), true);

// 버블링 단계 리스너
btn.addEventListener('click', () => console.log('btn 타깃'));
inner.addEventListener('click', () => console.log('inner 버블'));
outer.addEventListener('click', () => console.log('outer 버블'));

outer 캡처    ← ① 캡처링: 위에서 아래로
inner 캡처    ← ① 캡처링
btn 타깃      ← ② 타깃
inner 버블    ← ③ 버블링: 아래에서 위로
outer 버블    ← ③ 버블링

document.getElementById('outer').addEventListener('click', (e) => {
  console.log('target:', e.target.id);         // 실제 클릭된 요소
  console.log('currentTarget:', e.currentTarget.id); // 항상 "outer"
});

btn.addEventListener('click', (e) => {
  e.stopPropagation();
  console.log('첫 번째 리스너'); // 실행됨
});

btn.addEventListener('click', () => {
  console.log('두 번째 리스너'); // 이것도 실행됨
});

// 부모의 리스너는 실행되지 않음
inner.addEventListener('click', () => {
  console.log('inner'); // 실행 안 됨
});

btn.addEventListener('click', (e) => {
  e.stopImmediatePropagation();
  console.log('첫 번째 리스너'); // 실행됨
});

btn.addEventListener('click', () => {
  console.log('두 번째 리스너'); // 실행 안 됨!
});

<ul id="todo-list">
  <li data-id="1">할 일 1 <button class="delete-btn">삭제</button></li>
  <li data-id="2">할 일 2 <button class="delete-btn">삭제</button></li>
  <li data-id="3">할 일 3 <button class="delete-btn">삭제</button></li>
</ul>

const todoList = document.getElementById('todo-list');

todoList.addEventListener('click', (e) => {
  // 클릭된 요소가 삭제 버튼이거나, 삭제 버튼의 자식인지 확인
  const deleteBtn = e.target.closest('.delete-btn');
  if (!deleteBtn) return;

  // 가장 가까운 li에서 데이터 추출
  const li = deleteBtn.closest('li');
  const id = li.dataset.id;
  console.log(`할 일 ${id} 삭제`);

  li.remove();
});

// 새 할 일 추가 — 별도 리스너 등록 불필요
const newLi = document.createElement('li');
newLi.dataset.id = '4';
newLi.innerHTML = '할 일 4 <button class="delete-btn">삭제</button>';
todoList.appendChild(newLi);
// 삭제 버튼 클릭 시 위의 리스너가 자동으로 처리

// 나쁜 예: 브라우저가 스크롤을 기다려야 함
window.addEventListener('scroll', (e) => {
  // 무거운 작업...
});

// 좋은 예: preventDefault를 안 쓸 거라고 명시
window.addEventListener('scroll', (e) => {
  // 무거운 작업...
}, { passive: true });

// 커스텀 이벤트 발생
const cartEvent = new CustomEvent('item:added', {
  detail: { id: 42, name: '키보드', price: 89000 },
  bubbles: true, // 버블링 허용 (기본값 false)
});

document.getElementById('product').dispatchEvent(cartEvent);

// 상위 요소에서 수신
document.addEventListener('item:added', (e) => {
  console.log('장바구니 추가:', e.detail.name); // "키보드"
  console.log('가격:', e.detail.price);          // 89000
});

const controller = new AbortController();
const { signal } = controller;

// 여러 리스너를 같은 signal로 등록
window.addEventListener('resize', handleResize, { signal });
document.addEventListener('click', handleClick, { signal });
document.addEventListener('keydown', handleKeydown, { signal });
document.addEventListener('scroll', handleScroll, { signal, passive: true });

// 정리할 때 — 한 줄이면 끝
controller.abort();
// 위에서 등록한 네 개의 리스너가 전부 해제됨

element.addEventListener('click', handler, {
  once: true,    // 한 번 실행 후 자동 해제
  signal,        // abort 시에도 해제 가능
});