[jQuery] jQuery 이벤트 드리블링과 이벤트 위임의 적용 예시

26 Dec 2023

jQuery

jQuery를 사용하면 이벤트 드리블링과 이벤트 위임을 통해 좀 더 효율적으로 이벤트 핸들링을 할 수 있습니다. 이번 글에서는 간단한 예시를 통해 jQuery를 사용하여 이벤트 드리블링과 이벤트 위임을 적용하는 방법에 대해 살펴보겠습니다.

1. 이벤트 드리블링

이벤트 드리블링은 하위 요소로의 이벤트 전파를 막는 기술로, 요소를 클릭했을 때 상위로의 이벤트 전파를 막아 중복으로 발생하는 이벤트를 방지합니다. jQuery를 사용하여 이벤트 드리블링을 적용하는 방법은 다음과 같습니다.

$('.inner').click(function(event) {
  event.stopPropagation();
  // 클릭 이벤트 핸들링
});

2. 이벤트 위임

이벤트 위임은 상위 요소에 이벤트 핸들러를 등록하여 하위 요소의 이벤트를 상위에서 처리하는 방식으로, 동적으로 추가되는 하위 요소에 대한 이벤트 핸들링에 유용합니다. jQuery를 사용하여 이벤트 위임을 적용하는 방법은 다음과 같습니다.

$('.container').on('click', '.item', function() {
  // 클릭 이벤트 핸들링
});

3. 예시

아래는 단순한 목록을 클릭했을 때 각각의 항목에 대한 이벤트를 처리하는 예시 코드입니다.

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $('.container').on('click', '.item', function() {
        // 클릭 이벤트 핸들링
        alert('Item clicked: ' + $(this).text());
      });
    });
  </script>
  <style>
    .item { cursor: pointer; }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">항목 1</div>
    <div class="item">항목 2</div>
    <div class="item">항목 3</div>
  </div>
</body>
</html>

위의 예시 코드에서는 container 요소에 클릭 이벤트를 위임하여 item 요소를 클릭했을 때 각각의 항목에 대한 이벤트를 처리하는 방식을 구현했습니다.

jQuery를 사용하여 이벤트 드리블링과 이벤트 위임을 활용하면 코드의 가독성과 유지보수성을 향상시킬 수 있으며, 효율적인 이벤트 핸들링을 구현할 수 있습니다.

참고 자료

jQuery 공식 문서: https://api.jquery.com/category/events/
Mozilla Developer Network (MDN) jQuery 이벤트 가이드: https://developer.mozilla.org/en-US/docs/Glossary/jQuery#Events