JavaScript의 크로스 브라우저 이벤트(그래픽 튜토리얼)-JS 튜토리얼-php.cn

JavaScript의 크로스 브라우저 이벤트(그래픽 튜토리얼)

亚连

풀어 주다： 2018-05-21 13:43:28

원래의

1118명이 탐색했습니다.

우선 이벤트 처리, 이벤트 객체, 이벤트 전파 방지 등 메서드나 객체에 브라우저 호환성 문제가 있다는 점을 언급할 가치가 있습니다. 개발 과정에서는 범용 이벤트 처리 도구를 작성하는 것이 가장 좋습니다. 자, 함께 해봅시다. JavaScript에서 크로스 브라우저 이벤트 작업의 기본 방법을 살펴보겠습니다.

Binding events

EU.addHandler = function(element,type,handler){
  //DOM2级事件处理，IE9也支持
  if(element.addEventListener){
    element.addEventListener(type,handler,false);
  }
  else if(element.attachEvent){
    //type加&#39;on&#39;
    //IE9也可以这样绑定
    element.attachEvent(&#39;on&#39; + type,handler);
  }
  //DOM0级事件处理步，事件流也是冒泡
  else{
    element[&#39;on&#39; + type] = handler;
  }
};

로그인 후 복사

Unbind events는 기본적으로 바인딩 이벤트와 동일합니다.
들어오는 핸들러는 이벤트를 바인딩할 때 전달된 것과 동일해야 합니다(동일한 함수를 가리킴)

EU.removeHandler = function(element,type,handler){
  if(element.removeEventListener){
    element.removeEventListener(type,handler);
  }
  else if(element.attachEvent){
    element.detachEvent(&#39;on&#39; + type,handler);
  }
  else{
    //属性置空就可以
    element[&#39;on&#39; + type] = null;
  }
};

로그인 후 복사

크로스 브라우저 추가 이벤트

  function addEvent(obj,type,fn){
    if(obj.addEventListener){
      obj.addEventListener(type,fn,false);
    }else if(obj.attachEvent){//IE
      obj.attchEvent(&#39;on&#39;+type,fn);
    }
  }

로그인 후 복사

크로스 브라우저 제거 이벤트

function removeEvent(obj,type,fn){
  if(obj.removeEventListener){
    obj.removeEventListener(type,fn,false);
  }else if(obj.detachEvent){//兼容IE
    obj.detachEvent(&#39;on&#39;+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 !=&#39;undefined&#39;) {
        return{
          width : window.innerWidth,
          height : window.innerHeight
        }

      } else{
        return {
          width : document.documentElement.clientWidth,
          height : document.documentElement.clientHeight
        }
      }
    },

로그인 후 복사

위는 모든 사람을 위해 편집한 것입니다. 앞으로 도움을 드릴 때 모든 사람에게 도움이 되기를 바랍니다.