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

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

Binding events

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

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

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 작동 원리에 대한 자세한 분석 및 답변

js(JavaScript) 확인 오류를 제거하는 Eclipse 정보(자세한 답변)

JavaScript 기본 팁(그림 및 텍스트 튜토리얼) , 자세한 답변) )

위 내용은 JavaScript의 크로스 브라우저 이벤트(그래픽 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!