unbind()

unBind 하는 법

왜 이벤트를 unbind 해야 할까? 

이벤트 핸들러를 이벤트에 등록할 때 마다, 프로세서에게 메모리에 allocate 시키라고 말하는 샘이다. 더 많은 이벤트 핸들러가 동시에 작동할 때, 더많은 메모리가 사용되는 샘이다. 이것이 더이상 필요가 없을때 이벤트 핸들러를 이벤트로 부터 분리해야하는 중요한 이유다. 

물론 짧은 스크립트 프로그래에서는 이벤트 핸들러를 이벤트에 바인딩하는 효과는 미비하다. 큰 웹 어플리케이션에서 이벤트를 unbind 하는 것이 좀더 중요하다. 그러나 습관을 가지는 것은 좋은 것이다. 

unbind 하기 위해서 호출해야 하는 함수는 unbind() 다. 

$(window).unbind("load");

위의 코드는 먼저 attatch 되었던 "onload" 핸들러를 윈도우로 부터 unbind 한다. 물론 이것은 틀린 예제다. 자바 스크립트는 아마도 이미 내부적으로 onload 이벤트를 unbind 했을 것이다. 왜냐하면 그것은 처음 한번만 실행되기 때문에, 그것은 한번만 실행된다. 그러나 이건 단지 예제일 뿐이다. 다른 대부분의 이벤트들은 자동으로 unbind 되지 않는다. 

때때로 당신은 이벤트를 한번만 bind 하고 실행된 이후에는 없애길 원할수 있다. 

이것은 다른 jQuery 함수로 이 논의에 맞을 것이다. one()이라고 불리는데, 이 함수는 이벤트 핸들러를 한 이벤트에 바인드 시킨다. 그리고 이벤트의 작동이 끝나자 마자 그것을 unbind 한다. 다른 말로 연속되 이벤트는 동작하지 않는다. 

id 가 "orange" 인 HTML 요소에 클릭 이벤트를 attatch 해 보자. 

$("#orange").one("click", function() {
  alert("This will be displayed only once.");
});

위 코드는 아래와 완전히 같은 동작을 하게 된다.

$("#orange").bind("click", function( event ) {
  alert("This will be displayed only once.");
  $(this).unbind( event );
});

어플리케이션이 복잡해 질수록 이벤트 핸들러를 이벤트에 bind 혹은 unbind 하는 많은 방법이 존재한다. 그렇다면 어느것이 스마트한 방법일까? 만약에 당신이 당신 고유의 스크립트 코드만을 사용하고, 다른 외부 라이브러리를 사용할 계획이 없다면, 방금 가지 논의 한 방법으로 족할 것이다. 그러나 같은 요소에 작용하는 다른 스크립트 코드와 충돌을 방지하고 조심스럽게 코딩을 하려고 한다면, 세번째 unbind 방법이 있다. 아래 예제와 같이.

var handler = function() {
  alert('The quick brown fox jumps over the lazy dog.');
};
$('#orange').bind('click', handler);
$('#orange').unbind('click', handler);

우리의 이벤트에 이름을 부여 하고(그러면 더이상 function closure가 아니게 된다), bind 와 unbind 함수를 분리해놓음으로서, jQuery 에게 오브젝트가 발생한 메모리상의 원 위치에서 동작하라는 분명한 메세지를 줄수 있다.

당신의 스크립트로 할당된 이벤트에 대해서만 bind 와 unbind 를 실행한다는 의미다. 다른 스크립트를 상상해 보라(다른이에 의해서 개발된), ID 가 "orange" 인 HTML 요소에 할당된 클릭 이벤트 핸들러는 의도하지 않게 우리의 코드에 의해서 unbind 된다. 우리는 다른 스크립트의 흐름을 방해하게 된다.

그러나 자바스크립트 코드는 사용되는 문법에 매우 예민할 수 있다. 이벤트 핸들러를 bind, unbind 할 때, 여기 한가지 더 주의를 환기하는 예방책이 있다. 아래 코드를 확인하기 바란다.

$('#orange').bind('click', function() {
  alert('The quick brown fox jumps over the lazy dog.');
});

// This will NOT unbind the event handler attached by the line of code above
$('#orange').unbind('click', function() {
  alert('The quick brown fox jumps over the lazy dog.');
});

예제의 unbind 는 결코 바로 위에서 attatch 된 이벤트를 unbind 할수 없다. 왜 안될까? 왜나하면 첫번째 함수는 function closure 로 생성되었고 그것은 메모리의 임의의 주소에 할당되게 된다. 두번째 함수도 같은 일을 하게 된다. 본질적으로 당신은 자바스크립트에게 지금 만들고 있는 함수를 unbind 시키라고 한 것이 되었다. 그 함수는 결코 다른 function closure 를 사용하여 할당된 그것과 같은 메모리 주소에 존해 하는 것이 아니다.

왜냐하면 function closure 는 "on the fly"(dynamic) 하게 생성되었고, 유일한 메모리상의 주소를 가지고 있기 때문이다.