🤔❓ 왜 굳이 부모를 확인했을까? (e.target vs closest)

🧾 버블링 + 이벤트 위임 관련 정리

❓ 의문이였던 점

• 쇼핑몰 장바구니 UI에서 전체 .cart에 클릭 이벤트 걸었음.
• 각 아이템의 삭제 버튼은 element.classList.contains('삭제버튼')으로 체크해서 삭제 동작 처리.
• 그런데 수량 올리는 버튼은 element.parentElement.classList.contains('increase-btn') 또는 비슷한 방식으로 부모를 체크해서 처리하심.
• 질문: e.target으로 클릭한 요소는 다 잡히는 거 아닌가? 그 안에 내가 원하는 클래스가 있으면 그걸로 체크하면 되는 거 아닌가?
  element.classList.contains('수량증가버튼')이렇게 해도 되는거 아닌가..?
  → 왜 굳이 부모 요소를 쓰는 건지 궁금했다..
  

---

✅ 핵심 개념 정리

🔁 이벤트 버블링

• 클릭 이벤트는 가장 안쪽 요소(자식) 에서 시작해서 밖으로(부모) 퍼져나감.
• e.target은 실제 클릭한 요소 그 자체 (가장 안쪽 요소)
• e.currentTarget은 이벤트 리스너를 단 요소 (예: .cart)

💡 문제의 원인

• 수량 버튼 <button class="increase-btn"> 안에 <img>나 <i> 같은 요소가 있음.

• 사용자가 <i>를 클릭하면:

  • e.target → <i>
  • <i>는 "increase-btn" 클래스를 안 가짐 → classList.contains('increase-btn') → false

✅ 해결 방법: closest() - 이건 내가 생각했던데로 반영시켜주는 함수!

• e.target.closest('.increase-btn') 사용하면

  • 클릭한 요소부터 위로 올라가며 "increase-btn" 클래스를 가진 가장 가까운 조상 찾음
  • 클릭한 곳이 <img>든 <button>이든 전부 커버 가능
  • 못 찾으면 null 반환 → 조건 체크하기 쉬움

---

💻 내가 생각했던대로 하려면 contains대신 closest 사용..!

document.querySelector('.cart').addEventListener('click', (e) => {
  const increaseButton = e.target.closest('.increase-btn');
  if (increaseButton) {
    console.log('수량 증가!');
    // 수량 늘리는 코드
  }

  const deleteButton = e.target.closest('.delete-btn');
  if (deleteButton) {
    console.log('아이템 삭제!');
    // 삭제 코드
  }
});

---

✍️ 정리

개념	설명
e.target	실제 클릭된 요소 (예: <i>)
e.currentTarget	이벤트 리스너 단 부모 요소 (예: .cart)
.classList.contains()	해당 요소가 클래스 가지고 있는지 검사
.closest('.클래스')	클릭된 요소부터 위로 올라가면서 클래스 가진 부모 요소 찾기
✅ 이유	버튼 안의 아이콘 등 클릭 시도해도, 정확히 버튼을 감지해야 하니까