자바스크립트 이벤트 버블링(Event Bubbling)

자바스크립트에서 이벤트 버블링은 DOM 트리의 자식 요소에서 부모 요소로 이벤트가 전파되는 것을 말합니다. 즉, 이벤트가 발생한 요소에서 시작해 상위 요소로 계속해서 이벤트가 전파됩니다. 이벤트 버블링은 이벤트가 전파되면서 상위 요소의 이벤트 핸들러가 자동으로 호출되어 처리될 수 있다는 장점이 있습니다.

 

사용법

 

예를 들어, 아래와 같은 HTML 코드가 있다고 가정해봅시다.

 

<div class="outer">
    <div class="inner">
    	<button>Click me</button>
    </div>
</div>

 

이 때, 버튼을 클릭했을 때 발생하는 클릭 이벤트는 버튼에서 시작하여 inner 요소, 그리고 outer 요소까지 이벤트가 전파됩니다. 이벤트가 전파되면서 각 요소에 등록된 이벤트 핸들러가 자동으로 호출되어 처리됩니다.

 

이벤트 버블링을 이용하면 여러 요소에서 동일한 이벤트를 처리해야 하는 경우, 상위 요소에서 이벤트 핸들러를 등록하여 각 요소에서 일일이 이벤트 핸들러를 등록하지 않아도 되는 장점이 있습니다. 또한, 이벤트 버블링을 이용하면 동적으로 생성된 요소에도 이벤트 핸들러를 등록할 수 있습니다.

 

하지만, 이벤트 버블링은 예기치 않은 상위 요소의 이벤트 핸들러가 호출될 수 있기 때문에, 이벤트 전파를 막는 stopPropagation() 메소드를 이용하여 원치 않는 이벤트 버블링을 방지할 수 있습니다.

 

document.querySelector('.inner').addEventListener('click', function(event) {
    console.log('inner clicked');
    event.stopPropagation(); // 이벤트 전파 중지
});

document.querySelector('.outer').addEventListener('click', function(event) {
    console.log('outer clicked');
});

 

위 코드에서는 inner 요소의 클릭 이벤트 핸들러에서 stopPropagation() 메소드를 호출하여 이벤트 전파를 중지시킵니다. 따라서 버튼을 클릭했을 때 이벤트는 inner 요소에서만 처리되고, outer 요소에서는 처리되지 않습니다.