Desvincular una función anónima

Question

¿Alguien puede decir cómo "desvincular" una función anónima? JQUERY es capaz de hacer eso, pero ¿cómo puedo implementar esta funcionalidad en mi propio script?

Este es el escenario:

El siguiente código adjuntar un evento 'onclick' a la Div que tienen 'someDivId' como identificación, ahora wen, hace clic en el DIV, es espectáculo 'clic'.

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

Eso es todo muy bien, el problema es la forma de "no-adjuntar" la función de la DIV si la función es anónima o la forma de "no-ATTACH" todos los eventos adjuntos al elemento 'a'?

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

Este es el código para bindEvent Método:

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

Finalmente, y después de horas de prueba & errores que he encontrado una solución, tal vez no es la mejor o más eficiente, pero ... TI ¡TRABAJOS! (Probado en IE9, Firefox 12, Chrome 18)

En primer lugar, creo dos métodos cross-browser y auxiliary addEvent() y removeEvent(). (Idea tomada del código fuente de Jquery!)

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]); 

    } 
} 

También necesitamos una especie de 'contenedor' para almacenar los eventos asociado a los elementos, así:

HELPERS.EVTS = {}; 

Y por último los dos exigible y expuesto a los métodos de los usuarios: El siguiente uno para agregar un evento (evento) y asociar este evento a un método (controlador) para un elemento específico (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; 

    } 

Por último, el método que ONU-adjuntar todos los eventos pre-adjunta (eventos) para un elemento específico (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; 

    } 

Por cierto, para llamar a estos métodos que usted debe hacer lo siguiente: Capture un DOM nodo

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

Call el método 'bindEvent()' con los parámetros correspondientes.

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

Y para de-adjuntarlo:

removeAllEvent('click',a); 

Eso es todo, esperamos que sea útil para alguien un día.

Answer 2

Personalmente (y sé que este no es el "mejor", como lo hace conmigo requerir que pensar en lo que estoy haciendo), Me gusta usar las propiedades de evento on* del elemento con el que estoy trabajando.

Esto tiene la conveniente ventaja de poder separar los eventos de forma rápida y sencilla.

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

Sin embargo, usted tiene que tener cuidado con esto porque si intenta agregar un segundo controlador de eventos que se sobreponen a la primera. Tenlo en cuenta y deberías estar bien.

Answer 3

Esto es de jQuery de 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

No estoy seguro de si se puede desvincular una función anónima unido a través de JavaScript. Si es posible, puede eliminar el elemento del DOM y volver a crearlo. Esto eliminará cualquier controlador de eventos adjunto anteriormente.

Answer 5

JavaScript no proporciona una lista de detectores de eventos adjuntos a un nodo.

Puede eliminar todos los detectores de eventos de un nodo, pero utilizando el método Node.cloneNode, ve aquí: https://developer.mozilla.org/En/DOM/Node.cloneNode

Este clona el nodo (obviamente) pero no clona los detectores de eventos asociados a la misma.

También puedes, simplemente enlazar funciones vacíos como los detectores de eventos:

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