JavaScript经典案例

一、跨浏览器添加事件\移除

function addEvent(eventObj,tyoe,fn){
   if(eventObj.addEventListener){
       eventObj.addEventListener(type,fn,false)
   }else if(eventObj.attachEvent){
       eventObj.attachEvent('on'+type,fn)
   }
}

function removeEvent(eventObj,tyoe,fn){
 if(eventObj.removeEventListener){
       eventObj.removeEventListener(type,fn,false)
   }else if(eventObj.detachEvent){
       eventObj.detachEvent('on'+type,fn)
   }
}

一般浏览器：addEventListener,removeEventlistener;IE浏览器：attachEvent,detachEvent；并且添加的事件类型，IE浏览器需加前缀on

二、跨浏览器阻止默认行为

function prevent(ev){ 
    //取到事件对象
    var   e = ev||window.event;
    if(e.preventDefault){
       e.preventDefault()
    }else{
        e.returnValue = flase;//for IE
    }
}

三、跨浏览器获取目标对象

function getTarget(ev){ 
    //取到事件对象
    if(ev.target){
       return ev.target
    }else if(windoow.event.srcElement){
       return window.event.srcElement;//for IE
    }
}

四、阻止表单重复提交

1、提交之后禁用按钮

document.getElementByID("btn").disabled = true;

2、检测已经提交过，取消后续提交操作

var flag=false;
//提交后会将flag置为true
flag = true;
//之后再次点击提交按钮，判断flag是否为true
if(flag==true){
  return 
}

五、获取屏幕信息

scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。 
clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。无border 
offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。有border

1、如何算出浏览器的高度或宽度。

Width=document.documentElement.clientWidth||document.body.clientWidth

height=document.documentElement.clientHeight||document.body.clientHeight

2、屏幕宽度clientWidth和offsetWidth的区别是什么？

clientWidth=width+padding,offsetWidth=width+padding+border

3、如何算浏览器中当前显示的页面的中心点的位置

top=scrollHeight/2;left=scrollWidth/2