让ie支持DOM2事件模型写法

这几天要用js做点东西,又不用现成的框架。 习惯了as3的语法,对ie的window.evnet事件机制忒不习惯。敲了一些代码,让ie8支持dom2事件模型,当然只是泡冒模型。

function $(s){ if(window.container==undefined){ window.container=new Object();//空器,让每个$("id")同一id得到是同一个 } if(window.container[s]==undefined){ obj=document.getElementById(s); window.container[s]=obj; if(getBrowser("MSIE")){ obj.eventListeners=new Array();  //事件列表容器 obj.addEvent=function(action,obj,bubble,fun){//委托处理事件 var delegate=function(){ window.event.cancelBubble=bubble; //丢出事件 var evt=new Event(action,window.event.srcElement,obj,bubble); if(action=="onmouseover"){ evt.relatedTarget=window.event.fromElement; }else if(action=="onmouseout"){ evt.relatedTarget=window.event.toElement; } evt.clientX=window.event.clientX; evt.clientY=window.event.clientY; evt.screenX=window.event.screenX; evt.screenY=window.event.screenX; fun(evt); } obj.eventListeners.push({func:fun,delegateFunc:delegate}); return delegate; } obj.addEventListener=function(action,fun,bubble){//给对象增加addEventListener方法 action="on"+action; obj.attachEvent(action,obj.addEvent(action,obj,bubble,fun)); } obj.removeEventListener=function(action,fun,bubble){//给对象增加removeEventListener方法 for(var i=0;i<obj.eventListeners.length;i++){ if(obj.eventListeners[i].func==fun){ action="on"+action; obj.detachEvent(action,obj.eventListeners[i].delegateFunc); } } } return obj; }else{ //非IE浏览器,只测了FF,google的 var obj=document.getElementById(s); obj.contains=function(tgt){//contains方法很实用,flash as里也有,就给添加一个。 while(tgt!=null&&typeof(tgt.tagName)!="undefind"){ if(tgt==this){return true}; tgt=tgt.parentNode; } return false; } return obj; } }else{ return window.container[s]; } }

//判断是否是指定浏览器

function getBrowser(browserType){ var browser=navigator.userAgent; if (browser.indexOf(browserType)>0){ return true; } }

//事件"类"

function Event(type,target,currentTarget,bubble){ this.currentTarget=currentTarget; this.type=type; this.target=target; this.bubble=bubble; this.toString=function(){ return "[Event type="+type+" bubble="+bubble+" target:"+target.name+" currentTarget="+currentTarget.name+"]"; } }

先这样了,有空再优化扩展一下。 应用例子:

$("div1").addEventListener("mouseover",eventover,false); $("div1").addEventListener("mouseout",eventout,false); function eventover(e){ if(!e.currentTarget.contains(e.relatedTarget)){ alert("in"); } } function eventout(e){ if(!e.currentTarget.contains(e.relatedTarget)){ alert("out"); } } function cancel(){ $("div1").removeEventListener('mouseout',eventout,false); $("div1").removeEventListener('mouseover',eventover,false); }