2013-11-03 2 views
1

리스너가 호출 된 범위 밖에서 리스너를 끌 수 있는지 여부를 알 수 없었기 때문에 작은 테스트 코드를 만들었습니다. 콜백을 포함 할 때 테스트 코드에서 왜 그럴지 궁금합니다. .off 메서드에서 코드가 더 이상 작동하지 않는 것 같습니다..off가 콜백과 작동하지 않습니다.

$(document).off('mousedown', function() { 
    console.log("off"); 
}); 

가 사용하는 동안 코드를 깰 것 같다 :

jsfiddle

var testobj = { 
    init: function() { 
     testobj.listener(); 
    }, 

    listener: function() { 

     $(document).on('mousedown', function() { 
      testobj.listener_off(); 
       console.log("on"); 
     }); 


    }, 

    listener_off: function() { 
     $(document).on('mouseup', function() { 
      $(document).off('mousedown', function() { 
       console.log("off"); 
      }); 
     }); 
    } 
} 

$(function() { 
    testobj.init(); 
}); 

그래서 다시 한 번 문제가 있다는 것입니다

$(document).off('mousedown'); 

는 잘 작동 것으로 보인다.

또한 여러 이벤트 리스너 (특히 동일한 이벤트에 반응하는 이벤트 리스너)를 처리 할 때 해당 이벤트를 호출하거나 해제하는 모범 사례는 무엇입니까? 나는 그들을 별도의 기능으로 분리하여 나중에 호출 할 수 있거나 문제를 일으킬 수 있습니까?

+1

'.off()'의 두 번째 인수는 제거하려는 핸들러입니다. 익명 함수는 기존 핸들러와 일치하지 않으므로 아무 것도 제거하지 않습니다. – Barmar

답변

1

.off()에 함수를 전달하면 해당 특정 처리기를 제거하려는 것입니다. 새로 인스턴스화 된 익명 함수를 전달하기 때문에 어떤 이벤트에 대해서도 이 아니며 처리기가 아니므로 순수한 효과가 없습니다.

.off()의 형식은 참조가있는 처리기 기능이있는 경우에 유용합니다. 변수 이름 또는 일부 개체의 속성 이름 등입니다. 그런 식으로 함수를 사용할 수 있습니다. 당신이 원할 때 다시 다음 이벤트 핸들러 등을 설정 참조를 해제는-설정 : 귀하의 경우

function someHandler(ev) { 
    // handle handle handle ... 
} 

// ... 

$('#foo').on('click', someHandler); 

// ... 

if (itsChristmasTime()) { 
    $('#foo').off('click', someHandler); 
} 

, 당신은 아마 방금 이벤트 이름을 전달하는 하나의 인수 버전이 필요합니다. 이벤트 핸들러를 추적하는 또 다른 f}은 이벤트 이름에 규정자를 사용하는 것입니다. JQuery는 "." 이벤트 이름에 ","무시합니다. 이벤트 핸들링을 위해 접미어를 붙이지 만 완전히 잊어 버리지는 않습니다. 따라서 당신이 사용하고있는 특정 기능을 추적 할 필요없이 핸들러를 식별하기 위해 그것을 사용할 수 있습니다

$('#foo').on('click.remove-me', function(ev) { ... }); 

// ... 

if (itsChristmasTime()) { 
    $('#foo').off('click.remove-me'); 
} 

별도 유지할 수 있습니다 그 방법을 위젯의 행동의 다양한 측면에 대한 처리기를 "클릭", 그리고만을 선택적으로 제거 하나/그들 중 일부.

1

함수에 두 번째 인수로 함수를 전달할 때으로 등록 된 동일한 함수 인스턴스 이어야합니다.

$(myDiv).on('click', function() {}); 
$(myDiv).off('click', function() {}); 

을하지만이 것 :

Bascially, 다음은 작동하지

function clickHandler() {} 

$(myDiv).on('click', clickHandler); 
$(myDiv).off('click', clickHandler); 

당신이 특정 이벤트에 대한 모든 리스너를 제거하는 두 번째 매개 변수없이 off 전화, 그것이 귀하의 경우에 효과가있는 이유입니다.

관련 문제