这个绑定事件的内存泄露是什么鬼？

Question

这是国外大牛Dean Edwards写的一个事件绑定的方法，其中我不能理解的是handleEvent里面的“handlers[i]”，这样直接调用为什么会在ie中提示内存泄露(在ie8中，ie9貌似没有出现这个问题)，其他的一些代码我注释了，为了集中理解这个函数

function addEvent(element, type, handler) {
    
        // assign each event handler a unique ID
        if (!handler.$$guid) handler.$$guid = addEvent.guid++;
        // create a hash table of event types for the element
        if (!element.events) element.events = {};
        // create a hash table of event handlers for each element/event pair
        var handlers = element.events[type];
        if (!handlers) {
            handlers = element.events[type] = {};
            // store the existing event handler (if there is one)
            if (element["on" + type]) {
                handlers[0] = element["on" + type];
            }
        }
        // store the event handler in the hash table
        handlers[handler.$$guid] = handler;
        // assign a global event handler to do all the work
        element["on" + type] = handleEvent;
    
};
// a counter used to create unique IDs
addEvent.guid = 1;

function removeEvent(element, type, handler) {
    if (element.removeEventListener) {
        element.removeEventListener(type, handler, false);
    } else {
        // delete the event handler from the hash table
        if (element.events && element.events[type]) {
            delete element.events[type][handler.$$guid];
        }
    }
};

    function handleEvent(event) {
        var returnValue = true;
        // grab the event object (IE uses a global event object)
        event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event);
        // get a reference to the hash table of event handlers
        var handlers = this.events[event.type];
        // execute each event handler
        for (var i in handlers) {
            handlers[i]();
//            this.$$handleEvent = handlers[i];这样调用却没问题？
//            if (this.$$handleEvent(event) === false) {
//                returnValue = false;
//            }
        }
        return returnValue;
    };
    
    function fixEvent(event) {
        // add W3C standard event methods
        event.preventDefault = fixEvent.preventDefault;
        event.stopPropagation = fixEvent.stopPropagation;
        return event;
    };
    fixEvent.preventDefault = function() {
        this.returnValue = false;
    };
    fixEvent.stopPropagation = function() {
        this.cancelBubble = true;
    };
    
    function fn1 () {
        alert(1);
    }
    
    var oBtn = document.getElementById("btn1");
    
    addEvent(oBtn, 'click', fn1);

详细一点的可以看这个demo
https://jsfiddle.net/ww55o5kq/1/

Answer 1

ie直接提示内存泄露，这个还没遇到过
就代码而言，有几个问题

handlers[i]();
//this.$$handleEvent = handlers[i];这样调用却没问题？
//if (this.$$handleEvent(event) === false) {
//returnValue = false;
//}

按handlers[i]();方式调用，那么

1. 在你绑定的事件回调函数将访问不到点击发生的元素对象，回调函数的this都将绑定到全局对象上而非元素

2. 在非IE浏览器上讲访问不到event对象

3. 用户将无法取消事件的默认行为，因为没有机会返回returnValue的值

4. 如果fixEvent中还要兼容stopImmediatePropagation话,剩余的事件处理会继续处理