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

2022-10-18,,,,

绑定事件

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中的跨浏览器事件操作的基本方法整理.doc》

下载本文的Word格式文档,以方便收藏与打印。