[jQuery] jQuery 이벤트 드리블링의 실제 웹 개발에서의 활용 예시

26 Dec 2023

jQuery에서 이벤트 드리블링은 여러 요소에 같은 이벤트 핸들러를 적용할 수 있는 강력한 메커니즘입니다. 이를 통해 반복적인 코드를 줄이고 유지보수성을 높일 수 있습니다. 다음은 실제 웹 개발에서 jQuery 이벤트 드리블링을 활용하는 몇 가지 예시입니다.

이벤트 드리블링의 개념

이벤트 드리블링은 이벤트 버블링을 활용하여 상위 요소에 이벤트 핸들러를 등록함으로써 하위 요소들의 이벤트도 처리할 수 있는 방법입니다. 이를 통해 동적으로 생성된 요소나 많은 수의 요소에 대해 각각 이벤트를 등록하는 번거로움을 줄일 수 있습니다.

$('body').on('click', '.dynamic-element', function() {
  // 동적으로 생성된 요소에 클릭 이벤트 핸들러 적용
});

위 예시에서는 body 요소를 통해 .dynamic-element에 속한 모든 동적 요소에 클릭 이벤트를 적용하고 있습니다. 이를 통해 새로운 요소가 동적으로 추가되더라도 별도의 이벤트 등록 없이 바로 동작하게 됩니다.

<ul id="todo-list">
  <li>할 일 1</li>
  <li>할 일 2</li>
  <li>할 일 3</li>
</ul>

$('#todo-list').on('click', 'li', function() {
  // 할 일 항목들에 대한 클릭 이벤트 핸들러 적용
});

위 예시에서는 #todo-list에 클릭 이벤트를 적용하되, 클릭된 요소가 li 요소일 때에만 동작하도록 되어 있습니다. 이를 통해 할 일 항목이 추가되거나 삭제되어도 이벤트 핸들러는 유지되며 동작할 수 있습니다.

이처럼 jQuery 이벤트 드리블링은 실제 웹 개발에서 유용하게 활용될 수 있습니다.