JavaScript 크로스 플랫폼 이벤트 정의 및 사용 예에 대한 자세한 설명-JS 튜토리얼-php.cn

JavaScript 크로스 플랫폼 이벤트 정의 및 사용 예에 대한 자세한 설명

伊谢尔伦

풀어 주다： 2017-07-22 15:43:51

원래의

1881명이 탐색했습니다.

크로스 플랫폼 이벤트

크로스 플랫폼 이벤트란 무엇인가요? 즉, 서로 다른 브라우저에서 동일한 이벤트를 실행하면 서로 다른 방법이 사용됩니다.

EventUtil 개체란 무엇입니까? 그것은 무엇을 합니까? 이벤트 객체 관리를 용이하게 하기 위해 이벤트와 관련된 모든 기능을 통합한 컨테이너입니다. 주로 DOM 이벤트와 IE 이벤트의 통합을 처리하여 최대한 유사하게 만듭니다.

비교를 위해 DOM과 IE 사이의 개체 속성과 메서드를 살펴보겠습니다(여기서는 둘 사이의 서로 다른 속성과 메서드만 지적합니다). 5가지 주요 사항이 있습니다:
DOM 속성과 메서드 IE 속성과 메서드
문자코드 ,

간단한 데모를 살펴보겠습니다. 이벤트의 크로스 플랫폼 호환성 문제:

<html>
<head>
  <title>eventUtil</title>
  <script eventType="text/javascript">
    var eventUtil = {
      //监听事件
      addListener: function(obj, eventType, fn) {
        if (obj.addEventListener) {
          obj.addEventListener(eventType, fn, false);
        } else if (obj.attachEvent) {
          obj.attachEvent(&#39;on&#39; + eventType, fn);
        } else {
          obj[&#39;on&#39; + eventType] = fn;
        }
      },
      //返回event对象
      getEvent: function(event) {
        return event || window.event;
        //return event ? event : window.event;
      },
      //返回目标事件对象
      getTarget: function(event) {
        return event.target || event.srcobj;
      }，
      preventDefault: function(event) {
        if (event.preventDefault) {
          event.preventDefault();
        } else {
          event.returnValue = false;
        }
      },     
      removeListener: function(obj, eventType, fn) {
        if (obj.removeEventListener) {
          obj.removeEventListener(eventType, fn, false);
        } else if (obj.deattachEvent) {
          obj.detachEvent(eventType, fn);
        } else {
          obj[&#39;on&#39; + eventType] = null;
        }
      },
      
      stopPropagation: function(event) {
        if (event.stopPropagation) {
          event.stopPropagation();
        } else {
          event.cancelBubble = true;
        }
      }
    };
  </script>
</head>
<body>
  <input eventType="button" value="click me" id="btn" />
  <p>event</p>
  <a>Hello word!</a>
  <script eventType="text/javascript">
  function addBtnListen(event)
  {
    var event = eventUtil.getEvent(event);
    var target = eventUtil.getTarget(event);
    alert("my name is kock");
    alert(event.eventType);
    alert(target);
    eventUtil.stopPropagation(event);

  }
  function getBodyListen(event)
  {
      alert("click body");
  }
  function getLinkListen(event)
  {
       alert("prevent default event");
       var event = eventUtil.getEvent(event);
       eventUtil.preventDefault(event);
  }
  window.onload=function()
  {
      var btn = document.getobjById("btn");
      var link = document.getobjsByTagName("a")[0];
      eventUtil.addListener(btn, "click", addBtnListen);
      eventUtil.addListener(document.body, "click", getBodyListen);
      eventUtil.addListener(link, "click",getLinkListen);
  }   
</script>
</body>
</html>

로그인 후 복사

위의 방법으로 크로스 플랫폼 이벤트 문제를 해결할 수 있습니다. charCode의 속성을 살펴보겠습니다.

먼저 Event 개체인 하나의 매개변수를 허용하는 eventUtil, formatEvent에 대한 새 메서드를 정의합니다.

rreee

위 내용은 JavaScript 크로스 플랫폼 이벤트 정의 및 사용 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!