欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-21 18:41:37
绑定事件 eu.addhandler = function(element,type,handler){ //dom2级事件处理,ie9也支持 i...

绑定事件

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