首先值得说一下,在事件处理、事件对象、阻止事件的传播等方法或对象存在着浏览器兼容性问题,开发过程中最好编写成一个通用的事件处理工具,嗯,接下来我们一起来看一下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

    }

  }

},