/** @跨浏览器事件绑定,删除方法 @解决IE现代事件绑定几个问题 @1,重复绑定同一个处理函数不能过滤 @2,处理函数的执行顺序问题 @3,处理函数内this的指向问题 @4,事件对象的不统一问题(添加了常用的W3C事件对象) @添加方法:addEvent(obj,type,fn); @删除方法:removeEvent(obj,type,fn); @name:杨永,qq:377746756,call:18911082352 */ function addEvent(obj,type,fn){ //w3c if(obj.addEventListener){ obj.addEventListener(type,fn,false); }else{ //如果IE就创建一个存放事件的哈希表 if(!obj.events){ obj.events={}; }; //如果事件类型的哈希表不存在处理函数,创建一个存放处理函数的数组 if(!obj.events[type]){ obj.events[type]=[]; }; //如果此对象不存在对应事件类型的处理函数,就默认放置到第一个位置 if(!obj["on"+type]){ obj.events[type][0]=fn; }else{; //如果重复添加同一个处理函数,就过滤 if(addEvent.exec(obj.events[type],fn)){return false}; //如果存在就依次添加计数器来保存所以后续的处理函数 obj.events[type][addEvent._id_++]=fn; }; //最后执行所有事件处理函数 obj["on"+type]=function(){ for(var i in obj.events[type]){ //对象冒充解决this和传递事件对象 obj.events[type][i].call(obj,addEvent.fixEvt(event)); }; }; }; }; //用来添加事件时记录处理函数的id addEvent._id_=1; addEvent.exec=function(events,fn){ for(var i in events){ if(events[i]==fn){return true}; }; return false; }; //标准化事件对象 addEvent.fixEvt=function(evt){ if(!evt.preventDefault){ //取消事件默认行为 evt.preventDefault=function(){ evt.returnValue=false; }; //取消事件冒泡 evt.stopPropagation=function(){ evt.cancelBubble=true; }; evt.layerX=evt.offsetX+evt.srcElement.clientLeft; evt.layerY=evt.offsetY+evt.srcElement.clientTop; evt.target=evt.srcElement; if(evt.type=="mouseover"){ evt.relatedTarget=evt.fromElement; }else if(evt.type=="mouseout"){ evt.relatedTarget=evt.toElement; }; evt.pageX=document.documentElement.scrollLeft+evt.clientX; evt.pageY=document.documentElement.scrollTop+evt.clientY; }; return evt; }; //删除事件 function removeEvent(obj,type,fn){ //w3c if(obj.removeEventListener){ obj.removeEventListener(type,fn); }else{ //ie for(var i in obj.events[type]){ if(obj.events[type][i]==fn){ obj.events[type].splice(i,1); }; }; }; };
使用方式:
addEvent(window,"load",function(){ var oDiv=document.getElementById("oDiv"); addEvent(oDiv,"click",function(e){ alert(e); //弹出事件对象 alert(this); //弹出oDiv }); });