jQuery는 이벤트 드리블링(event delegation)을 통해 동적으로 생성되는 요소에 이벤트 핸들러를 쉽게 연결할 수 있습니다. 주로 페이지 초기 로딩이 완료된 후 동적으로 생성되는 DOM 요소에 대한 이벤트를 처리할 때 매우 유용합니다. 이러한 동적 데이터 로딩을 구현하는 방법을 살펴보겠습니다.

이벤트 드리블링이란?

이벤트 드리블링은 이벤트 버블링(event bubbling)을 이용하여 하위 요소에서 상위 요소로 이벤트가 전파되는 동작을 활용한 기법입니다. 이를 통해 상위 요소에서 하위 요소로의 이벤트 핸들러를 등록하지 않고도 동적으로 생성되는 하위 요소에 이벤트를 쉽게 연결할 수 있습니다.

동적 데이터 로딩 예제

다음은 동적으로 생성되는 목록 아이템을 클릭할 때 해당 데이터를 로드하는 간단한 예제 코드입니다.

// Static parent element
$('#item-list').on('click', '.item', function() {
    // Code to load data for clicked item
});

위 예제에서는 #item-list 요소에 대해 click 이벤트를 핸들링하고, 실제 .item 요소에서 이벤트를 받습니다. 이를 통해 동적으로 생성되는 .item 요소에 대해 이벤트를 처리할 수 있습니다.

결과

이러한 이벤트 드리블링을 활용하면 동적으로 생성되는 요소에 대한 이벤트 처리를 간단하게 할 수 있으며, 이를 통해 코드의 유지보수성을 높일 수 있습니다.

이제 jQuery 이벤트 드리블링을 활용하여 동적 데이터 로딩을 구현하는 방법을 이해하셨을 것입니다. 동적 데이터 로딩 시에는 이벤트 드리블링을 적극적으로 활용하여 보다 효율적인 코드를 작성할 수 있습니다.

참고 자료

• jQuery Documentation: Event Delegation