mass Framework event模块 v8

最近对事件模块进行疯狂升级的成果。

define("event", top.dispatchEvent ?  ["$node"] : ["$node","$event_fix"],function(){
    $.log("已加载event模块v8")
    var facade = $.event || ($.event = {});
    var adapter = $.eventAdapter || ($.eventAdapter = {})
    var rhoverHack = /(?:^|\s)hover(\.\S+|)\b/
    var bindTop = !adapter.change;//如果没有加载event_fix模块,也就没有change分支,也就说明其是支持dispatchEvent API
    $.eventSupport = function( eventName, el ) {
        el = el || document.createElement("div");
        eventName = "on" + eventName;
        var ret = eventName in el;
        if ( el.setAttribute && !ret ) {
            el.setAttribute( eventName, "" );
            ret = typeof el[ eventName ] === "function";
            el.removeAttribute(eventName);
        }
        el = null;
        return ret;
    };
    /**
     * 从事件类型中分解出有用的信息
     * @param {String} event 事件类型
     * @param {String|Boolean|Undefined} live 用于判定是否使用代理
     */
    var Event = function(event, live){
        var parts = event.split('.');
        var ns = parts.slice(1).sort().join(' ');
        var type = parts[0], hack, tmp;//input -> change -> propertychange
        while( (hack = adapter[ type ]) ){
            tmp = hack[ live ? "delegateType" : "bindType" ];
            if( tmp ){
                type = tmp
            }else{
                break
            }
        }
        //比如在chrome下fire mouseenter, 到这里type为mouseover, origType为mouseenter
        this.type = type;          //事件类型
        this.origType = parts[0]   //原事件类型
        this.live = live;          //是否使用了事件代理,可以是正则,字符串,布尔或空值
        this.ns =   ns,            //命名空间
        this.rns =  ns ? new RegExp("(^|\\.)" + ns.replace(' ', ' .* ?') + "(\\.|$)") : null
    }
    //events为要过滤的集合,后面个参数为过滤条件
    function findHandlers( events, hash, fn, live ) {
        return events.filter(function(desc) {
            return desc && (!hash.rns || hash.rns.test(desc.ns))  //通过事件类型进行过滤
            && (!hash.origType || hash.origType === desc.origType) //通过命名空间进行进行过滤
            && (!fn || fn.uniqueNumber === desc.uuid)              //通过uuid进行过滤
            && (!live || live === desc.live || live === "**" && desc.live )//通过选择器进行过滤
        })
    }
    Event.prototype = {
        toString: function(){
            return "[object Event]"
        },
        preventDefault: function() {
            this.defaultPrevented = true;
            var e = this.originalEvent || {};
            if (e && e.preventDefault ) {
                e.preventDefault();
            }// 如果存在returnValue 那么就将它设为false
            e.returnValue = false;
            return this;
        },
        stopPropagation: function() {
            var e = this.originalEvent || {};
            if (e && e.stopPropagation ) {
                e.stopPropagation();
            } 
            //http://opera.im/kb/userjs/
            e.cancelBubble = this.propagationStopped = true;
            return this;
        },
        stopImmediatePropagation: function() {
            this.isImmediatePropagationStopped = true;
            this.stopPropagation();
            return this;
        }
    }
    $.Event = Event;
    $.mix(facade,{
        //addEventListner API的支持情况:chrome 1+ FF1.6+	IE9+ opera 7+ safari 1+;
        //http://functionsource.com/post/addeventlistener-all-the-way-back-to-ie-6
        bind: function( target, hash ){//事件系统三大核心方法之一，绑定事件
            var bindTarget =  $[ "@bind" ] in target,//是否能直接绑定到目标对象上
            data = $._data( target ),              //是否能绑定事件
            types  = hash.type,                      //原有的事件类型,可能是复数个
            live   = hash.live;                      //是否使用事件代理
            if( !data ){
                return
            }
            if( bindTarget ){                       //处理DOM的hover事件
                types = types.replace( rhoverHack, "mouseover$1 mouseout$1" );
            }
            var events = data.events || (data.events = []);
            hash.uuid = $.getUid( hash.fn );       //确保hash.uuid与fn.uuid一致
            types.replace( $.rword, function( t ){
                var desc = new $.Event( t, live), type = desc.origType;
                $.mix(desc, {
                    currentTarget: target,          //this,用于绑定数据的
                    index:  events.length           //记录其在列表的位置，在卸载事件时用
                }, hash, false);
                events.push( desc );               //用于事件拷贝
                var count = events[ type+"_count" ] = ( events[ type+"_count" ] | 0 )+ 1;
                var hack = adapter[ desc.type ] || {};
                if(hack.add){
                    hack.add(desc)
                }
                if( count == 1 ){
                    var handle = data[type+"_handle"] = facade.curry( desc );     //  一个curry
                    if( !hack.setup || hack.setup( desc ) === false  ) {
                        if( bindTop && !bindTarget  ){//如果不能绑到当前对象上,尝试绑到window上
                            target = window;
                        }
                        //此元素在此事件类型只绑定一个回调
                        $.bind(target, desc.type, handle);
                    }
                }
            });
        },

        curry: function( hash ){// 这是元信息,不要污染这个对象
            var fn =  function( event){//真正的事件对象
                var type = hash.origType;//用户在调用API时绑定的事件
                var ctarget = hash.currentTarget//原来绑定事件的对象
                var more = event.more || {};
                //第一个分支防止在旧式IE下,fire click时二次触发 
                //第二个分支防止在chrome下,fire mouseover时,把用于冒充mouseenter用的mouseover也触发了
                if(facade.type == type || more.origType && more.origType !== type ){
                    return
                }
                var queue = ( $._data( ctarget, "events") || [] );
                //如果是自定义事件, 或者旧式IE678, 或者需要事件冒充
                if( !event.originalEvent || !bindTop || hash.type !== type ){
                    event = facade.fix( hash, event, type );
                }
                var args = [ event ].concat( event.args ||  [] ), result,lives = [],  handlers = []
                for ( var i = 0, desc; desc = queue[i++]; ) {
                    if(desc.live){
                        lives.push(desc)
                    }else{
                        handlers.push(desc)
                    }
                }
                //DOM树的每一个元素都有可以作为代理节点
                if ( lives.length && !(event.button && type === "click") ) {
                    for ( var k = 0, cur; (cur = lives[k++]) ; ) {
                        var cc = cur.currentTarget
                        var nodes = $(cc).find(cur.live);
                        for(var node = event.target; node != cc; node = node.parentNode || cc ){
                            if ( node.disabled !== true || type !== "click" ) {
                                if( nodes.index(node) !== -1){
                                    handlers.push({
                                        elem: node,
                                        fn:   cur.fn,
                                        origType: cur.origType,
                                        ns:   cur.ns
                                    });
                                }
                            }
                        }
                    }
                }

                for ( var i = 0, desc; desc = handlers[i++]; ) {
                    if ( ( event.type == desc.origType ) &&
                        (!event.rns || event.rns.test( desc.ns )) ) {
                        //谁绑定了事件,谁就是事件回调中的this
                        if(desc.preHandle && desc.preHandle(desc.elem || ctarget, event, desc) === false){
                            return
                        }
                        result = desc.fn.apply( desc.elem || ctarget, args);
                        if(desc.postHandle && desc.postHandle(desc.elem || ctarget, event, desc) === false){
                            return
                        }
                        desc.times--;
                        if(desc.times === 0){//如果有次数限制并到用光所有次数，则移除它
                            facade.unbind( this, desc)
                        }
                        if ( result !== void 0 ) {
                            event.result = result;
                            if ( result === false ) {
                                event.preventDefault();
                                event.stopPropagation();//这个参照jQuery的行为办事
                            }
                        }
                        if ( event.propagationStopped ) {
                            break;
                        }
                    }
                }

            }
            return fn;
        },
        dispatch: function( target, event, type ){// level2 API 用于旧式的$.event.fire中
            var handle = $._data(target, (type || event.type) +"_handle" );//取得此元素此类型的第一个quark
            handle && handle.call( target, event )
        },
        //将真事件对象的成员赋给伪事件对象，抹平浏览器差异
        fix: function( event, real, type){
            if( !event.originalEvent ){
                var hash = event, toString = hash.toString;//IE无法遍历出toString;
                event = $.Object.merge({}, hash);//这里event只是一个伪事件对象
                for( var p in real ){
                    if( !(p in hash) ){
                        event[p] = real[p]
                    }
                }
                for( var p in real.more ){
                    if( !(p in hash) ){
                        event[p] = real.more[p]
                    }
                }
                event.toString = toString;
                event.originalEvent = real;
                event.timeStamp = Date.now();
                //如果不存在target属性，为它添加一个
                if ( !event.target ) {
                    event.target = event.srcElement || document;
                }
                //safari的事件源对象可能为文本节点，应代入其父节点
                if ( event.target.nodeType === 3 ) {
                    event.target = event.target.parentNode;
                }
                event.metaKey = !!event.ctrlKey; // 处理IE678的组合键

                if( /^(?:mouse|contextmenu)|click/.test( type ) ){
                    if ( event.pageX == null && event.clientX != null ) {  // 处理鼠标事件
                        var doc = event.target.ownerDocument || document;
                        var box = document.compatMode == "BackCompat" ?  doc.body : doc.documentElement
                        event.pageX = event.clientX + (box && box.scrollLeft  || 0) - (box && box.clientLeft || 0);
                        event.pageY = event.clientY + (box && box.scrollTop   || 0) - (box && box.clientTop  || 0);
                    }
                    //如果不存在relatedTarget属性，为它添加一个
                    if ( !event.relatedTarget && event.fromElement ) {
                        event.relatedTarget = event.fromElement === event.target ? event.toElement : event.fromElement;
                    }
                    //标准浏览判定按下鼠标哪个键，左1中2右3
                    var button = event.button
                    //IE event.button的意义 0：没有键被按下 1：按下左键 2：按下右键 3：左键与右键同时被按下 4：按下中键 5：左键与中键同时被按下 6：中键与右键同时被按下 7：三个键同时被按下
                    if ( !event.which && isFinite(button) ) {
                        event.which  = [0,1,3,0,2,0,0,0][button];//0现在代表没有意义
                    }
                    if( type === "mousewheel" ){ //处理滚轮事件
                        if ("wheelDelta" in real){//统一为±120，其中正数表示为向上滚动，负数表示向下滚动
                            // http://www.w3help.org/zh-cn/causes/SD9015
                            var delta = real.wheelDelta
                            //opera 9x系列的滚动方向与IE保持一致，10后修正
                            if( window.opera && opera.version() < 10 )
                                delta = -delta;
                            event.wheelDelta = Math.round(delta); //修正safari的浮点 bug
                        }else if( "detail" in real ){
                            event.wheelDelta = -real.detail * 40;//修正FF的detail 为更大众化的wheelDelta
                        }
                    }
                }else if ( event.which == null ) {//处理键盘事件
                    event.which = event.charCode != null ? event.charCode : event.keyCode;
                }else if( window.Touch && event.touches && event.touches[0] ){
                    event.pageX = event.touches[0].pageX//处理触摸事件
                    event.pageY = event.touches[0].pageY
                }
            }
            if( type ){
                event.type = type
            }
            return event;
        },
        //外部的API已经确保typesr至少为空字符串
        unbind: function( target, hash ) {//事件系统三大核心方法之一，卸载事件
            var events = $._data( target, "events");
            if( !events ) return;
            var types = hash.type || "", live = hash.live, bindTarget = $["@bind"] in target;
            if( bindTarget ){ //处理DOM的hover事件
                types = types.replace( rhoverHack, "mouseover$1 mouseout$1" );
            }
            types.replace( $.rword, function( t ){
                var desc = new $.Event( t, live ), type = desc.origType, hack = adapter[ type ] || {};
                findHandlers( events, desc , hash.fn, live ).forEach( function(desc){
                    if( --events[type+"_count"] == 0 ){
                        if( !hack.teardown || hack.teardown( desc ) === false  ) {
                            if( bindTarget === false && bindTop ){//如果不能绑到当前对象上,尝试绑到window上
                                target = window;
                            }
                            var handle = $._data(target, type+"_handle");
                            $.unbind( target, desc.type, handle );
                        }
                        $.removeData( target, type +"_handle", true );
                        delete events[ type+"_count"];
                    }
                    events[ desc.index ] = null;
                })
            });
            for ( var i = events.length; i >= 0; i-- ) {
                if (events[i] == null){
                    events.splice(i, 1);
                }
            }
            if( !events.length ){
                $.removeData( target, "events") ;
            }
        }
    })
    var unbubbleEvents = $.oneObject("load unload focus blur mouseenter mouseleave",1)
    if( bindTop ){//事件系统三大核心方法之一，触发事件
        facade.fire = function( type ){
            var bindTarget = $["@bind"] in this, more, event
            var target = bindTarget ? this : window;
            if(typeof type == "string"){
                more = new Event( type );
            }else if(type && type.preventDefault){
                if(!( type instanceof $.Event) ){//如果是真的事件对象
                    more = new Event( type.type );
                    event = type;
                }else{
                    more = type;//如果是$.Event实例
                }
            }
            if( more ){
                type = more.type;
                var doc = target.ownerDocument || target.document || target || document;
                if(!event){
                    event = doc.createEvent(eventMap[type] || "CustomEvent");
                    event.initEvent( type,!unbubbleEvents[type],true, doc.defaultView, 1);//, doc.defaultView
                }
                event.args = [].slice.call( arguments, 1 ) ;
                event.more = more
                target.dispatchEvent(event);
                if(/^(focus|blur|select|reset)$/.test(type)){
                    target[type] && target[type]()
                }
            }else{
                throw "fire的第一个参数是必须是事件类或真伪事件对象 "
            }
        }
    }
    var rmapper = /(\w+)_(\w+)/g;
    //以下是用户使用的API
    $.implement({
        hover: function( fnIn, fnOut ) {
            return this.mouseenter( fnIn ).mouseleave( fnOut || fnIn );
        },
        delegate: function( selector, types, fn, times ) {
            return this.on( types, selector, fn, times);
        },
        live: function( types, fn, times ) {
            $( this.ownerDocument ).on( types, this.selector, fn, times );
            return this;
        },
        one: function( types, fn ) {
            return this.on( types, fn, 1 );
        },
        undelegate: function(selector, types, fn ) {/*顺序不能乱*/
            return arguments.length == 1 ? this.off( selector, "**" ) : this.off( types, fn, selector );
        },
        die: function( types, fn ) {
            $( this.ownerDocument ).off( types, fn, this.selector || "**", fn );
            return this;
        },
        fire: function() {
            var args = arguments;
            return this.each(function() {
                $.event.fire.apply(this, args );
            });
        }
    });

    //这个迭代器产生四个重要的事件绑定API on off bind unbind
    var rtypes = /^[a-z0-9_\-\.\s\,]+$/i
    "on_bind,off_unbind".replace( rmapper, function(_,method, mapper){
        $.fn[ method ] = function(types, selector, fn ){
            if ( typeof types === "object" ) {
                for ( var type in types ) {
                    $.fn[ method ](this, type, selector, types[ type ], fn );
                }
                return this;
            }
            var hash = {};
            for(var i = 0 ; i < arguments.length; i++ ){
                var el = arguments[i];
                if(typeof el == "number"){
                    hash.times = el;
                }else if(typeof el == "function"){
                    hash.fn = el
                }
                if(typeof el === "string"){
                    if(hash.type != null){
                        hash.live = el.trim();
                    }else{
                        hash.type = el.trim();//只能为字母数字-_.空格
                        if(!rtypes.test(hash.type)){
                            throw "事件类型格式不正确"
                        }
                    }
                }
            }
            if(!hash.type){
                throw "必须指明事件类型"
            }
            if(method === "on" && !hash.fn ){
                throw "必须指明事件回调"
            }
            hash.times = hash.times > 0  ? hash.times : Infinity;
            return this.each(function() {
                facade[ mapper ]( this, hash );
            });
        }
        $.fn[ mapper ] = function(){// $.fn.bind $.fn.unbind
            return $.fn[ method ].apply(this, arguments );
        }
    });
    var mouseEvents =  "contextmenu,click,dblclick,mouseout,mouseover,mouseenter,mouseleave,mousemove,mousedown,mouseup,mousewheel,"
    var eventMap = $.oneObject(mouseEvents, "MouseEvents");
    var types = mouseEvents +",keypress,keydown,keyup," + "blur,focus,focusin,focusout,"+
    "abort,error,load,unload,resize,scroll,change,input,select,reset,submit"//input
    types.replace( $.rword, function( type ){//这里产生以事件名命名的快捷方法
        eventMap[type] = eventMap[type] || (/key/.test(type) ? "KeyboardEvent" : "HTMLEvents")
        $.fn[ type ] = function( callback ){
            return callback?  this.bind( type, callback ) : this.fire( type );
        }
    });
    /**
mouseenter/mouseleave/focusin/focusout已为标准事件，经测试IE5+，opera11,FF10+都支持它们
详见http://www.filehippo.com/pl/download_opera/changelog/9476/
         */
    if( !+"\v1" || !$.eventSupport("mouseenter")){//IE6789不能实现捕获与safari chrome不支持
        "mouseenter_mouseover,mouseleave_mouseout".replace(rmapper, function(_, type, mapper){
            adapter[ type ]  = {
                add: function(desc){
                    desc.preHandle = function(target, event){
                        var related = event.relatedTarget;
                        return !related || (related !== target && !$.contains( target, related ))
                    }
                }
            };
            if(!$.eventSupport("mouseenter")){
                adapter[ type ].bindType =  adapter[ type ].delegateType = mapper
            }

        });
    }

    //现在只有firefox不支持focusin,focusout事件,并且它也不支持DOMFocusIn,DOMFocusOut,不能像DOMMouseScroll那样简单冒充
    if( !$.support.focusin ){
        "focusin_focus,focusout_blur".replace(rmapper, function(_,type, mapper){
            var notice = 0, handler = function (event) {
                var src = event.target;
                do{//模拟冒泡
                    if( $._data(src, "events") ) {
                        event.more = event.more ||{}
                        event.more.type = type
                        facade.dispatch( src, event, type );
                    }
                } while (src = src.parentNode );
            }
            adapter[ type ] = {
                setup: function( ) {
                    if ( notice++ === 0 ) {
                        document.addEventListener( mapper, handler, true );
                    }
                },
                teardown: function() {
                    if ( --notice === 0 ) {
                        document.removeEventListener( mapper, handler, true );
                    }
                }
            };
        });
    }
    try{
        //FF需要用DOMMouseScroll事件模拟mousewheel事件
        document.createEvent("MouseScrollEvents");
        adapter.mousewheel = {
            bindType    : "DOMMouseScroll",
            delegateType: "DOMMouseScroll"
        }
        if($.eventSupport("mousewheel")){
            delete adapter.mousewheel;
        }
    }catch(e){};
})

