반응형
$(document).on()과 $(document).off()는 이벤트를 처리하고 등록하고 해제하는 메서드입니다.
이벤트 처리는 웹 페이지의 특정 상황에서 코드를 실행하는 데 사용됩니다. $(document)은 문서 전체를 나타내는 jQuery 객체를 의미하며,
이벤트 처리를 문서 전역에서 수행하려는 경우에 자주 사용됩니다.
1. $(document).on()
- $(document).on() 메서드는 지정된 이벤트를 감지하고 처리하기 위해 요소에 이벤트 핸들러를 등록합니다.
$(document).on(eventType, selector, handler);- eventType: 이벤트의 종류를 지정합니다. ('click', 'mouseenter', 'keyup' 등)
- selector: 이벤트를 발생시킬 요소의 선택자를 지정합니다. 이벤트가 발생한 요소가 이 선택자와 일치할 경우에만 핸들러가 실행됩니다. 이 부분을 null로 둘 수도 있으며,
이 경우 모든 해당 이벤트가 문서 내의 요소에서 발생할 때 핸들러가 실행됩니다. - handler: 이벤트가 발생했을 때 실행할 함수 (이벤트 핸들러)를 지정합니다.
2. $(document).off()
- $(document).off() 메서드는 등록된 이벤트 핸들러를 제거하여 이벤트를 더 이상 처리하지 않도록 합니다.
이 메서드는 $(document).on()을 사용하여 등록한 이벤트 핸들러와 짝을 이루며, 이를 사용하여 더 이상 필요하지 않은 이벤트 처리를 해제할 수 있습니다.
$(document).off(eventType, selector, handler);- eventType: 이벤트의 종류를 지정합니다. 이 부분을 생략하면 모든 이벤트 핸들러가 제거됩니다.
- selector: 이벤트를 발생시킨 요소의 선택자를 지정합니다. 이 부분을 생략하면 해당 이벤트의 모든 핸들러가 제거됩니다.
- handler: 제거할 이벤트 핸들러 함수를 지정합니다. 이 부분을 생략하면 해당 이벤트에 연결된 모든 핸들러가 제거됩니다.
3. 예제코드
아래 예제 코드는 이벤트 핸들러를 통해서 버튼이 클릭될 때마다 메시지 상태를 확인하여 메시지를 노출/숨김 처리 하고 있습니다.
클릭된 횟수가 3번 이면 $(document).off() 를 사용하여 이벤트 핸들러를 해제합니다. 이후 사용자에게 메시지를 표시합니다.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<script>
let toggleCount = 0;
// 클릭 이벤트 핸들러 함수
function toggleMessage() {
$("#message").toggle();
if ($("#message").is(":visible")) {
console.log("메시지가 나타났습니다!");
} else {
console.log("메시지가 사라졌습니다!");
}
toggleCount++;
// 이벤트 핸들러를 해제하는 조건
if (toggleCount === 3) {
$(document).off('click', '#toggleButton', toggleMessage);
alert("버튼을 더 이상 클릭할 수 없습니다.");
}
}
// 버튼 클릭 이벤트 핸들러 등록
$(document).on('click', '#toggleButton', toggleMessage);
</script>
<body>
<button id="toggleButton">메시지 토글</button>
<div id="message" style="display: none;">메시지가 나타났습니다!</div>
</body>
</html>
반응형
'개발이야기 > jQuery' 카테고리의 다른 글
| [jQuery] 트리 메뉴 만들기 예제, 체크박스 사용하기 (0) | 2023.07.31 |
|---|---|
| [jQuery] UI Tabs 사용하기 (가로/세로 tabs, tab 추가하기) (0) | 2023.07.27 |
| [jQuery] jstree checkbox 사용법, 예제, 이벤트 핸들링 (0) | 2023.07.18 |
| [jQuery] 화면 (브라우저) 크기 확인, 화면 변경 감지하기 (0) | 2023.07.04 |
| [jQuery] input name 배열 값 가져오기, 유효성 검사 (0) | 2023.07.03 |
댓글