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

更新時間：2016年05月20日 17:13:05 作者：云賢力

首先值得說一下,在事件處理、事件對象、阻止事件的傳播等方法或?qū)ο蟠嬖谥鵀g覽器兼容性問題,開發(fā)過程中最好編寫成一個通用的事件處理工具,嗯,接下來我們一起來看一下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必須與綁定事件時傳入的相同（指向同一個函數(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);
  }
}

跨瀏覽器阻止默認行為

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
        }
      }
    },

您可能感興趣的文章: