JavaScript中的跨瀏覽器事件操作的基本方法整理

    首先值得說一下,在事件處理、事件對(duì)象、阻止事件的傳播等方法或?qū)ο蟠嬖谥鵀g覽器兼容性問題,開發(fā)過程中最好編寫成一個(gè)通用的事件處理工具,嗯,接下來我們一起來看一下JavaScript中的跨瀏覽器事件操作的基本方法整理
    綁定事件
    EU.addHandler = function(element,type,handler){
      //DOM2級(jí)事件處理，IE9也支持
      if(element.addEventListener){
        element.addEventListener(type,handler,false);
      }
      else if(element.attachEvent){
        //type加'on'
        //IE9也可以這樣綁定
        element.attachEvent('on' + type,handler);
      }
      //DOM0級(jí)事件處理步，事件流也是冒泡
      else{
        element['on' + type] = handler;
      }
    };
    取消綁定事件
    和綁定事件的處理基本一致，有一個(gè)注意點(diǎn)：
    傳入的handler必須與綁定事件時(shí)傳入的相同（指向同一個(gè)函數(shù)）
    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);
      }
    }
    跨瀏覽器阻止默認(rèn)行為
    function preDef(ev){
        var e = ev || window.event;
        if(e.preventDefault){
          e.preventDefault();
        }else{
          e.returnValue =false;
        }
      }
    跨瀏覽器獲取目標(biāo)對(duì)象
    function getTarget(ev){
      if(ev.target){//w3c
        return ev.target;
      }else if(window.event.srcElement){//IE
        return window.event.srcElement;
      }
    }  
    跨瀏覽器獲取滾動(dòng)條位置
    //跨瀏覽器獲取滾動(dòng)條位置，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
        }
      }
    },