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

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