Dean-Edward的事件系统实现

jQuery早期的事件系统，主要借鉴自Dean-Edward的事件模型。虽说早期的该事件模型也有些许bug，诸如：

　　1，绑定的事件及其处理程序等数据并未存储到缓存中，而是直接存储在dom元素上，这样不仅污染了dom元素，而且还有可能造成隐患，比如在早期的ie下

　　拷贝元素，顺带着连这些数据都拷贝了，有可能发生交错引用进而引起内存泄露；

　　2，对待所有浏览器一视同仁，不论ie系还是现代浏览器，都统一采用 on+type的dom0级事件处理，这样失去了现代浏览器对事件冒泡或者捕获的控制，丧

　　失了灵活性。

但是DE事件模型，的确解决了浏览器的兼容问题，特别是IE下attachEvent绑定事件处理函数，在执行回调函数时无序执行的问题，也解决了在回调函数中this指向

的问题，顺带着对event参数做了简单的修补，这种无侵入式的模型在当时都是首屈一指的。

现在自己贴出根据DE模型，自己修改后的事件系统：

addEvent.guid = 1;

addEvent.events = {}; //简单缓存系统

function addEvent(el,type,fn){

    if(!fn.$$guid){

        fn.$$guid = addEvent.guid++;

    }

    if(!el.$$guid){

        el.$$guid = addEvent.guid++;

    }

    if(!addEvent.events[el.$$guid]){

        addEvent.events[el.$$guid] = {};

    }

    var fns = addEvent.events[el.$$guid][type];

    if(!fns){

        fns = addEvent.events[el.$$guid][type] = {};

        // 若在html行内绑定事件，则首先执行

        if(el['on'+type]){

            fns[0] = el['on'+type];

        }

    }

    fns[fn.$$guid] = fn;

    el['on'+type] = handleEvent;

}

function deleteEvent(el,type,fn){

    if(fn.$$guid in addEvent.events[el.$$guid][type]){

        delete addEvent.events[el.$$guid][type][fn.$$guid];

    }

}

function handleEvent(event){

    // 修正跨iframe获取不到event的bug

    event = event || fixEvent(((this.ownerDocument || document || this).parentWindow || window).event);

    var type = event.type,returnValue = true,

    handlers = addEvent.events[this.$$guid][type];

    for(var i in handlers){

        if(handlers[i].call(this,event) === false){

            returnValue = false;

        }

    }

    return returnValue;

}

function fixEvent(event) {

    event.preventDefault = function(){return event.returnValue = false;};

    event.stopPropagation = function(){return event.cancelBubble = true;};

    return event;

}

巴特西

Dean-Edward的事件系统实现

最新文章

热门文章