3.3 이벤트 전파와 캡처

1. 이벤트 전파란?

이벤트 전파(Event Propagation)는 웹 브라우저에서 발생한 이벤트가 DOM으로 전파되는 방식입니다. 이벤트가 발생하면 브라우저는 이벤트를 처리하기 위해 이를 두 가지 단계로 전달합니다: 캡처링(Capturing) 단계와 버블링(Bubbling) 단계입니다.

1. 캡처링(Capturing): 이벤트가 최상위 조상으로부터 시작하여 하위 요소로 전달됩니다.
2. 버블링(Bubbling): 이벤트가 발생한 요소에서 시작하여 최상위 조상으로 전파됩니다.

이러한 두 가지 과정은 이벤트를 제어할 수 있는 방법을 제공합니다. 예를 들어, 이벤트 핸들러를 등록할 때 위 두 가지 단계 중 어느 것에서 이벤트를 처리할지를 결정할 수 있습니다.

2. 이벤트 전파 예제

다음 코드는 이벤트 전파를 이해하는 데 도움이 되는 간단한 예제입니다. 클릭 이벤트가 발생한 버튼과 그 부모 요소의 이벤트를 동시에 처리합니다.

HTML

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

CSS

#parent {
    padding: 20px;
    background-color: lightblue;
}

#child {
    padding: 10px;
    background-color: coral;
}

JavaScript

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

// 부모 요소에 클릭 이벤트 핸들러 추가
parent.addEventListener('click', () => {
    console.log('부모 요소 클릭!');
});

// 자식 요소에 클릭 이벤트 핸들러 추가
child.addEventListener('click', (event) => {
    console.log('자식 요소 클릭!');
    // 이벤트 전파 중단
    event.stopPropagation();
});

위 코드를 실행하면, '자식 요소 클릭!'가 먼저 출력되고 그 후 '부모 요소 클릭!'은 출력되지 않습니다. 이는 event.stopPropagation()을 통해 이벤트 캡처링을 중단했기 때문입니다.

3. 실습

이제 앞서 배운 내용을 기반으로 직접 동작하는 ToDo List를 만들어보겠습니다. 이벤트 전파를 활용하여 항목을 삭제하는 기능을 구현합니다.

HTML

<ul id="todo-list">
    <li>할 일 1 <button class="delete">삭제</button></li>
    <li>할 일 2 <button class="delete">삭제</button></li>
</ul>

CSS

#todo-list {
    list-style-type: none;
}

.delete {
    color: red;
    cursor: pointer;
}

JavaScript

const todoList = document.getElementById('todo-list');

todoList.addEventListener('click', (event) => {
    if (event.target.classList.contains('delete')) {
        // 삭제 버튼 클릭 시 해당 항목 삭제
        const listItem = event.target.parentElement;
        listItem.remove();
    }
});

위 코드를 통해 사용자가 삭제 버튼을 클릭하면 해당 ToDo 항목이 삭제됩니다.

4. 응용

이벤트 전파를 활용하여 다음과 같은 기능을 적용해 보세요:

• 탭 메뉴: 각 탭을 클릭 시 해당 내용만 보여주기
• 메뉴 토글: 메뉴 아이콘 클릭 시 메뉴 항목을 보여주고 숨기기

각각의 구현 시 이벤트 전파를 고려하여 코드를 작성해보세요.

5. 정리

이벤트 전파와 캡처는 웹 애플리케이션 내에서 이벤트 흐름을 이해하는 데 중요한 개념입니다. 이를 잘 활용하면 사용자 인터페이스를 보다 더욱 직관적으로 만들 수 있습니다.

실습 과제

1. 다중 목록을 생성하고 각 항목에 삭제 버튼을 추가해보세요.
2. 클릭 시 항목을 삭제하는 기능을 구현해보세요.

응용 문제

1. 이벤트 버블링을 활용하여, 클릭 시 이벤트가 전체 리스트에 전파되는 친구 목록을 만들어보세요.
2. 각 친구 이름 클릭 시 해당 친구 정보를 보여주는 기능을 추가해보세요.