이벤트 전파와 버블링 이해하기 DOM 이벤트 흐름 완벽 가이드

🔗 DOM 이벤트 전파란 무엇인가?

DOM 이벤트 전파(Event Propagation)는 브라우저에서 발생한 이벤트가 어떤 순서와 경로를 거쳐 전달되는지를 설명하는 개념입니다.
이 과정을 이해하면 이벤트를 더 효율적으로 제어할 수 있으며, 특히 복잡한 UI를 다룰 때 불필요한 이벤트 중복을 줄일 수 있습니다.
DOM 이벤트 흐름은 크게 캡처링(Capturing) → 타깃(Target) → 버블링(Bubbling)이라는 3단계를 거칩니다.

처음에는 문서의 최상위 객체인 window와 document에서 이벤트가 시작되어 점점 하위 요소로 내려가며 타깃 요소를 찾아갑니다.
그 후 타깃 요소에서 실제 이벤트 핸들러가 실행되고, 마지막에는 다시 상위 요소로 이벤트가 되돌아가면서 전파가 완료됩니다.
이처럼 이벤트는 단방향으로만 흘러가는 것이 아니라, 내려갔다가 다시 올라오는 구조를 가지고 있기 때문에 개발자는 각 단계에서 이벤트를 가로채거나 중단할 수 있습니다.

📌 이벤트 전파 단계 요약

• ⬇️캡처링 단계 : 상위 요소에서 하위 요소로 이벤트가 내려가는 과정
• 🎯타깃 단계 : 이벤트가 실제로 발생한 요소에서 실행되는 과정
• ⬆️버블링 단계 : 타깃 요소에서 다시 상위 요소로 이벤트가 전파되는 과정

자바스크립트에서 이벤트 리스너를 등록할 때, addEventListener 메서드의 세 번째 매개변수로 true를 지정하면 캡처링 단계에서 이벤트를 감지할 수 있고, 생략하거나 false로 설정하면 기본적으로 버블링 단계에서 이벤트를 감지합니다.
이처럼 각 단계는 이벤트 제어 전략에 큰 영향을 미치기 때문에, 상황에 맞게 선택하는 것이 중요합니다.

🛠️ 캡처링 단계에서 일어나는 일

캡처링(Capturing) 단계는 이벤트 전파의 첫 번째 과정으로, 이벤트가 최상위 요소에서 시작해 점점 하위 요소로 내려가면서 타깃을 찾아가는 흐름을 의미합니다.
즉, window → document → html → body → … → target 순서로 이벤트가 이동합니다.
이 과정에서 특정 요소에 이벤트 리스너가 등록되어 있다면, 캡처링 단계에서도 이벤트를 감지할 수 있습니다.

기본적으로 자바스크립트의 addEventListener는 버블링 단계에서 이벤트를 감지합니다.
하지만 세 번째 매개변수를 true로 설정하면 캡처링 단계에서 이벤트를 감지하게 됩니다.
이는 이벤트를 보다 앞선 흐름에서 제어하고 싶을 때 유용하게 사용됩니다.

📌 캡처링 단계 활용 사례

예를 들어, 여러 겹의 중첩 요소에서 동일한 이벤트를 처리해야 하는 경우 캡처링 단계에서 먼저 가로채 특정 동작을 막을 수 있습니다.
또한, 보안이나 성능을 고려해 이벤트가 타깃 요소까지 도달하기 전에 제어하고자 할 때도 쓰입니다.

// 캡처링 단계에서 이벤트 감지하기
document.querySelector(".outer").addEventListener("click", function() {
    console.log("캡처링 단계에서 감지됨");
}, true);

위 코드처럼 매개변수에 true를 지정하면, 클릭 이벤트가 실제 타깃에 도달하기 전에 상위 요소에서 이벤트를 처리할 수 있습니다.
이 방식은 드물게 사용되지만, 이벤트 전파를 정교하게 제어해야 할 때 큰 도움이 됩니다.

⚙️ 타깃 단계와 이벤트 버블링

이벤트가 최종적으로 도달하는 지점은 바로 타깃(Target) 단계입니다.
이 단계에서는 이벤트가 실제 발생한 요소에서 실행되며, 해당 요소에 직접 등록된 이벤트 핸들러가 실행됩니다.
즉, 사용자가 버튼을 클릭하면 버튼 요소 자체가 타깃이 되어 핸들러가 동작하는 것이죠.

타깃 단계 이후에는 버블링(Bubbling) 단계가 이어집니다.
버블링이란 이벤트가 타깃 요소에서 다시 상위 요소로 전달되는 과정을 말합니다.
이 덕분에 상위 컨테이너에 이벤트 리스너를 붙여두면 하위 요소들의 이벤트도 한 번에 처리할 수 있습니다.

📌 이벤트 버블링의 장점

