이벤트 전파란 무엇인가: 캡처링, 타깃, 버블링을 DOM 예제로 이해하기 빠른 답 이벤트 전파는 상위에서 내려오는 캡처링, 실제 요소에 도달하는 타깃, 다시 상위로 올라가는 버블링 순서로 이해하면 된다. 기본 이벤트 처리 코드는 대부분 버블링 단계에서 동작하며, 캡처링은 addEventListener 옵션으로 명시할 때 주로 사용한다. 전파를 막고 싶을 때는 stopPropagation을, 기본 동작까지 막고 싶을 때는 preventDefault를 구분해서 써야 한다. 여러 자식 요소를 한 번에 다뤄야 할 때는 개별 리스너보다 버블링을 활용한 이벤트 위임이 더 단순하고 유지보수에 유리하다. 목차 흐름으로 보기 이벤트 전파가 필요한 이유 캡처링, 타깃, 버블링은 어떻게 이어지나 addEventListener로 단계와 옵션을 정하는 방법 콘솔로 보는 실제 실행 순서 전파 중단과 기본 동작 중단은 다르다 이벤트 위임으로 전파를 활용하는 방법 디버깅할 때 같이 보면 좋은 값 같이 보면 좋은 레퍼런스 흐름으로 보기 버튼을 눌렀는데 부모의 클릭 핸들러까지 함께 실행되는 장면은 DOM 이벤트 모델을 이해할 때 가장 먼저 마주치는 사례입니다. 브라우저는 이벤트를 한 요소에서만 처리하지 않고 DOM 트리를 따라 이동시키며 다룹니다. 이 이동이 이벤트 전파이고, 위 흐름을 따라 보면 캡처링과 버블링이 왜 필요한지도 함께 보입니다. 이벤트 전파가 필요한 이유 이벤트 전파는 단순히 이벤트가 퍼지는 현상이 아니라, DOM 구조 전체가 상호작용을 나눠 처리하도록 만든 규칙에 가깝습니다. 자식 요소 하나하나에 리스너를 직접 붙이지 않아도 부모가 공통 동작을 맡을 수 있고, 반대로 특정 지점에서 전파를 끊어 의도하지 않은 반응을 막을 수도 있습니다. 이때 함께 기억할 값이 두 가지 있습니다. event.target 은 실제로 이벤트가 시작된 가장 안쪽 요소이고, event.currentTarget 은 지금 실행 중인 리스너가 붙어 있는 요소입니다. 부모 리스너 안에...