[javascript] 이벤트 위임 패턴
목차
이벤트 위임이란?
이벤트 위임(Event Delegation)은 애플리케이션에서 발생하는 이벤트를 처리하기 위해 부모 요소가 자식 요소의 이벤트를 처리하는 디자인 패턴을 의미합니다.
이벤트 위임을 사용하는 이유
이벤트 위임을 사용하면 동적으로 생성되는 요소들에 대해서도 이벤트 핸들러를 등록할 수 있고, 메모리 사용을 줄일 수 있습니다. 또한, 각 요소에 개별적인 이벤트 핸들러를 설정하는 것보다 코드가 더 간결해지고 유지보수성이 높아집니다.
이벤트 위임의 예시
예를 들어, 쇼핑몰 웹 애플리케이션에서 각 상품의 장바구니 버튼에 이벤트 핸들러를 등록하는 대신, 전체 상품 목록을 감싸고 있는 상위 요소에 이벤트를 위임하여 한 번의 핸들링으로 여러 상품에 대한 장바구니 이벤트를 처리할 수 있습니다.
이벤트 위임 구현 방법
// 상위 요소에 이벤트 핸들러 등록
document.getElementById('product-list').addEventListener('click', function(event) {
if (event.target && event.target.matches('.add-to-cart')) {
// 이벤트가 발생한 요소가 add-to-cart 클래스를 가지고 있는 경우 처리
addToCart(event.target.dataset.productId);
}
});
이렇게 상위 요소에 이벤트 핸들러를 등록하여, event.target을 통해 실제 이벤트가 발생한 자식 요소를 식별하고 처리할 수 있습니다.
이제 이벤트 위임 패턴을 사용하여 DOM 이벤트 처리를 보다 간단하고 효율적으로 구현할 수 있게 되었습니다. 이 패턴을 활용하여 웹 애플리케이션의 성능을 향상시키고 유지보수성을 높일 수 있습니다.