off
원문 링크 
http://api.jquery.com/off/
개요 : 이벤트 핸들러 해제하기.
- .off( events [, selector] [, handler(eventObject)] )
- events 공백으로 구분된 하나 이상의 이벤트 타입과 옵션인 네임스페이스. "click", "keydown.myPlugin", ".myPlugin" 등이 있음.
- selector 이벤트 바인딩을 위해 .on() 함수에서 사용된 선택자.
- handler(eventObject) 바인딩 된 이벤트 또는 특수값인 핸들러 함수.
- .off( events-map [, selector] )
- events-map 공백으로 구분된 하나 이상의 이벤트 타입과 옵션인 네임스페이스로 구성된 문자열 키(keys)들과 값(values)들.
- selector 이벤트 바인딩을 위해 .on() 함수에서 사용된 선택자.
off() 함수는 .on() 함수에 의해 바인딩 된 이벤트 핸들러를 제거합니다. 바인딩에 대한 내용은 .on() 함수를 살펴보시기 바랍니다. 특정 이벤트 처리기는 이벤트 이름, 네임 스페이스, 선택자, 또는 핸들러 함수 이름의 조합을 제공하여 요소에서 이벤트의 바인딩을 해제할 수 있습니다. 여러개의 필터 인자를 제공하면, 모든 인자들과 일치하는 것만 바인딩이 해제됩니다.
만약 "click"과 같은 간단한 이벤트 이름을 인자로 사용하면, 직접 추가하거나 나중에 바인딩 한 모든 이벤트들을 jQuery 집합 안에 있는 요소에서 제거시킬 수 있습니다. 플러그인으로 사용하여 코드를 작성하는 경우, 또는 단순히 대규모 코드 기반으로 작업을 할 때, 가장 좋은 방법은 코드가 실수로 다른 코드에 의해 연결된 이벤트 처리기를 제거하지 않도록 네임 스페이스를 사용하여 이벤트를 부착하고 제거하는 것입니다. 특정 네임 스페이스에 속한 모든 유형의 모든 이벤트는 ".myPlugin" 과 같은 네임스페이스를 이용하여 바인딩을 해제할 수 있습니다. 최소한 네임 스페이스 또는 이벤트 이름 중 하나가 제공 되어야 합니다.
특정 이벤트 핸들러를 제거하기 위해서는 selector 인자로 해야 합니다. 이 선택자(selector) 문자열은 .on() 함수에서 바인딩에 사용했던 인자와 동일해야 합니다. 핸들러에서 프로그래밍을 통해 바인딩 한 이벤트에 영향을 주지 않고 제거하기 위해 "**" 같은 특수한 값을 사용할 수 있습니다.
handler 인자 위치에 함수명을 사용해서 바인딩을 해제할 수도 있습니다. When jQuery 는 이벤트 핸들러를 바인딩할 때 함수 핸들러에 유니크 아이디를 부여(assign)합니다. jQuery.proxy() 함수나 그와 유사한 메커니즘에 의해 프록시 된 핸들러는 모두 같은 유니크 아이디(프록시 함수)를 가지게 됩니다. 그래서 프록시 된 핸들러들은 의도한 것보다 더 잘 제거할 수 있습니다. 이런 이유로 바인딩을 제거하는데 있어 네임스페이스를 이용하는 것보다 더 유용한 방법입니다. ( 사실 이 단락은 무슨 의미인지 잘 모르겠습니다. 아 이 짧은 지식이여~~ )
.on()과 마찬가지로, 인자로 공백으로 분리된 events 와 handler 로 이루어진 events-map 을 사용할 수 있습니다. 키(keys)들은 이벤트거나 네임스페이스이고, 값(values)들은 핸들러 함수거나 특별한 값인 false 입니다.
예 제
색깔이 있는 버튼에 이벤트 핸들러를 바인딩하고 해제하고 합니다.
<!DOCTYPE html>
<html>
<head>
<style>
button { margin:5px; }
button#theone { color:red; background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="theone">Does nothing...</button>
<button id="bind">Add Click</button>
<button id="unbind">Remove Click</button>
<div style="display:none;">Click!</div>
<script>
function aClick() {
$("div").show().fadeOut("slow");
}
$("#bind").click(function () {
$("body").on("click", "#theone", aClick)
.find("#theone").text("Can Click!");
});
$("#unbind").click(function () {
$("body").off("click", "#theone", aClick)
.find("#theone").text("Does nothing...");
});
</script>
</body>
</html>미리보기
버튼을 클릭해 보세요.
예 제
이 예제는 제가 만들어 본겁니다. direct와 delegated의 차이점과 on, off의 연동성을 알아보세요.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>delegated event.</p>
<p>delegated event.</p>
<p onclick="alert('direct event')">direct event.</p>
<p onclick="alert('direct event')">direct event.</p>
<script>
$("p").on("click", function(){
alert("delegate event.");
});
//$("p").off("click");
</script>
</body>
</html>
미리보기
off에 주석처리되어 있는데 이 부분을 활성화 시킨신 후에 테스트해 보시면 조금 이해가 되시지 않을까 합니다.
예 제
모든 p 태그에서 이벤트 핸들러들을 제거합니다.
$("p").off()
예 제
모든 p 태그에서 모든 임의의 click 핸들러를 제거합니다.
$("p").off( "click", "**" )
예 제
세번째 인자로 바인딩 했던 단 하나의 핸들러만을 제거합니다.
var foo = function () {
// code to handle some kind of event
};
// ... now foo will be called when paragraphs are clicked ...
$("body").on("click", "p", foo);
// ... foo will no longer be called.
$("body").off("click", "p", foo);
예 제
네임스페이스에 포함된 모든 임의의 이벤트 핸들러를 해제합니다.
var validate = function () {
// code to validate form entries
};
// delegate events under the ".validator" namespace
$("form").on("click.validator", "button", validate);
$("form").on("keypress.validator", "input[type='text']", validate);
// remove event handlers in the ".validator" namespace
$("form").off(".validator");
이벤트 해제는 중요한 함수인 것 같습니다. 각 사용법을 잘 숙지하시어 사용하시구요. direct, 즉 개발자가 직접 넣은 javascript 이벤트 함수들은 해당이 없는거 잘 아시죠? "**"를 넣을때를 제외하고 말이죠. 내용은 쉽진 않네요.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| resize(), 사이즈 바꾸기 (0) | 2012.03.06 |
|---|---|
| ready(), 문서가 준비되면 실행하기 (0) | 2012.03.06 |
| one(), 이벤트 발생하면 바인딩 자동해제 (0) | 2012.02.24 |
| on(), 이벤트 바인딩 하기 (0) | 2012.02.24 |
| jQuery API - mouseup(), 마우스를 눌렀다 뗄 때 (0) | 2012.01.13 |
| jQuery API - mouseover(), 마우스가 올라올 때 (3) | 2012.01.13 |
| jQuery API - mouseout(), 마우스가 떠날 때 (2) | 2012.01.13 |
| jQuery API - mousemove(), 마우스가 요소에서 움직일 때 (0) | 2012.01.13 |