取消绑定匿名函数

Question

有人可以告诉如何"解除绑定"匿名功能吗？JQUERY它能够做到这一点,但我怎么能在我自己的脚本中实现这个功能.

这是场景:

下面的代码将'onclick'事件附加到Div上,其中'someDivId'作为ID,现在你点击DIV,它显示'点击!'.

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

这一切都很棒,问题是如果函数是匿名的,如何将函数"取消附加"到DIV,或者如何将所有附加事件"取消附加"到'a'元素？

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

这是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

最后，经过几个小时的测试和错误，我找到了一个解决方案，也许它不是最好或最有效的，但是......它有效！（在 IE9、Firefox 12、Chrome 18 上测试）

首先，我创建两个跨浏览器和辅助 addEvent() 和 removeEvent() 方法。（想法取自 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] );

    }
}

此外，我们还需要某种“容器”来存储元素的附加事件，如下所示：

HELPERS.EVTS = {};

最后是两个可调用并暴露给用户的方法：下一个添加一个事件（event）并将该事件关联到特定元素（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;

    }

最后，取消附加特定元素 (el) 的每个预附加事件 (event) 的方法

    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;

    }

顺便说一句，要调用此方法，您必须执行以下操作： 捕获 DOM 节点

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

使用相应的参数调用方法“bindEvent()”。

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

并解除它：

    removeAllEvent('click',a);

仅此而已，希望有一天会对某人有用。