Heim > Artikel > Web-Frontend > Zusammenfassung der Funktionsereignisse

Zusammenfassung der Funktionsereignisse

jackloveOriginal: 2018-05-21 15:42:341474Durchsuche

Beim Erlernen von Funktionen werden Sie auf viele Funktionsereignisse stoßen.

Was ist eine Veranstaltung?

Die Interaktion zwischen JavaScript und HTML wird durch Ereignisse erreicht. Ereignisse sind bestimmte Interaktionsmomente, die in einem Dokument oder Browserfenster auftreten. Sie können Listener (oder Handler) verwenden, um Ereignisse so zu planen, dass beim Eintreten des Ereignisses der entsprechende Code ausgeführt wird. Dieses Modell, in der traditionellen Softwareentwicklung als Observer-Muster bekannt, unterstützt eine lose Kopplung zwischen dem Verhalten der Seite (JavaScript) und dem Erscheinungsbild der Seite (HTML und CSS).

Ereignisfluss

Der Ereignisfluss beschreibt die Reihenfolge, in der Ereignisse von der Seite empfangen werden. Gehen Sie von folgendem Code aus:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body>
    <div id="div1"></div></body></html>

klickt auf das Div. Dieser Klick erfolgt nicht nur auf das Div, sondern es wird auch auf den übergeordneten Containerkörper geklickt. Wer wurde also zuerst angeklickt oder wie verbreitete sich das Ereignis? Der Ereignisstrom beschreibt eine solche Abfolge von Empfangsereignissen.

IE-Ereignisstrom (Ereignis-Bubbling)

Der IE-Ereignisstrom wird auch als Ereignis-Bubbling bezeichnet, d. h. das Ereignis wird vom spezifischsten Element (dem Knoten mit der tiefsten Verschachtelungsebene in der) empfangen Dokument) beim Start und wird dann Schritt für Schritt an weniger spezifische Knoten (Dokumente) weitergegeben.
Nehmen wir den obigen Code als Beispiel: Wenn Sie auf das div-Element klicken, wird das Klickereignis in der folgenden Reihenfolge weitergegeben:

1.<div>
2.<body>
3.<html>
4.document

Das heißt, das Klickereignis zuerst tritt auf dem div-Element auf. Dieses Element ist das Element, auf das wir geklickt haben, und dann breitet sich das Klickereignis entlang des DOM-Baums nach oben aus und tritt auf jeder Knotenebene auf, bis es auf das Dokumentobjekt übertragen wird.

Alle modernen Browser unterstützen das Event-Bubbling, es gibt jedoch einige Unterschiede. Beim Event-Bubbling in IE5.5 und früheren Versionen wird das HTML-Element übersprungen und direkt vom Textkörper zum Dokument weitergeleitet. IE9, Firefox, Chrome und Safari blasen das Ereignis bis zum Fensterobjekt. (Alte IE-Browser unterstützen nur Event-Bubbling).

Ereigniserfassung

Die Idee der Ereigniserfassung besteht darin, dass weniger spezifische Knoten Ereignisse früher und bestimmte Knoten Ereignisse zuletzt empfangen sollten, was genau das Gegenteil von Ereignissprudeln und höher ist Nehmen Sie das obige Beispiel als Beispiel: Klicken Sie auf das Div. Die Ereignisauslösesequenz der Ereigniserfassung lautet wie folgt:

1.document
2.<html>
3.<body>
4.<div>

Während des Ereigniserfassungsprozesses empfängt das Dokumentobjekt zuerst das Klickereignis und Dann wird das Ereignis entlang des DOM-Baums bis zum eigentlichen Ziel des Ereignisses weitergegeben.

IE9, Firefox, Chrome, Safari und Opera unterstützen alle die Ereigniserfassung. Obwohl die Ereignisspezifikation auf DOM2-Ebene erfordert, dass Ereignisse vom Dokumentobjekt aus weitergegeben werden, beginnen diese Browser mit der Erfassung von Ereignissen vom Fensterobjekt.

DOM-Ereignisfluss

Der durch Ereignisse auf DOM2-Ebene spezifizierte Ereignisfluss umfasst drei Phasen: Ereigniserfassungsphase, Zielphase und Ereignis-Bubbling-Phase. Das erste, was passiert, ist die Ereigniserfassung, die die Möglichkeit bietet, das Ereignis abzufangen. Dann empfängt das eigentliche Ziel das Ereignis. Die letzte Phase ist die Sprudelphase, in der Sie auf Ereignisse reagieren können.

Im DOM-Ereignisfluss empfängt das eigentliche Ziel während der Erfassungsphase keine Ereignisse. Dies bedeutet, dass während der Erfassungsphase Ereignisse vom Dokument über HTML bis hin zum Text gestoppt werden. Die nächste Stufe befindet sich in der Zielstufe, sodass das Ereignis im Div auftritt und als Teil der Bubbling-Stufe bei der Ereignisbehandlung betrachtet wird. Dann tritt die Sprudelphase ein und das Ereignis wird an das Dokument zurückgegeben.
Aber tatsächlich lösen IE9, Firefox, Chrome, Safari und Opera9.5 und höher während der Erfassungsphase Ereignisse für das Ereignisobjekt aus. Das Ergebnis ist, dass es zwei Möglichkeiten gibt, Ereignisse am Zielobjekt zu manipulieren. (IE8 und frühere Versionen unterstützen kein DOM-Ereignis-Streaming).

