前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Dean-Edward的事件系统实现

Dean-Edward的事件系统实现

作者头像
欲休
发布2018-03-15 13:16:59
4490
发布2018-03-15 13:16:59
举报
文章被收录于专栏:前端杂货铺前端杂货铺

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

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

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

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

  失了灵活性。

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

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

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

代码语言:javascript
复制
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;
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档