SeouliteLab

jQuery의 .undelegate() 메소드 탐구하기: 이벤트 핸들러 유연하게 해제하기 본문

프로그래밍

jQuery의 .undelegate() 메소드 탐구하기: 이벤트 핸들러 유연하게 해제하기

Seoulite Lab 2024. 4. 5. 09:42

jQuery의 .undelegate() 메소드는 요소로부터 위임된 이벤트 핸들러를 유연하게 제거하는 방법을 제공하여 이벤트 바인딩을 동적으로 관리할 수 있습니다. 이 메소드의 사용법을 깊이 이해하기 위해 여러 예제를 통해 살펴보겠습니다.

예제 1: 기본적인 이벤트 해제

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery .undelegate() 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  $("#container1").delegate("button", "click", function() {
    alert("버튼 클릭됨!");
  });

  $("#undelegateBtn1").click(function() {
    $("#container1").undelegate("button", "click");
    alert("이벤트 해제 완료!");
  });
});
</script>
</head>
<body>

<div id="container1">
  <button>클릭하세요</button>
</div>
<button id="undelegateBtn1">이벤트 해제</button>

</body>
</html>

출력 결과: 버튼을 클릭하면 알림 창이 뜨며, "이벤트 해제" 버튼을 클릭하면 해당 요소의 모든 클릭 이벤트 핸들러가 제거됩니다.

예제 2: 특정 이벤트 해제

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery .undelegate() 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  function clickHandler() {
    alert("버튼 클릭됨!");
  }

  $("#container2").delegate("button", "click", clickHandler);

  $("#undelegateBtn2").click(function() {
    $("#container2").undelegate("button", "click", clickHandler);
    alert("특정 이벤트 해제 완료!");
  });
});
</script>
</head>
<body>

<div id="container2">
  <button>클릭하세요</button>
</div>
<button id="undelegateBtn2">특정 이벤트 해제</button>

</body>
</html>

출력 결과: 버튼을 클릭하면 알림 창이 뜨며, "특정 이벤트 해제" 버튼을 클릭하면 해당 요소의 특정 클릭 이벤트 핸들러가 제거됩니다.

예제 3: 다중 이벤트 해제

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery .undelegate() 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  function clickHandler1() {
    alert("첫 번째 버튼 클릭됨!");
  }

  function clickHandler2() {
    alert("두 번째 버튼 클릭됨!");
  }

  $("#container3").delegate("button", "click", clickHandler1);
  $("#container3").delegate("button", "click", clickHandler2);

  $("#undelegateMultipleBtn").click(function() {
    $("#container3").undelegate("button", "click");
    alert("모든 클릭 이벤트 해제 완료!");
  });
});
</script>
</head>
<body>

<div id="container3">
  <button>클릭하세요</button>
</div>
<button id="undelegateMultipleBtn">다중 이벤트 해제</button>

</body>
</html>

출력 결과: 버튼을 클릭하면 두 번의 알림 창이 차례대로 뜨며, "다중 이벤트 해제" 버튼을 클릭하면 해당 요소의 모든 클릭 이벤트 핸들러가 제거됩니다.

예제 4: 한 번만 실행되는 이벤트 해제

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery .undelegate() 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  $("#container4").delegate("button", "click", function() {
    alert("이벤트 핸들러가 한 번만 실행됩니다!");
  });

  $("#undelegateOnceBtn").click(function() {
    $("#container4").undelegate("button", "click");
    alert("이벤트 해제 완료!");
  });
});
</script>
</head>
<body>

<div id="container4">
  <button>클릭하세요</button>
</div>
<button id="undelegateOnceBtn">한 번만 실행 이벤트 해제</button>

</body>
</html>

출력 결과: 버튼을 한 번 클릭하면 알림 창이 뜨며, 그 후에는 클릭해도 반응이 없습니다. "한 번만 실행 이벤트 해제" 버튼을 클릭하면 해당 요소의 한 번만 실행되는 클릭 이벤트 핸들러가 제거됩니다.

예제 5: 모든 이벤트 해제

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery .undelegate() 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  $("#container5").delegate("button", "click", function() {
    alert("버튼 클릭됨!");
  });

  $("#undelegateAllBtn").click(function() {
    $("#container5").undelegate();
    alert("모든 이벤트 해제 완료!");
  });
});
</script>
</head>
<body>

<div id="container5">
  <button>클릭하세요</button>
</div>
<button id="undelegateAllBtn">모든 이벤트 해제</button>

</body>
</html>

출력 결과: 버튼을 클릭하면 알림 창이 뜨며, "모든 이벤트 해제" 버튼을 클릭하면 해당 요소의 모든 이벤트 핸들러가 제거됩니다.

저작자표시 비영리 변경금지

'프로그래밍' 카테고리의 다른 글

jQuery의 .serialize() 메소드: 폼 데이터 직렬화하기  (0) 2024.04.05
jQuery의 .unload() 메소드: 페이지가 언로드될 때 이벤트 처리하기  (0) 2024.04.05
jQuery의 .unbind() 메소드 탐구하기: 이벤트 핸들러 동적으로 관리하기  (0) 2024.04.05
jQuery의 .triggerHandler() 메소드: 이벤트 핸들러 호출 예제  (0) 2024.04.04
jQuery의 .trigger() 메소드: 다양한 이벤트 트리거 예제  (0) 2024.04.04
'프로그래밍' Related Articles more