[jQuery] jQuery 이벤트 드리블링과 이벤트 위임의 확장성

26 Dec 2023

본 글에서는 jQuery를 사용하여 이벤트 드리블링과 이벤트 위임을 활용하는 방법과 그 확장성에 대해 살펴보겠습니다.

이벤트 드리블링(Event Bubbling)

이벤트 드리블링이란 하위 요소에서 상위 요소로 이벤트가 전파되는 현상을 말합니다. 즉, 하위 요소에서 이벤트가 발생하면 이 이벤트는 하위 요소의 상위 요소까지 전달됩니다.

$(document).ready(function(){
  $("div").on("click", function(){
    $(this).css("background-color", "lightgray");
  });
});

위 코드에서 div 요소를 클릭했을 때 해당 요소의 배경색이 lightgray로 변경됩니다. 이때, 이벤트가 상위 요소로도 전파되어 상위 요소에도 동일한 클릭 이벤트가 전달되는 방식이 이벤트 드리블링입니다.

이벤트 위임은 상위 요소에 이벤트를 할당하여 하위 요소의 이벤트를 관리하는 방식입니다. 이를 통해 새로운 하위 요소가 추가되어도 이벤트 핸들러를 추가로 등록할 필요가 없어 확장성이 좋습니다.

$(document).ready(function(){
  $("ul").on("click", "li", function(){
    $(this).css("color", "red");
  });
});

위 코드에서 ul 요소에 이벤트를 할당하고, 클릭된 요소가 li 요소일 때에만 해당 이벤트 핸들러를 실행합니다. 이렇게 함으로써 새로운 li 요소가 추가되더라도 해당 이벤트가 동작하게 됩니다.

이벤트 위임은 동적으로 추가되는 요소에 대한 이벤트 처리에 특히 유용합니다. 또한, 대규모 애플리케이션에서 이벤트 핸들러의 관리를 효율적으로 할 수 있어 확장성이 높습니다.

이러한 특징으로 인해 이벤트 위임은 jQuery를 사용한 웹 개발에서 널리 활용되고 있으며, 코드의 유지보수성을 향상시키는데 큰 도움이 됩니다.

이상으로 jQuery를 사용한 이벤트 드리블링과 이벤트 위임에 대한 내용을 살펴보았습니다. 감사합니다.

참고 문헌: