다수의 요소에 이벤트를 효율적으로 관리하기 위한 전략인 이벤트 위임(Event Delegation)에 대해 정리했다.
jQuery를 활용한 이벤트 관리 기법을 분석했다.
부모 요소 기반 이벤트 제어
이벤트 위임은 자식 요소의 이벤트를 부모 요소에서 통합 처리하는 방식이다.
부모 요소에 리스너를 등록하여 내부 자식 요소의 사건을 감지한다.
// 1. 이벤트 위임: 부모(#item-list)가 자식(.delete-btn)의 이벤트를 감시
$('#item-list').on('click', '.delete-btn', function() {
// 대상 요소 탐색 및 삭제 처리
$(this).closest('li').fadeOut(300, function() {
$(this).remove();
});
});
// 2. 동적 요소 대응: 추가된 요소에도 이벤트가 자동 적용됨
$('#add-btn').on('click', function() {
$('#item-list').append('<li>새 항목 <button class="delete-btn">삭제</button></li>');
});
이벤트 위임의 장점
- 동적 요소 지원: 페이지 로드 후 추가된 요소에도 이벤트가 즉시 적용된다.
- 자원 효율성: 개별 요소마다 리스너를 등록하지 않아 메모리 사용량을 절감한다.
- 코드 관리 용이: 이벤트 등록 지점이 통합되어 유지보수가 편리하다.
버블링 메커니즘 활용
이벤트 위임은 하위 요소에서 발생한 이벤트가 상위로 전달되는 ‘이벤트 버블링’ 특성을 활용한 설계이다.
시스템 자원을 절약하고 변화에 유연하게 대응하는 효율적인 코드 작성 방식인 것 같다.
