JavaScript 개발자는 웹 애플리케이션에서 이벤트가 처리되는 방식을 관리해야 하는 경우가 많으며, 이 맥락에서 두 가지 중요한 개념은 이벤트 위임과 이벤트 전파입니다. 이러한 개념을 이해하면 코드의 효율성과 유지 관리 가능성이 크게 향상될 수 있습니다. 각각이 무엇이고 어떻게 다른지 살펴보겠습니다.

이벤트 전파

이벤트 전파는 이벤트가 트리거된 후 DOM을 통해 이동하는 방식을 설명합니다. 이벤트 전파에는 세 가지 단계가 있습니다.

1. 캡처 단계: 이벤트는 창에서 시작하여 대상에 도달할 때까지 대상 요소의 조상을 통해 아래로 이동합니다.

2. 대상 단계: 이벤트가 대상 요소에 도달합니다.

3. 버블링 단계: 이벤트가 대상 요소에서 상위 요소를 거쳐 창으로 다시 버블링됩니다.

기본적으로 JavaScript의 대부분 이벤트는 버블링 단계를 사용합니다. 즉, 이벤트가 하위 요소에서 트리거되면 모든 상위 요소에서도 트리거됩니다. 캡처 옵션을 지정하여 캡처 단계에서 이벤트를 처리할 수도 있습니다.

// Capturing phase
element.addEventListener('click', function(event) {
    console.log('Capturing phase:', this);
}, true);

// Bubbling phase (default)
element.addEventListener('click', function(event) {
    console.log('Bubbling phase:', this);
});

이벤트 위임

이벤트 위임은 이벤트 전파를 활용하여 이벤트를 효율적으로 관리합니다. 여러 하위 요소에 이벤트 리스너를 추가하는 대신 상위 요소에 단일 이벤트 리스너를 추가합니다. 이 리스너는 이벤트 버블링을 활용하여 하위 요소에 대한 이벤트를 처리합니다.

이벤트 위임의 장점

1. 성능: 이벤트 리스너 수를 줄여 특히 요소 수가 많은 경우 성능을 향상시킬 수 있습니다.

2. 동적 요소: 각 새 요소에 이벤트 리스너를 연결할 필요가 없으므로 동적으로 추가된 요소에 대한 이벤트 처리를 단순화합니다.

이벤트 위임의 예

각 항목을 클릭할 수 있는 항목 목록을 생각해 보세요. 각 항목에 클릭 이벤트 리스너를 추가하는 대신 상위 컨테이너에 단일 리스너를 추가합니다.

• Item 1
• Item 2
• Item 3

const list = document.getElementById('list');

list.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('Item clicked:', event.target.textContent);
    }
});

이 예에서 모든 li 요소의 클릭 이벤트는 이벤트를 처리하는 ul 요소까지 버블링됩니다.

주요 차이점

1. 이벤트 전파는 이벤트가 DOM을 통해 이동하는 방식(캡처 및 버블링)에 관한 것입니다.

2. 이벤트 위임은 이벤트 전파를 활용하여 단일 상위 리스너를 사용하여 여러 하위 요소의 이벤트를 효율적으로 처리하는 기술입니다.

사용 사례

이벤트 전파를 사용하는 경우

• 캡처 또는 버블링 단계에서 다른 작업을 수행해야 하는 경우.
• 이벤트 흐름을 보다 정밀하게 관리하고 싶을 때.

이벤트 위임을 사용하는 경우

• 동일한 이벤트 처리가 필요한 하위 요소가 많은 경우.

• 리스너를 다시 연결하지 않고 동적으로 추가된 요소에 대한 이벤트를 처리해야 하는 경우.

결론

이벤트 전파와 이벤트 위임은 모두 JavaScript 코드를 보다 효율적이고 관리하기 쉽게 만들 수 있는 강력한 개념입니다. 특히 이벤트 위임은 이벤트 리스너 수를 크게 줄여 성능을 향상시키고 동적 요소에 대한 이벤트 처리를 단순화할 수 있습니다. 이러한 개념을 언제, 어떻게 사용하는지 이해하면 더욱 능숙한 JavaScript 개발자가 될 수 있습니다.