• ✅상위 요소 하나로 여러 하위 요소의 이벤트를 효율적으로 관리할 수 있습니다.
• ✅동적으로 추가된 요소에도 이벤트 처리가 가능해 유연성이 높습니다.
• ✅코드 중복을 줄이고 메모리 사용량을 최소화할 수 있습니다.

📌 버블링 중단하기

때로는 이벤트가 상위 요소로 전달되는 것을 막아야 할 때도 있습니다.
이 경우 event.stopPropagation()을 사용하면 버블링을 중단시킬 수 있습니다.

// 버블링 중단 예시
document.querySelector(".button").addEventListener("click", function(event) {
    event.stopPropagation();
    console.log("버블링이 여기서 멈춥니다");
});

이처럼 이벤트 버블링은 매우 강력한 기능이지만, 필요할 때는 적절히 제어하지 않으면 예기치 못한 동작을 유발할 수도 있습니다.
따라서 상황에 맞게 적절히 활용하고 제어하는 습관이 중요합니다.

🔌 이벤트 위임 기법의 활용

이벤트 위임(Event Delegation)은 이벤트 버블링을 활용해, 다수의 하위 요소에 각각 이벤트 리스너를 붙이는 대신 상위 요소 하나에만 등록하는 기법입니다.
예를 들어 수십 개의 버튼이나 리스트 아이템이 있을 때, 각각에 핸들러를 추가하면 메모리 낭비와 성능 저하가 발생합니다.
하지만 부모 요소에 단 하나의 리스너를 등록하면 하위 요소의 이벤트를 한 번에 관리할 수 있어 훨씬 효율적입니다.

이 기법은 동적으로 요소가 추가되는 상황에서도 강력한 효과를 발휘합니다.
나중에 생성된 요소라도 부모 요소를 통해 이벤트를 감지할 수 있기 때문에, SPA(Single Page Application) 환경이나 Ajax 요청으로 데이터를 렌더링할 때 특히 유용합니다.

📌 이벤트 위임 예제

// 이벤트 위임을 활용한 예제
document.querySelector(".list").addEventListener("click", function(event) {
    if(event.target && event.target.matches("li.item")) {
        console.log("리스트 아이템 클릭됨:", event.target.textContent);
    }
});

위 예제에서 .list라는 부모 요소에 이벤트 리스너를 등록했습니다.
사용자가 특정 li.item을 클릭하면, 이벤트 버블링을 통해 부모 요소에서 해당 이벤트를 감지하고 조건문을 통해 원하는 요소만 처리하게 됩니다.

이벤트 위임은 성능 최적화와 코드 간결성을 동시에 챙길 수 있는 기법으로, 규모가 커질수록 그 효과가 커집니다.
따라서 복잡한 DOM 구조를 다루는 프론트엔드 개발자라면 반드시 익혀두어야 할 필수 개념입니다.

💡 실무에서 자주 쓰이는 이벤트 관리 패턴

실무에서는 다양한 상황에 맞게 이벤트 전파를 제어하고 관리해야 합니다.
특히 대규모 프로젝트에서는 성능 문제와 유지보수성까지 고려해야 하기 때문에, 몇 가지 대표적인 패턴이 널리 활용됩니다.
아래에서는 자주 사용되는 이벤트 관리 패턴들을 정리해 보겠습니다.

📌 이벤트 핸들러 최소화

모든 요소에 개별적으로 핸들러를 붙이는 것은 바람직하지 않습니다.
가능한 경우 상위 요소에 리스너를 등록하고, 하위 요소의 이벤트를 버블링을 통해 처리하는 것이 효율적입니다.
이렇게 하면 메모리 사용량을 줄이고, 코드 관리도 훨씬 쉬워집니다.

📌 기본 동작 제어하기

폼 제출이나 링크 클릭과 같은 일부 이벤트는 브라우저가 기본 동작을 가지고 있습니다.
이때 event.preventDefault()를 사용하면 해당 동작을 막을 수 있습니다.
예를 들어 Ajax를 활용해 데이터를 전송할 때, 폼의 기본 제출을 차단하는 경우가 대표적입니다.

📌 위임과 조건부 처리

이벤트 위임을 사용할 때는 모든 하위 요소를 무조건 처리하는 것이 아니라, 조건문을 통해 특정 요소만 동작하도록 제어하는 것이 중요합니다.
예를 들어 여러 버튼 중에서 특정 클래스나 데이터 속성을 가진 버튼만 처리하게 만들면, 코드 안정성이 크게 올라갑니다.

이처럼 이벤트 관리 패턴을 적절히 조합하면 코드의 품질과 성능이 크게 향상됩니다.
특히 유지보수가 잦은 프로젝트일수록 이러한 패턴을 습관처럼 적용하는 것이 장기적으로 큰 도움이 됩니다.

❓ 자주 묻는 질문 (FAQ)