event.js

<script>
(function(){
    var cache = {},
    guidCounter = 1,
    expando = "data" + (new Date).getTime();
    
    this.getData = function(elem){
        var guid = elem[expando];
        if(!guid){
            guid = elem[expando] = guidCounter++;
            cache[guid] = {};
        }
        return cache[guid];
    };
    
    this.removeData = function(elem){
        var guid = elem[expando];
        if(!guid) return;
        delete cache[guid];
        try{
            delete elem[expando];
        }catch(e){
            if(elem.removeAttribute){
                elem.removeAttribute(expando);
            }
        }
        
    };
})();

function fixEvent(event){
    function returnTrue(){return true;}
    
    function returnFalse(){return false;}
    
    if(!event || !event.stopPropagation){
        var old = event || window.event;
        //复制对象 从而让我们可以修改他的值
        event = {};
        for(var prop in old){
            event[prop] = old[prop];
        }
        
        //元素发生 的事件
        if(!event.target){
            event.target = event.srcElement || document;
        }
        
        //处理事件关联的是哪一个目标元素
        event.relatedTarget = event.fromElement === event.target ? event.toElement : event.fromElement;
        6
        //停止默认的浏览器行为
        event.preventDefault = function(){
            event.returnValue = false;
            event.isDefaultPrevented = returnTrue;
        };
        event.isDefaultPrevented = returnFalse;
        
        //stop the event from bubbling
        event.stopPropagation = function(){
            event.cacelBubble = true;
            event.isPropagationStopped = returnTrue;
        };
        event.isPropagationStopped = returnFalse;
        
        //stop the event from bubbling and executing other handlers
        event.stopImmeadiatePropagation = function(){
            this.isImmediatePropagationStoped = returnTrue;
            this.stopPropagation();
        };
        event.isImmediatePropagationStopped = returnFalse;
        
        //handle mouse position
        if(event.clientX != null){
            var doc = document.documentElement, body = document.body;
            
            event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
            event.pageY = event.clientX + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);
        }
        
        //handle key presses
        event.which = event.charCode || event.keyCode;
        //fix button for mouse clicks:
        // 0 == left; 1 == middle; 2 == right
        if(event.button != null){
            event.button = (event.button & 1 ? 0 : (event.button & 4 ? 1 : (event.button & 2 ? 2 : 0)));
        }
    }
    return event;
}

(function(){
    var nextGuid = 1;
    this.addEvent = function(elem,type,fn){
        var data = getData(elem);
        
        if(!data.handlers)data.handlers = {};
        
        if(!data.handlers[type])data.handlers[type] = [];
        
        if(!fn.guid) fn.guid = nextGuid++;
        
        data.handlers[type].push(fn);
        
        if(!data.dispatcher){
            data.disabled = false;
            data.dispatcher = function(event){
                if(data.disabled) return;
                event = fixEvent(event);
                
                var handlers = data.handlers[event.type];
                
                if(handlers){
                    for(var n = 0; n < handlers.length; n++){
                        handlers[n].call(elem,event);
                    }
                }
            };
        }
        
        if(data.handlers[type].length == 1){
            if(document.addEventListener){
                elem.addEventListener(type, data.dispatcher, false);
            }else if(document.attachEvent){
                elem.attachEvent("on" + type, data.dispatcher);
            }
        }
    }
})();

function tidyUp(elem,type){
    function isEmpty(object){
        for(var prop in object){
            return false;
        }
        return true;
    }
    
    var data = getData(elem);
    
    if(data.handlers[type].length === 0 ){
        delete data.handlers[type];
        
        if(document.removeEventListener){
            elem.removeEventListener(type,data.dispatcher,false);
        }else if(document.datachEvent){
            elem.datachEvent("on" + type,data.dispatcher);
        }
    }
    
    if(isEmpty(data.handlers)){
        delete data.handlers;
        delete data.dispatcher;
    }
    
    if(isEmpty(data)){
        removeData(elem);
    }
}

this.removeEvent = function(elem,type,fn){
    var data = getData(elem);
    
    if(!data.handlers) return;
    
    var removeType = function(t){
        data.handlers[t] = [];
        
        tidyUp(elem,t);
    };
    
    if(!type){
        for(var t in data.handlers)removeType(t);
        return;
    }
    
    var handlers = data.handlers[type];
    if(!handlers) return;
    
    if(!fn){
        removeType(type);
        return;
    }
    
    if(fn.guid){
        for(var n = 0; n < handlers.length; n++){
            if(handlers[n].guid === fn.guid){
                handlers.splice(n--,1);
            }
        }
    }
    tidyUp(elem,type);
};

addEvent(window,"load",function(){
    var subjects = document.getElementsByTagName("div");
    for(var i = 0; i < subjects.length; i++)(function(elem){
        addEvent(elem,"mouseover",function handler(e){
            this.style.backgroundColor = "red";
        });
        addEvent(elem,"click",function handler(e){
            this.style.backgroundColor = "green";
            removeEvent(elem,"click",handler);
        });
    })(subjects[i]);
});

</script>