AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

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

51自学网 http://www.wanshiok.com
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        }      }    },

       


JavaScript,跨浏览器,事件  
上一篇:如何用JavaScript实现动态修改CSS样式表  下一篇:用JavaScript动态建立或增加CSS样式表的实现方法