mass Framework emitter模块

此模块用于提供自定义事件,并把实现此接口的对象变成一个事件发送器。

//==================================================
// 事件发送器模块
//==================================================
(function(global,DOC){
    var dom = global[DOC.URL.replace(/(#.+|\W)/g,'')];
    dom.define("emitter","data", function(){
        var fireType = "", blank = ""
        var ensure = function(array,neo){
            var obj = {}
            for(var i=0,el;el = array[i++];){
                obj[ el.uuid ] =1
            }
            if(!obj[neo.uuid]){
                array.push(neo)
            };
        }
        var events = dom.events = {
            special:{},//用于处理个别的DOM事件
            bind : function(type, callback, phase){
                //它将在原生事件发送器或任何能成为事件发送器的普通JS对象添加一个名叫uniqueID的属性,用于关联一个缓存体,
                //把需要的数据储存到里面,而现在我们就把一个叫@events的对象储放都它里面,
                //而这个@event的表将用来放置各种事件类型与对应的回调函数
                var target = this, table = dom.data( target,"@events") || dom.data( target,"@events",{});
                if(!table || !callback) return ;
                var bag = callback.callback ? callback :{
                    callback:callback,
                    uuid: dom.uuid++,
                    type:type
                }
                //确保UUID，bag与callback的UUID一致
                bag.callback.uuid = bag.uuid;
                //原生的DOM事件是不允许绑定同一个回调函数,详见下面的测试
                //  function callback(){  alert(1)  }
                //  document.addEventListener("click",callback,false)
                //  document.addEventListener("click",callback,false)
                type = bag.type;
                var queue = table[ type ] = table[ type ] ||  [];
                ensure(queue,bag);
                if(dom["@emitter"] in target){//如果是原生的事件发送体
                    var special = events.special[ bag.type ] , setup = events.setup, tag = "@"+type
                    if(special){
                        type = special.type || type
                        tag = (bag.live ? "@live_" :"@special_" )+type;
                        setup = bag.live ? special.liveSetup : special.setup
                    }
                    bag.tag = tag;
                    if(!table[tag]){
                        dom.log("setup "+type+" event...")
                        setup(target, type, events.handle, !!phase);
                        table[tag] = 1
                    }
                }
            },
  
            unbind:function(type ,bag, phase){
                var target = this, table = dom.data( target,"@events") ;
                if(!table) return;
                if(typeof type === "string"){//如果指定了要移除何种事件类型
                    type = bag && bag.type || type;
                    var queue = table[ type ];
                    if(queue){
                        var callback = bag.callback || bag;
                        queue =  callback ? table[type].filter(function(bag) {
                            return  bag.callback != callback;
                        }) : [];
                        if(dom["@emitter"] in target){//如果是原生的事件发送体
                            var special = events.special[ type ] ,  teardown = events.teardown, tag = "@"+type
                            if(special){
                                type = special.type || type
                                tag = (bag.live ? "@live_" :"@special_" )+type;
                                teardown = bag.live ? special.liveTeardown : special.teardown
                            }   
                            var length =  queue.filter(function(bag){
                                return bag.tag == tag
                            }).length;
                            if(!length){
                                teardown(target, type, events.handle, !!phase) ;
                                dom.log("teardown "+type+" event...")
                                delete table[tag]
                            }
                        }
                    }
                }else{
                    for (type in table ) {
                        if(type.charAt(0) !== "@")
                            events.unbind( target, type );
                    }
                }
            },
            fire:function(type){
                var target = this, table = dom.data( target,"@events") ,args = dom.slice(arguments,1), event
                if(!table) return;
                event = type instanceof jEvent ? type : new jEvent(type);
                event.target = target;
                event.fireArgs = args;
                if( dom["@emitter"] in target){
                    var cur = target,  ontype = "on" + type;
                    do{//模拟事件冒泡与执行内联事件
                        events.handle.call(cur, event);
                        if (cur[ ontype ] && cur[ ontype ].call(cur) === false) {
                            event.preventDefault();
                        }
                        cur = cur.parentNode ||
                        cur.ownerDocument ||
                        cur === target.ownerDocument && global;
                    } while (cur && !event.isPropagationStopped);
  
                    if (!event.isDefaultPrevented) {//模拟默认行为 click() submit() reset() focus() blur()
                        var old;
                        try {
                            if (ontype && target[ type ]) {
                                // 不用再触发内事件
                                old = target[ ontype ];
                                if (old) {
                                    target[ ontype ] = null;
                                }
                                fireType = type;
                                target[ type ]();
                            }
                        } catch (e) {
                            dom.log("dom.events.fire("+type+") throw errer " + e);
                        }
                        if (old) {
                            target[ ontype ] = old;
                        }
                        fireType = blank;
                    }
  
                }else{//普通对象的自定义事件
                    events.handle.call(target, event);
                }
            },
            filter:function(target, parent, expr){
                if(dom.contains(parent,target) ){
                    if(typeof expr === "function"  ){
                        return expr.call(target)
                    }else{
                        return dom.matchesSelector(target, expr) ;//需要travel模块
                    }
                }
            },
            handle: function( event ) {
                if(fireType === event.type)
                    return undefined;
                var queue = dom.data(this,"@events")[event.type];
                if (  queue ) {
                    if(!event.uuid){
                        event = events.fix(event);
                    }
                    event.currentTarget = this;
                    var emitter = event.target, result,
                    //取得参数（只有自定义才有多个参数）
                    args = "fireArgs" in event ? [event].concat(event.fireArgs) : arguments;
                    //复制数组以防影响下一次的操作
                    queue = queue.concat();
                    //开始进行拆包操作
                    for ( var i = 0, bag; bag = queue[i++]; ) {
                        //如果是事件代理，确保元素处于enabled状态，并且满足过滤条件
                        if(bag.live && emitter.disabled && !events.filter(emitter, this, bag.live) ){
                            continue;
                        }
                        //取得回调函数
                        result = bag.callback.apply( emitter, args );
                        if ( result !== undefined ) {
                            event.result = result;
                            if ( result === false ) {
                                event.preventDefault();
                                event.stopPropagation();
                            }
                        }
                        if ( event.isImmediatePropagationStopped ) {
                            break;
                        }
                    }
                }
                return event.result;
            },
  
            fix :function(event){
                if(event.uuid){
                    return event;
                }
                var originalEvent = event
                event = new jEvent(originalEvent);
                for(var prop in originalEvent){
                    if(typeof originalEvent[prop] !== "function"){
                        event[prop] = originalEvent[prop]
                    }
                }
                event.wheelDelta = 0;
                //mousewheel
                if ("wheelDelta" in originalEvent){
                    var detail = originalEvent.wheelDelta;
                    //opera 9x系列的滚动方向与IE保持一致，10后修正
                    if(global.opera && global.opera.version() < 10)
                        detail = -detail;
                    event.wheelDelta = Math.round(detail); //修正safari的浮点 bug
                }else {
                    //DOMMouseScroll
                    event.wheelDelta = -originalEvent.detail*40;
                }
                //如果不存在target属性，为它添加一个
                if ( !event.target ) {
                    // 判定鼠标事件按下的是哪个键，1 === left; 2 === middle; 3 === right
                    event.which  = event.button === 2 ? 3 : event.button === 4 ? 2 : 1;
                    event.target = event.srcElement;
                }
                //如果事件源对象为文本节点，则置入其父元素
                if ( event.target.nodeType === 3 ) {
                    event.target = event.target.parentNode;
                }
                //如果不存在relatedTarget属性，为它添加一个
                if ( !event.relatedTarget && event.fromElement ) {
                    event.relatedTarget = event.fromElement === event.target ? event.toElement : event.fromElement;
                }
  
                //如果不存在pageX/Y则结合clientX/Y做一双出来
                if ( event.pageX == null && event.clientX != null ) {
                    var html = dom.HTML, body = DOC.body;
                    event.pageX = event.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html && html.clientLeft || body && body.clientLeft || 0);
                    event.pageY = event.clientY + (html && html.scrollTop  || body && body.scrollTop  || 0) - (html && html.clientTop  || body && body.clientTop  || 0);
                }
                // 为键盘事件添加which事件
                if ( !event.which && ((event.charCode || event.charCode === 0) ? event.charCode : event.keyCode) ) {
                    event.which = event.charCode || event.keyCode;
                }
                // Add metaKey to non-Mac browsers (use ctrl for PC's and Meta for Macs)
                if ( !event.metaKey && event.ctrlKey ) {
                    event.metaKey = event.ctrlKey;
                }
                return event;
            },
  
            setup: dom.bind,
             
            teardown:DOC.dispatchEvent ? function(target, type, fn,phase){
                target.removeEventListener( type, fn,phase );
            } : function(target, type, fn)  {
                target.detachEvent( "on" + type, fn );
            }
        }
        function jEvent( event ) {
            this.originalEvent = event.substr ? {} : event
            this.type = event.type || event
            this.timeStamp = Date.now();
            this.uuid = dom.uuid++;
        };
        // http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-script-binding.html
        jEvent.prototype = {
            constructor:jEvent,
            //http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/events.html#Conformance
            toString:function(){
                return "[object Event]"
            },
            preventDefault: function() {
                this.isDefaultPrevented = true;
                var e = this.originalEvent;
                // 如果存在preventDefault 那么就调用它
                if ( e.preventDefault ) {
                    e.preventDefault();
                }
                // 如果存在returnValue 那么就将它设为false
                e.returnValue = false;
                return this;
            },
            stopPropagation: function() {
                this.isPropagationStopped = true;
                var e = this.originalEvent;
                // 如果存在preventDefault 那么就调用它
                if ( e.stopPropagation ) {
                    e.stopPropagation();
                }
                // 如果存在returnValue 那么就将它设为true
                e.cancelBubble = true;
                return this;
            },
            stopImmediatePropagation: function() {
                this.isImmediatePropagationStopped = true;
                this.stopPropagation();
                return this;
            }
        };
        //事件发射体emitter的接口
        //实现了这些接口的对象将具有注册事件和触发事件的功能
        dom.emitter = {};
        "bind,unbind,fire".replace(dom.rword,function(name){
            dom.emitter[name] = function(){
                events[name].apply(this, arguments);
                return this;
            }
        });
        dom.emitter.uniqueID = ++dom.uuid;
        dom.emitter.defineEvents = function(names){
            var events = [];
            if(typeof names == "string"){
                events = names.match(dom.rword);
            }else if(dom.isArray(names)){
                events = names;
            }
            events.forEach(function(name){
                var method = 'on'+name.replace(/(^|_|:)([a-z])/g,function($, $1, $2) {
                    return $2.toUpperCase();
                });
                if (!(method in this)) {
                    this[method] = function() {
                        return this.bind.apply(this, Array.prototype.concat.apply([name],arguments));
                    };
                }
            },this);
        }
    });
})(this,this.document);
//2011.8.14
//更改隐藏namespace,让自定义对象的回调函数也有事件对象
//2011.8.17
//事件发送器增加一个uniqueID属性
//2011.8.21
//重构bind与unbind方法

示例：

       dom.require("ready,class,emitter",function(){
        var A = dom.factory({
          include:dom.emitter,
          init:function(){
            this.defineEvents("click,mouseover")
          }
        });

        var a = new A;
        a.bind("click",function(){
          alert([].slice.call(arguments))//[object Event],1,2,3
        })
        a.fire("click",1,2,3);
        a.onMouseover(function(){
          alert("司徒正美")
        });
        a.fire("mouseover")
        dom.log(a)
      })

依次弹出两个窗口,第一个为"1,2,3",第二个为"司徒正美".在firebug下查看a实例的构造如下:

第二个例子,只依赖emitter模块.

      dom.require("emitter",function(){
        var a  = {};
        dom.mix(a,dom.emitter);
        a.bind("data",function(){
          alert("11111111")
        });
        a.bind("data",function(e){
          alert([].slice.call(arguments));//[object Event],3,5
          alert(e.type) //data
        });
        a.fire("data",3,5)
 
      });