event_fix模块，重构更多！

//=========================================
//  事件补丁模块
//==========================================
define("event_fix", !!document.dispatchEvent, function(){
    $.log("已加载event_fix模块",7)
    var facade = $.event = {
        fire: function( init ){
            //这里的代码仅用于IE678
            var transfer;
            if( typeof init == "string"){
                transfer = new $.Event(init);
                init = false;
            }
            if( init && typeof init == "object"){
                if( init instanceof $.Event ){//如果是伪的
                    transfer = init;
                }else if( "cancelBubble" in init){
                    transfer = new $.Event(init.type);
                    transfer.originalEvent = init
                }
            }
            if(!transfer){
                throw "fire的第一个参数是必须是事件类或真伪事件对象"
            }
            transfer.target = this;
            transfer.args = [].slice.call(arguments,1) ;
            var type =  transfer.origType || transfer.type
            if( $["@bind"] in this ){
                var cur = this,  ontype = "on" + type;
                do{//模拟事件冒泡与执行内联事件
                    facade.dispatch( cur, transfer, type );
                    if (cur[ ontype ] && cur[ ontype ].call(cur) === false) {
                        transfer.preventDefault();
                    }
                    cur = cur.parentNode ||
                    cur.ownerDocument ||
                    cur === cur.ownerDocument && window;  //在opera 中节点与window都有document属性
                } while ( cur && !transfer.propagationStopped );

                if ( !transfer.defaultPrevented ) {//如果用户没有阻止普通行为，defaultPrevented
                    if( !(type === "click" && this.nodeName === "A") ) { //并且事件源不为window，并且是原生事件
                        if ( ontype && this[ type ] && ((type !== "focus" && type !== "blur") || this.offsetWidth !== 0) &&  !this.eval ) {
                            var inline = this[ ontype ];
                            //当我们直接调用元素的click,submit,reset,focus,blur
                            //会触发其默认行为与内联事件,但IE下会再次触发内联事件与多投事件
                            this[ ontype ] = null;
                            facade.type = type
                            if(type == "click" && /checkbox|radio/.test(this.type)){
                                this.checked = !this.checked
                            }
                            this[ type ]();
                            facade.type = void 0
                            this[ ontype ] = inline;
                        }
                    }

                }

            }else{//普通对象的自定义事件
                facade.dispatch(this, transfer);
            }
        }
    }
    //模拟IE678的reset,submit,change的事件代理
    var rform  = /^(?:textarea|input|select)$/i 
    function changeNotify( event ){
        if( event.type == "change" || event.propertyName == "checked" ){
            $.event.fire.call(this,"change")
        }
    }
    function delegate( fn ){
        return function( item ){//用于判定是否要使用代理
            return item.live  ? fn( item.currentTarget, item ) : false;
        }
    }
    var adapter = $.eventAdapter = {
        focus: {
            delegateType: "focusin"
        },
        blur: {
            delegateType: "focusout"
        },
        change: {//change事件的冒泡情况 IE6-9全灭
            //详见这里https://github.com/RubyLouvre/mass-Framework/issues/13
            setup: delegate(function( node, desc ){
                var subscriber = desc.subscriber || ( desc.subscriber = {}) //用于保存订阅者的UUID
                desc.__beforeactive__ = $.bind( node, "beforeactivate", function(event) {
                    var target = event.srcElement;
                    var tid = $.getUid( target )
                    //如果发现孩子是表单元素并且没有注册propertychange事件，则为其注册一个，那么它们在变化时就会发过来通知顶层元素
                    if ( rform.test( target.tagName) && !subscriber[ tid ] ) {
                        subscriber[ tid ] = target;//将select, checkbox, radio, text, textarea等表单元素注册其上
                        if(/checkbox|radio/.test(target.type)){
                            desc.__change__ = $.bind( target, "propertychange", changeNotify.bind(target, event) );
                        }else{
                            desc.__change__ = $.bind( target, "change", changeNotify.bind(target, event) );
                        }
                    }
                });//如果是事件绑定
            // node.fireEvent("onbeforeactivate")
            }),
            teardown: delegate(function( node, desc ){
                $.unbind( node, "beforeactive", desc.__beforeactive__ );
                var els = desc.subscriber ;
                for(var i in els){
                    $.unbind( els[i], "propertychange",  desc.__change__) ;
                    $.unbind( els[i], "change",  desc.__change__);
                }
            })
        }
    }
    //submit事件的冒泡情况----IE6-9 :form ;FF: document; chrome: window;safari:window;opera:window
    //同reset事件的冒泡情况----FF与opera能冒泡到document,其他浏览器只能到form
    "submit,reset".replace( $.rword, function( type ){
        adapter[ type ] = {
            setup: delegate(function( node ){
                $(node).bind( "click._"+type+" keypress._"+type, function( event ) {
                    var el = event.target;
                    if( el.form && (adapter[ type ].keyCode[ event.which ] || adapter[ type ].input[  el.type ] ) ){
                        $.event.fire.call(el, type)
                    }
                });
            }),
            keyCode: $.oneObject(type == "submit" ? "13,108" : "27"),
            input:  $.oneObject(type == "submit" ? "submit,image" : "reset"),
            teardown: delegate(function( node ){
                $( node ).unbind( "._"+type );
            })
        };
    });
})