# 이벤트 위임(Event Delegation) 완전 이해하기

DOM에서 요소를 클릭할 때 실행되는 이벤트는 **자식 → 부모로 전파(버블링)**됩니다.
이 특성을 이용해서, “여러 자식 요소마다 이벤트를 붙이지 않고 부모 하나에 이벤트를 맡기는 방식”을 **이벤트 위임(Event Delegation)**이라고 합니다.

---

1. 기존 방식: 요소마다 이벤트 직접 등록

deleteBtn.addEventListener("click", function(){
    newDiv.remove();
})

✔ 동작 방식

• 카드 1개 생성 → 삭제 버튼 1개 → 이벤트 핸들러 1개
• 카드 100개 생성 → 삭제 버튼 100개 → 이벤트 핸들러 100개

즉, 요소 개수만큼 이벤트가 증가한다.

 

이 방식의 문제점:

• 카드 100개면 이벤트 핸들러도 100개 생김
• 성능 떨어지고 관리가 복잡해짐
• 동적으로 추가된 요소는 처음엔 이벤트가 안 붙어있음

그래서 이벤트 위임을 사용하면 더 효율적인 방식으로 변경 할 수 있음 

---

2. 이벤트 위임 방식: 부모에 이벤트 한 번만 등록

삭제 버튼 클릭 이벤트를 삭제 버튼에 붙이지 않고
부모 요소(cards) 하나에만 이벤트를 등록한다.

cards.addEventListener("click", function(e){
    if (e.target.classList.contains("delete-btn")) {
        e.target.parentElement.remove();
    }
});

✔ 동작 방식

• 클릭된 요소가 .delete-btn인지 체크
• 맞으면 해당 카드 삭제
• 삭제 버튼이 10개든 100개든 이벤트 핸들러는 단 하나

장점:

• 성능 좋음 (핸들러 1개)
• 동적으로 추가된 요소도 자동 적용
• 코드가 단순해지고 유지보수 편함

---

3. 실제 적용 포인트

• 리스트나 테이블처럼 반복되는 요소가 많을 때 필수
• 버튼, 메뉴, 아이템 삭제/토글 등에 매우 효과적
• SPA, 동적 UI에서 거의 기본 패턴으로 사용됨

 

특히 Vue/React 같은 프레임워크가 나오기 전부터
jQuery 시절에도 기본적인 성능 최적화 방식으로 널리 사용되던 패턴이다.

---

마무리 정리

이벤트 위임을 한 문장으로 정리하면:

“동적으로 변하는 UI를 효율적으로 제어하기 위해, 이벤트를 부모에게 한 번만 맡기는 방식”