[jQuery] jQuery 이벤트 드리블링과 이벤트 위임의 적합한 사용 사례

26 Dec 2023

jQuery를 사용하다보면 이벤트 관리에 대한 고민이 생길 수 있습니다. 특히, 이벤트 드리블링과 이벤트 위임은 이러한 고민을 해결하는데 도움이 됩니다. 이번 글에서는 jQuery를 사용한 이벤트 드리블링과 이벤트 위임의 적합한 사용 사례에 대해 알아보겠습니다.

이벤트 드리블링과 이벤트 위임

이벤트 드리블링은 여러 중첩된 요소에서 이벤트가 발생했을 때 상위 요소로 이벤트가 전파되는 현상을 말합니다. 반면, 이벤트 위임은 상위 요소가 하위 요소의 이벤트를 처리하는 방식으로 이벤트를 효율적으로 관리할 수 있게 해줍니다.

일반적으로 이벤트 드리블링은 이벤트 캡처링을 통해 처리할 수 있습니다. jQuery를 사용하여 이벤트 캡처링을 구현하려면 on() 메서드를 활용합니다.

$("#parentElement").on("click", "#childElement", function() {
  // 이벤트 핸들러 로직
});

위 예시에서는 #parentElement의 하위 요소인 #childElement에서 발생한 클릭 이벤트를 처리할 수 있습니다.

이벤트 위임은 동적으로 생성된 요소에 대한 이벤트 처리에 유용합니다. 예를 들어, 아래와 같은 방식으로 이벤트 위임을 구현할 수 있습니다.

$("#parentElement").on("click", ".dynamicChildElement", function() {
  // 이벤트 핸들러 로직
});

위 코드에서는 #parentElement 안에 동적으로 생성된 .dynamicChildElement에 대한 클릭 이벤트를 처리합니다.

이벤트 드리블링은 메뉴나 드롭다운과 같이 중첩된 요소에서 발생하는 이벤트에 유용합니다.

이벤트 위임은 리스트나 테이블과 같이 동적으로 요소가 추가되는 경우에 유용합니다.

따라서, 이벤트 드리블링과 이벤트 위임은 jQuery를 사용한 이벤트 관리에 있어서 효율적인 방법을 제공합니다.

이상으로 jQuery를 이용한 이벤트 드리블링과 이벤트 위임의 적합한 사용 사례에 대해 알아보았습니다.