<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>