이벤트 버블링

이벤트 버블링(Event Bubbling)은
HTML 요소에서 이벤트가 발생했을 때, 그 이벤트가 해당 요소에서 시작하여, 부모 → 조상 요소까지 전파되는 현상입니다.

왜 이벤트 버블링이 발생하는가? (왜 생겨났는가?)

🔹 이유 1: 트리 구조인 DOM의 자연스러운 전파 모델
DOM은 트리 구조입니다. 이벤트가 루트 방향으로 올라가도록 설계하는 게 논리적입니다.

🔹 이유 2: 이벤트 위임(Event Delegation) 가능
자식 요소마다 리스너를 붙이는 대신, 부모에 하나만 붙이고 자식에서 일어난 이벤트를 감지할 수 있음.

특히 동적으로 생성되는 요소 처리에 매우 유리합니다.

🔹 이유 3: 유연한 이벤트 흐름 제어 가능
필요하면 stopPropagation()으로 중간에 끊을 수 있어, 선택적 제어 가능.

🔹 이유 4: 퍼포먼스와 관리 측면에서 유리
대규모 UI에서는 리스너 수를 줄이고 성능과 메모리를 절약할 수 있음.

단점	설명
❗ 예기치 않은 이벤트 중복 처리	의도치 않게 상위 요소의 이벤트까지 실행될 수 있음
❗ 디버깅 어려움	어떤 요소가 이벤트를 수신했는지 파악이 어려울 수 있음
❗ 의도하지 않은 동작 유발	자식 이벤트 핸들러와 부모 핸들러가 충돌할 수 있음
❗ 보안 리스크	잘못된 위임 구조로 인해 외부 입력이 상위 로직에 영향을 줄 수 있음