자바스크립트 이벤트 위임(Event Delegation)

자바스크립트에서 이벤트 위임(Event Delegation)은 많은 요소들이 동적으로 생성되는 경우 이벤트를 하나의 부모 요소에 등록함으로써 성능을 개선할 수 있는 방법입니다.

 

보통의 경우, 이벤트를 처리하기 위해서는 각 요소에 이벤트 핸들러를 등록해야 합니다. 이는 요소의 개수가 적을 때는 문제가 되지 않지만, 요소의 개수가 많아질수록 메모리 사용량과 이벤트 처리 속도가 느려질 수 있습니다. 하지만 이벤트 위임을 사용하면 부모 요소에 하나의 이벤트 핸들러만 등록하면 되기 때문에 성능 문제를 해결할 수 있습니다.

 

사용법

 

이벤트 위임은 이벤트 버블링(Event Bubbling)을 기반으로 동작합니다. 이벤트 버블링이란 하위 요소에서 발생한 이벤트가 상위 요소로 전파되는 현상을 의미합니다. 예를 들어, 아래와 같은 HTML 코드가 있다고 가정해봅시다.

 

<ul id="list">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

 

이 경우, 각 li 요소에 이벤트 핸들러를 등록하는 대신, ul 요소에 이벤트 핸들러를 등록하고, 클릭된 li 요소를 확인하여 처리할 수 있습니다. 이를 구현한 예제 코드는 다음과 같습니다.

 

const list = document.querySelector('#list');
    list.addEventListener('click', (event) => {
        if (event.target.tagName === 'LI') {
        console.log(`clicked item: ${event.target.textContent}`);
    }
});

 

이 코드는 ul 요소에 클릭 이벤트를 등록하고, 클릭된 요소가 li 요소인 경우에만 처리합니다. 이벤트 객체의 target 프로퍼티를 이용하여 클릭된 요소를 확인할 수 있습니다. 이 방식을 사용하면 li 요소가 추가되거나 삭제되어도 코드를 수정할 필요가 없으므로 유지보수성이 높아집니다.

 

이벤트 위임은 이벤트를 처리하는 로직을 단순화하고, 성능을 개선할 수 있습니다. 하지만 이벤트 버블링이 발생하는 경우, 상위 요소에서 발생한 이벤트가 하위 요소에서도 처리될 가능성이 있으므로 주의해야 합니다. 이를 방지하기 위해서는 event.stopPropagation() 메소드를 사용하여 이벤트 버블링을 중단할 수 있습니다.