Rozpięcie anonimowej funkcji

Question

Czy ktoś może powiedzieć, jak "usunąć" anonimową funkcję? JQUERY jest w stanie to zrobić, ale jak mogę zaimplementować tę Funkcjonalność w moim własnym skrypcie.

Jest to scenariusz:

Poniższy kod dołączyć „onclick” zdarzenie do Div, które mają „someDivId” jako ID, teraz wen kliknięciu DIV, to pokaz „kliknięcia!”.

var a = document.getElementById('someDivId'); 
bindEvent(a,'click',function(){alert('clicked!');}); 

To wszystko świetnie, problemem jest to, jak „un-dołączyć” funkcji do DIV, czy funkcja jest anonimowa lub jak „un-dołączyć” wszystkie podłączone zdarzenia do „a” Element?

unBind(a,'click'); //Not necessarily the given params, it's just an example. 

Jest to kod dla metody bindEvent:

function bindEvent (el,evtType,fn){ 
    if (el.attachEvent) { 
     el['e'+evtType+fn] = fn; 
     el[evtType+fn] = function(){ 
      fn.call(el,window.event); 
     } 
     el.attachEvent('on'+evtType, el[evtType+fn]); 
    } else { 
     el.addEventListener(evtType, fn, false); 
    } 
} 

Answer 1

Wreszcie, po wielu godzinach prób & błędów znalazłem rozwiązanie, może to nie jest najlepszy i najbardziej wydajny ale ... PRACE! (Testowane na IE9, Firefox 12, Chrome 18)

Najpierw tworzę dwie różne przeglądarki i pomocnicze metody addEvent() i removeEvent(). (Pomysł zaczerpnięty z kodu źródłowego Jquery'ego!)

HELPERS.removeEvent = document.removeEventListener ? 
function(type, handle,el) { 
    if (el.removeEventListener) { 
    //W3C Standard  
    el.removeEventListener(type, handle, true); 
    } 
} : 
function(type, handle,el) { 
    if (el.detachEvent) { 
     //The IE way 
     el.detachEvent('on'+type, el[type+handle]); 
     el[type+handle] = null; 
    } 
}; 

HELPERS.addEvent = document.addEventListener ? 
function(type, handle,el) { 
    if (el.addEventListener) { 
     //W3C Standard 
     el.addEventListener(type, handle, true); 
    } 
} : 
function(type, handle,el) { 
    if (el.attachEvent) { 
     //The IE way 
     el['e'+type+handle] = handle; 
     el[type+handle] = function(){ 
      handle.call(el,window.event); 
     }; 
     el.attachEvent('on'+type, el[type+handle]); 

    } 
} 

Również musimy jakąś „kontener” do przechowywania załączonego zdarzeń do elementów, takich jak to:

HELPERS.EVTS = {}; 

i wreszcie dwa wymagalne i narażone na Metod użytkowników: następnego jeden do dodania zdarzenia (zdarzenia) i powiązania tego zdarzenia z metodą (handler) dla określonego elementu (el).

function bindEvent(event, handler,el) { 

      if(!(el in HELPERS.EVT)) { 
       // HELPERS.EVT stores references to nodes 
       HELPERS.EVT[el] = {}; 
      } 

      if(!(event in HELPERS.EVT[el])) { 
       // each entry contains another entry for each event type 
       HELPERS.EVT[el][event] = []; 
      } 
      // capture reference 
      HELPERS.EVT[el][event].push([handler, true]); 
      //Finally call the aux. Method 
      HELPERS.addEvent(event,handler,el); 

     return; 

    } 

Wreszcie sposób, że un-dołączyć co wcześniej dołączone zdarzeń (Event) w odniesieniu do konkretnego elementu (EL)

function removeAllEvent(event,el) { 

      if(el in HELPERS.EVT) { 
       var handlers = HELPERS.EVT[el]; 
       if(event in handlers) { 
        var eventHandlers = handlers[event]; 
        for(var i = eventHandlers.length; i--;) { 
         var handler = eventHandlers[i]; 
         HELPERS.removeEvent(event,handler[0],el); 

        } 
       } 
      } 

    return; 

    } 

Nawiasem mówiąc, do wywołania tej metody należy wykonać następujące czynności: przechwytywania DOM Węzeł

var a = document.getElementById('some_id'); 

połączenia metoda "bindEvent() z odpowiednimi parametrami.

bindEvent('click',function(){alert('say hi');},a); 

I de-podłączyć go:

removeAllEvent('click',a); 

To wszystko, mam nadzieję, będą przydatne dla kogoś jednego dnia.

Answer 2

Osobiście (i wiem, że to nie jest „najlepszy” sposób, gdyż nie wymaga mnie do myślenia o tym, co robię), Lubię po prostu używać właściwości zdarzenia elementu, z którym pracuję.

Ma to tę zaletę, że można szybko i łatwo odłączyć zdarzenia.

var a = document.getElementById('someDivId'); 
a.onclick = function() {alert("Clicked!");}; 
// later... 
a.onclick = null; 

Należy jednak zachować ostrożność, ponieważ jeśli spróbujesz dodać drugą funkcję obsługi zdarzenia, zostanie ona zastąpiona pierwszą. Miej to na uwadze i wszystko powinno być w porządku.

Answer 3

to z jQuery source:

jQuery.removeEvent = document.removeEventListener ? 
    function(elem, type, handle) { 
     if (elem.removeEventListener) { 
      elem.removeEventListener(type, handle, false); 
     } 
    } : 
    function(elem, type, handle) { 
     if (elem.detachEvent) { 
      elem.detachEvent("on" + type, handle); 
     } 
    }; 

Answer 4

Nie jestem pewien, czy można rozpiąć anonimową funkcję dołączony poprzez javascript. Jeśli to możliwe, możesz łatwo usunąć element z DOM i ponownie go utworzyć. Spowoduje to pozbycie się wszelkich dołączonych programów obsługi zdarzeń.

Answer 5

JavaScript nie zawiera listy detektorów zdarzeń dołączonych do węzła.

Można usunąć wszystkie detektory zdarzeń węzła ale stosując metodę Node.cloneNode, zobacz tutaj: https://developer.mozilla.org/En/DOM/Node.cloneNode

ten klonuje węzeł (oczywiście), ale nie klonować nasłuchiwania zdarzeń z nim związane.

Można też po prostu związać pustych funkcji jako detektorów zdarzeń:

function noop() {} 
bindEvent(myElement, "click", noop);