Ereignishandler

Ein Ereignis ist eine Aktion, die vom Benutzer oder vom Browser selbst ausgeführt wird. Dinge wie „Klicken“, „Laden“ und „Mouseover“ sind allesamt Ereignisnamen. Die Funktion, die auf ein Ereignis reagiert, wird als Ereignishandler (Ereignis-Listener) bezeichnet. Der Name des Event-Handlers beginnt mit „on“, also lautet der Event-Handler für das Click-Ereignis „onclick“ und der Handler für das Load-Ereignis „onload“. Es gibt verschiedene Möglichkeiten, Handler für Ereignisse anzugeben.

HTML-Ereignishandler

Jedes von einem Element unterstützte Ereignis kann mithilfe eines HTML-Attributs mit demselben Namen wie der entsprechende Ereignishandler angegeben werden. Der Wert dieses Attributs sollte JavaScript-Code sein, der ausgeführt werden kann. Beispiel:

<button id="myButton" onclick="alert(&#39;Clicked&#39;)">Click Me</button>//定义了一个按钮，点击时会显示一个警告框；

Ein in HTML definierter Ereignishandler kann bestimmte auszuführende Aktionen enthalten oder ein an anderer Stelle auf der Seite definiertes Skript aufrufen :

<button id="myButton" onclick="showMsg()">Click Me</button>  //点击按钮就会调用showMsg()函数；<script>
    function showMsg() {
      alert(&#39;Hello world!&#39;)
}</script>

Die Angabe von Ereignishandlern über HTML hat zwei Nachteile: 1. Zeitunterschiedsproblem, da der Benutzer möglicherweise das entsprechende Ereignis auslöst, sobald das HTML-Element auf der Seite erscheint, der Ereignishandler jedoch zu diesem Zeitpunkt möglicherweise 2. HTML- und JavaScript-Codes sind eng miteinander verbunden. Wenn Sie den Ereignishandler ändern möchten, müssen Sie den HTML-Code und den JavaScript-Code ändern.

DOM Level 0 Event-Handler

Die traditionelle Art, einen Event-Handler über JavaScript anzugeben, besteht darin, einem Event-Handler-Attribut eine Funktion zuzuweisen. Jedes Element verfügt über ein eigenes Event-Handler-Attribut, das normalerweise nur aus Kleinbuchstaben besteht, z. B. onclick. Indem Sie den Wert dieses Attributs auf eine Funktion festlegen, können Sie einen Ereignishandler angeben, Beispiel:

 var btn = document.getElementById(&#39;myButton&#39;);
  btn.onclick = function() {
    alert("Clicked")
  }

使用DOM0级方法指定的事件处理程序被认为是元素的方法。因此，这时候事件处理程序是在元素的作用域中运行；换句话说，程序中的this引用当前元素。
也可以通过DOM0级方法删除事件处理程序，示例：

btn.onclick = null;   //删除事件处理程序；
DOM2级事件处理程序

DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点都包含这两个方法，并且它们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后的布尔值如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。示例：

 var btn = document.getElementById(&#39;myButton&#39;);  //为按钮添加了click事件和处理程序；
  btn.addEventListener(&#39;click&#39;,function() {
    alert(this.id)
  }，false)

与DOM0级方法一样，这里添加的事件处理程序也是在其依附的元素的作用域中运行的。使用DOM2级方法添加事件处理程序可以添加多个事件处理程序，示例：

 var btn = document.getElementById(&#39;myButton&#39;);  //为按钮添加了多个click事件和处理程序；
  btn.addEventListener(&#39;click&#39;,function() {
    alert(this.id);
  }，false);  var btn = document.getElementById(&#39;myButton&#39;);  ；
  btn.addEventListener(&#39;click&#39;,function() {
    alert(&#39;hello world!&#39;);
  }，false);

这里为按钮添加了2个事件处理程序。这两个事件处理程序会按照添加它们的顺序触发。
通过addEventListener()添加的事件处理程序只能用removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同，意味着addEventListener()添加的匿名函数无法移除：

//该代码无法运行；btn.removeEventListener(&#39;click&#39;,function() {
  alert(this.id);
}，false);
//该代码工作正常；//removeEventListener()和addEventListener()使用了相同函数；var btn = document.getElementById(&#39;myButton&#39;); 
  var function handler() {
    alert(this.id);
  }
btn.addEventListener(&#39;click&#39;,handler,false);
btn.removeEventListener(&#39;click&#39;,handler,false);

本篇对js事件进行了总结，更多相关内容请关注php中文网。

In Verbindung stehende Artikel

Mehr sehen