JavaScript中的跨浏览器事件操作的基本方法整理

绑定事件

EU.addHandler = function(element,type,handler){  //DOM2级事件处理，IE9也支持  if(element.addEventListener){    element.addEventListener(type,handler,false);  }  else if(element.attachEvent){    //type加'on'    //IE9也可以这样绑定    element.attachEvent('on' + type,handler);  }  //DOM0级事件处理步，事件流也是冒泡  else{    element['on' + type] = handler;  }};

取消绑定事件

和绑定事件的处理基本一致，有一个注意点：

传入的handler必须与绑定事件时传入的相同（指向同一个函数）

EU.removeHandler = function(element,type,handler){  if(element.removeEventListener){    element.removeEventListener(type,handler);  }  else if(element.attachEvent){    element.detachEvent('on' + type,handler);  }  else{    //属性置空就可以    element['on' + type] = null;  }};

跨浏览器添加事件

 function addEvent(obj,type,fn){    if(obj.addEventListener){      obj.addEventListener(type,fn,false);    }else if(obj.attachEvent){//IE      obj.attchEvent('on'+type,fn);    }  }

跨浏览器移除事件

function removeEvent(obj,type,fn){  if(obj.removeEventListener){    obj.removeEventListener(type,fn,false);  }else if(obj.detachEvent){//兼容IE    obj.detachEvent('on'+type,fn);  }}

跨浏览器阻止默认行为

function preDef(ev){    var e = ev || window.event;    if(e.preventDefault){      e.preventDefault();    }else{      e.returnValue =false;    }  }

跨浏览器获取目标对象

function getTarget(ev){  if(ev.target){//w3c    return ev.target;  }else if(window.event.srcElement){//IE    return window.event.srcElement;  }}  

跨浏览器获取滚动条位置

//跨浏览器获取滚动条位置，sp == scroll position  function getSP(){    return{      top: document.documentElement.scrollTop || document.body.scrollTop,      left : document.documentElement.scrollLeft || document.body.scrollLeft;    }  }

跨浏览器获取可视窗口大小

    function getWindow () {      if(typeof window.innerWidth !='undefined') {        return{          width : window.innerWidth,          height : window.innerHeight        }      } else{        return {          width : document.documentElement.clientWidth,          height : document.documentElement.clientHeight        }      }    },