这几天要用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);
}
Tags: ie, Javascript, js

