unbind
원문 링크 
http://api.jquery.com/unbind/
개요 : 이전에 연결된 이벤트 핸들러를 요소에서 제거합니다.
- .unbind( [eventType] [, handler(eventObject)] )
- eventType JavaScript 이벤트 타입을 표현하는 문자열, click 또는 submit 같은.
- handler(eventObject) 더 이상 실행되지 않을 기능.
- .unbind( eventType, false )
- eventType JavaScript 이벤트 타입을 표현하는 문자열, click 또는 submit 같은.
- false .bind( eventType, false ) 바인딩에 대응하여 바인딩 해제를 위해 반환할 값 'false'
- .unbind( event )
- event 이벤트 핸들러에 전달된 JavaScript 이벤트 객체.
.bind() 함수로 바인딩한 이벤트 핸들러를 해제하기 위해서 .unbind() 를 사용합니다. (jQuery 1.7 부터는, .on()과 .off() 함수로 대체되었습니다.) 간단한 경우에는, 인자없이 .unbind() 를 사용하여 요소의 모든 이벤트의 바인딩을 해제합니다.
$('#foo').unbind();이런 사용은 종류에 상관없이 핸들러를 제거합니다. 더 정밀하게 사용하려면 이벤트 타입을 명시하면 됩니다.
$('#foo').unbind('click');click 이벤트 타입을 명시함으로써, 오직 해당하는 이벤트 타입만 제거되게 됩니다. 하지만, 이렇게 사용하는 것은 조금 부정적입니다. 만일 같은 요소에 같은 이벤트가 바인딩되어 있었다면 그것 마저도 모두 바인딩이 제거되게 되기 때문입니다. 이런 이유로 더 안정적으로 사용하려면 두개의 인자를 더 필요로 합니다.
var handler = function() {
alert('The quick brown fox jumps over the lazy dog.');
};
$('#foo').bind('click', handler);
$('#foo').unbind('click', handler);
핸들러명을 적어줌으로써, 다른 함수가 삭제되지 않도록 할 수 있게 됩니다. 아래 예는 옳바르게 작동되지 않습니다.
$('#foo').bind('click', function() {
alert('The quick brown fox jumps over the lazy dog.');
});
// will NOT work - 안되요.
$('#foo').unbind('click', function() {
alert('The quick brown fox jumps over the lazy dog.');
});두 함수는 작동할 것 같이 보이지만, 별도로 생성되고 JavaScript에서는 별개의 함수로 유지되게 됩니다. 특정 핸들러의 바인딩 해제를 위해서는, 그 함수를 바로 참조해야 합니다. 같은 일을 발생시키는 다른 함수를 참조해서는 안된다는 것입니다.
네임스페이스 사용하기 ( Using Namespaces )
바인딩 해제를 위해 핸들러에 대한 참조를 유지하는 대신에, 이벤트의 네임스페이스를 사용하여 범위를 좁힐 수 있습니다. .bind() 함수에 대한 설명에서 보면, 네임스페이스는 점(.) 연산자로 사용할 수 있습니다.
$('#foo').bind('click.myEvents', handler);핸들러가 이런 방식으로 바인딩 됬다면, 아래와 같은 일반적인 방법으로 바인딩을 해제할 수 있습니다.
$('#foo').unbind('click');하지만, 우리는 다른 요소에 영향을 주는 것을 피하고 싶습니다. 그래서 아래와 같이 사용해 봅니다.
$('#foo').unbind('click.myEvents');자 이제는 다른 요소의 이벤트들에 영향을 주지 않고 바인딩을 해제할 수 있게 되었습니다.
$('#foo').unbind('.myEvents');네임스페이스를 사용하면 플러그인을 개발하거나 미래에 확장될 코드를 미리 대비하는 것에 도움이 됩니다.
이벤트 객체 사용 ( Using the Event Object )
.unbind() 함수 사용법 중 3번째는 핸들러 자신의 바인딩 해제에 대해 보여주고 있습니다. 예를 들어, 이벤트를 딱 3번만 발생시키고 종료시키고 싶다고 가정해 보겠습니다.
var timesClicked = 0;
$('#foo').bind('click', function(event) {
alert('The quick brown fox jumps over the lazy dog.');
timesClicked++;
if (timesClicked >= 3) {
$(this).unbind(event);
}
});
이런 코드를 구현하려면 핸들러가 이벤트 객체를 알고 그것을 이용하여 세번의 실행을 감지한 후 바인딩을 해제할 수 있는 인자를 가져야 합니다. 이벤트 개체는 제거하는 핸들러를 알때 필요한 컨텍스트를 포함합니다. 위 예제를 보면 timesClicked 변수를 함수 밖에서 선언하고, 이벤트가 발생할 때마다 증가시켜 3번째 실행 여부를 판단하게 되는 것입니다.
예제 설명을 해주긴 했는데요. 무엇을 위해 설명해 주는 건지 정확인 와닿지 않습니다. 글만 봐서는요.
예 제
버튼을 클릭해서 bind와 unbind 테스트 해보기.
<!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">Bind Click</button>
<button id="unbind">Unbind Click</button>
<div style="display:none;">Click!</div>
<script>
function aClick() {
$("div").show().fadeOut("slow");
}
$("#bind").click(function () {
// could use .bind('click', aClick) instead but for variety...
$("#theone").click(aClick)
.text("Can Click!");
});
$("#unbind").click(function () {
$("#theone").unbind('click', aClick)
.text("Does nothing...");
});
</script>
</body>
</html>미리보기
코드 상의 사용법을 눈여겨 보세요. 예제 동작은 별거 없습니다.
예 제
모든 p 태그의 이벤트 바인딩을 해제하기
$("p").unbind()
예 제
모든 p 태그의 click 이벤트 바인딩을 해제하기
$("p").unbind( "click" )
예 제
두번째 인자를 사용하여 바인딩했던 이벤트만 해제하기
var foo = function () {
// code to handle some kind of event
};
$("p").bind("click", foo); // ... now foo will be called when paragraphs are clicked ...
$("p").unbind("click", foo); // ... foo will no longer be called.
bind와 unbind 쌍으로 노는 거니까 잘 알아두셔야 할 것 같습니다. 바인딩 해제를 잘 하셔서 의도치 않은 이벤트 발생을 막으세요.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| clearQueue(), 대기열의 함수를 제거 (0) | 2012.04.16 |
|---|---|
| animate(), 요소를 움직이기 (8) | 2012.03.30 |
| unload(), 페이지에서 벗어날 때 (2) | 2012.03.20 |
| undelegate(), 바인딩 해제하기 (0) | 2012.03.20 |
| triggerHandler(), 하나의 함수만 실행시키기 (0) | 2012.03.20 |
| trigger(), 함수 실행시키기 (0) | 2012.03.20 |
| toggle(), 토글하기 (0) | 2012.03.09 |
| submit(), 폼 전송 이벤트 (1) | 2012.03.09 |