Javascript: Event Bubbling

Event Bubbling

이벤트 버블링은 웹 개발에서 DOM 이벤트가 발생했을 때, 그 이벤트가 부모 요소로 전파되는 방식을 설명하는 개념이다. 기본적으로 자식 요소에서 발생한 이벤트는 가장 먼저 해당 요소에서 처리되고, 이후에 그 이벤트가 부모 요소로 전파되어 부모 요소에서도 처리될 수 있다. 이 과정은 DOM 트리의 상단으로 올라가면서 계속 이어진다.

이벤트 버블링의 동작 방식

1. 이벤트 발생: 자식 요소에서 특정 이벤트가 발생한다.
2. 자식 요소에서의 처리: 이벤트가 해당 자식 요소에서 먼저 처리된다.
3. 부모 요소로 전파: 이벤트는 부모 요소로 전파되어, 각 부모 요소에서 등록된 이벤트 핸들러가 실행될 수 있다.
4. 상위 요소까지 전파: 이 과정은 최상위 요소인 document까지 계속된다.

예시

<div id="parent">
    <button id="child">Click me</button>
</div>

이때, 버튼을 클릭하면 다음과 같은 순서로 이벤트가 처리된다.

1. 버튼에서 클릭 이벤트가 발생한다.
2. 버튼의 클릭 이벤트 핸들러가 실행된다.
3. 그 후, 부모 div의 클릭 이벤트 핸들러가 실행된다.
4. 마지막으로, document의 클릭 이벤트 핸들러가 실행된다.

이벤트 버블링 활용

이벤트 버블링은 다음과 같은 상황에서 유용하게 사용될 수 있다.

• 이벤트 위임: 부모 요소에서 이벤트 핸들러를 추가하고, 자식 요소의 이벤트를 처리하는 방식으로 성능을 개선할 수 있다.

예시

HTML 구조

<div id="parent">
    <button class="child">Button 1</button>
    <button class="child">Button 2</button>
    <button class="child">Button 3</button>
</div>

Javascript 코드

// 부모 요소를 선택
const parent = document.getElementById('parent');

// 부모 요소에 클릭 이벤트 핸들러 추가
parent.addEventListener('click', function(event) {
    // 클릭된 요소가 자식 버튼인지 확인
    if (event.target.classList.contains('child')) {
        console.log('Child button clicked:', event.target.textContent);
    }
});

예시 설명

1. HTML 구조: 세 개의 버튼이 포함된 div 요소가 있다. 각 버튼은 클래스 child를 가지고 있다.
2. 이벤트 핸들러 등록: 부모 요소인 #parent에 클릭 이벤트 핸들러를 추가한다.
3. 이벤트 타겟 확인: 이벤트 핸들러 내에서 event.target을 사용하여 클릭된 요소를 확인한다. 클릭된 요소가 child 클래스를 가지고 있다면, 해당 버튼이 클릭되었다는 메시지를 콘솔에 출력한다.

• 구조적 관리: 복잡한 DOM 구조에서 이벤트 관리를 간소화할 수 있다.

이벤트 버블링 중지

이벤트 전파를 중단하려면 event.stopPropagation() 메서드를 사용하여 부모 요소로의 전파를 막을 수 있다.