off 메서드
off 메서드를 사용하면 요소에서 이벤트
핸들러를 제거할 수 있습니다. 핸들러를 등록하려면
off 메서드를
사용할 수 있습니다.
구문
이렇게 하여 요소의 이벤트 핸들러를 제거합니다.
첫 번째 매개변수로 문자열 형태의 하나 또는 공백으로 구분된
여러 이벤트를 전달하고, 두 번째로는 요소 내부의
자식 요소를 필터링하는 추가 선택자를 전달합니다
(이는 핸들러를 등록할 때 on 메서드에 전달했던 것과
일치해야 합니다). 위임된 모든 이벤트를 제거하려면,
값 '**'를 전달하세요. 두 번째 매개변수는
선택 사항입니다. 세 번째로는 (등록했던) 핸들러 함수를
전달하며, 여기에 이벤트 객체가 전달되거나
false를 전달합니다:
$(selector).off(events, [selector], handler(event object));
off 메서드를 다른 방식으로 사용할 수도 있습니다.
이 경우 첫 번째 매개변수로 JavaScript 객체를 전달하며,
여기서 키는 이벤트 유형이고 값은 요소에 추가했던
핸들러 함수입니다:
$(selector).off({'event type': handler}, [selector]);
단순히 jQuery.Event 객체 형태의 하나의
매개변수를 전달할 수도 있습니다:
$(selector).off(event);
메서드에 매개변수를 전달하지 않으면 요소에 등록된 모든 핸들러를 제거합니다:
$(selector).off();
예제
문단에 핸들러 함수
testFunc를 추가해 봅시다.
하지만 두 번째 문단의 핸들러를 즉시 제거하여,
두 번째 문단을 클릭해도 아무런 동작도 하지 않게 합니다
(코드의 마지막 줄을 주석 처리하면 이벤트가 작동하여
두 번째 문단을 클릭할 때도 동작하는 것을 볼 수 있습니다):
<p id="test1">click1</p>
<p id="test2">click2</p>
function testFunc(event) {
alert(event.data.text);
}
$('#test1').on('click', {text: 'aaa'}, testFunc); // 핸들러 추가
$('#test2').on('click', {text: 'bbb'}, testFunc); // 핸들러 추가
$('#test2').off('click', testFunc); // 핸들러 제거
