• 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;
    }
  • 相关阅读:
    QQ聊天界面的布局和设计(IOS篇)-第二季
    关于UIButton中的ContentEdgeInsets的深入研究
    QQ聊天界面的布局和设计(IOS篇)-第一季
    UITextField实现过滤选中状态拼音
    UITableView系列(1)---Apple缓存池机制
    应用程序打包(ipa)
    线程篇-01-NSThread
    IOS开发错误提示原因集合-----长期更新
    Divide and Conquer.(Merge Sort) by sixleaves
    [已完成,附上实现方式]DWZ横向导航实现动态左菜单树
  • 原文地址:https://www.cnblogs.com/accordion/p/4092367.html
Copyright © 2020-2023  润新知