javascript - Unbind an Anonymous Function - Stack Overflow

admin管理员组

文章数量:1279117

Can somebody tell how to "unbind" an anonymous function? In jQuery it's capable to do that, but how can I implement this Functionality in my own script.

This is the scenario:

The following code attach a onclick event to the Div which have someDivId as ID, now when you click the DIV, it's showing 'clicked!'.

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

That's all great, the problem is how to "un-attach" the Function to the DIV if the function is anonymous or how to "un-attach" all attached events to the 'a' Element?

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

This is the code for bindEvent Method:

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

Can somebody tell how to "unbind" an anonymous function? In jQuery it's capable to do that, but how can I implement this Functionality in my own script.

This is the scenario:

The following code attach a onclick event to the Div which have someDivId as ID, now when you click the DIV, it's showing 'clicked!'.

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

That's all great, the problem is how to "un-attach" the Function to the DIV if the function is anonymous or how to "un-attach" all attached events to the 'a' Element?

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

This is the code for bindEvent Method:

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

• javascript
• jquery
• jquery-events

Share Improve this question Follow edited Nov 23, 2022 at 22:12 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Apr 20, 2012 at 22:34 WSDWSD 3,5973232 silver badges4646 bronze badges 11

• 1 Where did you get bindEvent()? What does it do? – jfriend00 Commented Apr 20, 2012 at 22:37
• Are you asking for a non-jQuery-based answer (e.g. plain javascript)? – jfriend00 Commented Apr 20, 2012 at 22:38
• @jfriend00: he wants to implement it on his own - eg. hes not using jQuery, but asking how jQuery does it. – prodigitalson Commented Apr 20, 2012 at 22:38
• @jfriend00, am trying to implement the method unBind from Jquery or any other that do the same in my own script. – WSD Commented Apr 20, 2012 at 22:40
• 1 possible duplicate of Removing an anonymous event listener – jfriend00 Commented Apr 20, 2012 at 23:16

 |  Show 6 more ments

5 Answers 5

Sorted by: Reset to default 4

Finally, and after hours of Test&Errors i have found a solution, maybe it's not the best or most efficient but... IT WORKS! (Tested on IE9, Firefox 12, Chrome 18)

First all I'v create two cross-browser and auxiliary addEvent() and removeEvent() methods. (Idea taken from Jquery's source code!)

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

    }
}

Also we need some kind of 'container' to store the attached events to elements, like this:

HELPERS.EVTS = {};

And finally the two callable and exposed to the users Methods: The next one to add an Event(event) and associate this Event to a Method (handler) for a specific Element (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;

    }

Lastly the method that un-attach every pre-attached events (event) for an specific Element (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;

    }

By the way, to call this methods you must do the following: Capture a DOM Node

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

Call the method 'bindEvent()' with the corresponding parameters.

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

And to de-attach it:

    removeAllEvent('click',a);

That's all, hope will be useful for somebody one day.

Personally (and I know this isn't the "best" way, as it does require me to think about what I'm doing), I like to just use the on* event properties of the element I'm working with.

This has the convenient upside of being able to quickly and easily detach events.

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

However, you do have to be careful with this because if you try to add a second event handler it will overwrite the first. Keep that in mind and you should be all fine.

I'm not sure if you can unbind an anonymous function attached via javascript. If possible you can simple remove the element from the DOM and recreate it. This will get rid of any event handlers previously attached.

JavaScript provides no list of event listeners attached to a node.

You can remove all event listeners of a node but using the Node.cloneNode method, see here: https://developer.mozilla/En/DOM/Node.cloneNode

This clones the node (obviously) but it does not clone the event listeners attached to it.

You could also just bind empty functions as event listeners:

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

This is from jquery's 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 );
        }
    };

本文标签： javascriptUnbind an Anonymous FunctionStack Overflow