Heim > Artikel > Web-Frontend > Ausführliche Erläuterung der plattformübergreifenden JavaScript-Ereignisdefinition und Anwendungsbeispiele

Ausführliche Erläuterung der plattformübergreifenden JavaScript-Ereignisdefinition und Anwendungsbeispiele

伊谢尔伦Original: 2017-07-22 15:43:511839Durchsuche

Plattformübergreifende Events

Was sind plattformübergreifende Events? Das heißt, die Ausführung desselben Ereignisses in verschiedenen Browsern erfordert unterschiedliche Methoden.

Was ist ein EventUtil-Objekt? Was macht es? Es handelt sich um einen Container, der alle ereignisbezogenen Funktionen integriert, um die Verwaltung von Ereignisobjekten zu erleichtern. Er verfügt über keine Attribute. Behandelt hauptsächlich die Integration von DOM-Ereignissen und IE-Ereignissen, um sie so ähnlich wie möglich zu machen.

Werfen wir zum Vergleich einen Blick auf die Objekteigenschaften und Methoden zwischen DOM und IE (hier weisen wir nur auf die unterschiedlichen Eigenschaften und Methoden zwischen den beiden hin:
). DOM-Attribute und -Methoden IE-Attribute und -Methoden srcobj
us Schauen Sie sich eine kleine Demo an, die das Problem der plattformübergreifenden Kompatibilität von Ereignissen sehr gut lösen kann:

Die obige Methode kann das Problem plattformübergreifender Ereignisse lösen. Schauen wir uns als Nächstes die Eigenschaften von charCode an.

Definieren Sie zunächst eine neue Methode für eventUtil, formatEvent, die einen Parameter akzeptiert, das Event-Objekt.

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

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der plattformübergreifenden JavaScript-Ereignisdefinition und Anwendungsbeispiele. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ausführliche Erläuterung vergleichender Anwendungsbeispiele von typeof und instanceof in JavaScriptNächster Artikel：Ausführliche Erläuterung vergleichender Anwendungsbeispiele von typeof und instanceof in JavaScript

In Verbindung stehende Artikel

Mehr sehen