[JavaScript] 자바스크립트 이벤트 버블링 이해하기

이벤트란

이벤트는 사용자의 행동이나 브라우저의 상태 변화를 의미합니다. 버튼 클릭, 마우스 이동, 키보드 입력 등이 대표적인 이벤트입니다. 자바스크립트에서는 이러한 이벤트를 감지하고 처리하기 위해 이벤트 리스너를 활용합니다.

이벤트 전파란

이벤트 전파는 이벤트가 DOM 트리에서 전달되는 방식을 말합니다.크게 두 가지 단계로 나눌 수 있습니다:

• 캡처링 단계 (Capturing Phase): 이벤트가 최상위 요소에서 아래 요소로 내려갑니다.
• 버블링 단계 (Bubbling Phase): 이벤트가 아래 요소에서 최상위 요소로 올라갑니다.

주로 우리가 다루는 것은 버블링 단계입니다.

이벤트 버블링이란

이벤트 버블링은 특정 요소에서 발생한 이벤트가 부모 요소로 차례대로 전파되는 현상입니다. 예를들어, 버튼을 클릭하면 해당 이벤트가 버튼부터 시작해 부모, 부모에 부모 요소로 순차적으로 전달됩니다.

예시 코드:

<div id="parent">  
    <button id="child">Click Me!</button>  
</div>  

<script>  
document.getElementById("parent").addEventListener("click", function() {  
    alert("부모 요소 클릭");  
});  

document.getElementById("child").addEventListener("click", function() {  
    alert("자식 요소 클릭");  
});  
</script>  

이 코드를 실행하면 버튼 클릭 시 "자식 요소 클릭"와 "부모 요소 클릭" 알림이 순서대로 나타납니다. 이는 이벤트가 자식에서 부모로 버블링되기 때문입니다.

이벤트 버블링의 활용

이벤트 버블링은 다음과 같은 상황에서 유용합니다:

• 이벤트 위임: 여러 자식 요소에 개별 이벤트 리스너를 추가하는 대신, 부모 요소에 단일 리스너를 추가해 성능을 최적화할 수 있습니다.
• 동적 요소 처리: 동적으로 생성된 요소에도 쉽게 이벤트를 적용할 수 있습니다.

이벤트 버블링 방지하기

때로는 이벤트 버블링을 중단해야 할 때가 있습니다. 이때는 `event.stopPropagation()` 메서드를 사용합니다.

document.getElementById("child").addEventListener("click", function(event) {  
    alert("자식 요가 클릭");  
    event.stopPropagation(); // 버블링 중단  
});  

이 코드에서는 버튼 클릭 시 부모 요소의 이벤트 리스너가 호출되지 않습니다.