Eine kurze Analyse der Verwendung von JavaScript-Ereignissen

Die Beispiele in diesem Artikel beschreiben die Verwendung von JavaScript-Ereignissen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

JavaScript interagiert mit HTML über Ereignisse.

Ereignisfluss

Der Ereignisfluss gibt die auslösenden Regeln und die Reihenfolge der Ereignisse an. DOM2 legt fest, dass der Ereignisfluss drei Phasen umfasst: Ereigniserfassung –> Zielauslösung –> DOM2 schreibt vor, dass Event-Handler während der Ereigniserfassungsphase nicht aufgerufen werden dürfen, die wichtigsten Browser unterstützen dies jedoch nicht. Der dritte Parameter des Funktionspaars „addEventListener“ und „removeEventListener“ für den Ereignishandler auf DOM2-Ebene stellt einen Kompromiss dar und lässt Anfänger denken, dass die DOM-Verwaltung ein Chaos ist.

var btn = document.getElementById("btn");
btn.addEventListener("click",function(){alert(this.id);},false);
document.body.addEventListener("click",function(){alert("body");},false);

Aktualisieren Sie den dritten Parameter in addEventListener und removeEventListener in den obigen js mit true, und Sie können den Effekt grob verstehen Ereignisfluss.

Ereignisse

Ereignisse sind bestimmte Aktionen, die vom Benutzer oder vom Browser selbst ausgeführt werden.

So fügen Sie einen Event-Handler hinzu

Die Funktion, die auf ein Ereignis reagiert, wird Event-Handler genannt.

Geben Sie Ereignishandler auf folgende Weise an:

HTML-Attributspezifikation.

Wenn ein Element ein Ereignis unterstützt, gibt es ein entsprechendes HTML-Attribut, und Sie können dieses Attribut verwenden, um ihm einen Ereignishandler hinzuzufügen.

<button id="btn" onclick="alert(&#39;button click&#39;)">button</button>

DOM-Ebene 0. Weisen Sie dem Event-Handler-Attribut eines Elements eine Funktion zu: Dies ist die traditionelle Art, Event-Handler mit JavaScript anzugeben und wird auch heute noch verwendet.

var btn = document.getElementById("btn");
btn.onmouseover = function(){
 this.innerHTML="按钮";
};

DOM Level 2.

Elementereignisse über addEventListener und removeEventListener verwalten. Alle DOM-Knoten enthalten diese beiden Methoden und beide enthalten drei Parameter:

addEventListener (Ereignisname, Ereignisbehandlungsfunktion, ob der Ereignishandler ausgeführt werden soll, wenn das Ereignis erfasst wird)

var btn = document.getElementById("btn");
btn.addEventListener("click",function(){alert(this.id);},true);
//注意下面的remove，它完全没有用，这两个匿名函数实际上是不同的对象
btn.removeEventListener("click",function(){alert(this.id);},true);

Im obigen Code werden Referenzen, die auf dasselbe Objekt verweisen, als gleich betrachtet. Dieselbe Deklaration generiert zwei Objekte mit demselben Erscheinungsbild, die jedoch gespeichert werden auf dem Haufen verschiedene Objekte an verschiedenen Orten.

Ereignisobjekt

Wenn ein Ereignis im DOM ausgelöst wird, wird ein Ereignisobjektereignis generiert. Unabhängig davon, welcher Event-Handler angegeben ist, wird das Event-Objekt übergeben: Genauer gesagt wird das Event-Objekt in der Ausführungsumgebung des Aufrufs der Ausführungsfunktion erstellt, wie aus der Definition der Bereichskette hervorgeht es wird weitergegeben.

var btn = document.getElementById("btn");
var btnClick = function(){
 alert(event.type);
}
btn.onclick = btnClick;//点击btn按钮时，弹出msg:click

event enthält umfangreiche Mitglieder zur Steuerung von Zugriffsereignissen. Im Folgenden sind die gemeinsamen Mitglieder aller Ereignisse aufgeführt.

Ziel: Das Zielelement, auf das die Aktion, die das Ereignis auslöst, direkt wirkt.
currentTarget: entspricht diesem Element, auf das der Ereignishandler einwirkt.
eventPhase: Die Phase im Ereignisfluss, in der der Ereignishandler aufgerufen wird. Die drei Werte 1, 2 und 3 entsprechen jeweils den drei Phasen des Ereignisflusses.
Typ: Ereignistyp. Das Click-Ereignis entspricht String: „click“.

Ereignistypen

Ereignistypen sind in die folgenden Kategorien unterteilt:

UI-Ereignisse.
Fokusveranstaltung.
Maus- und Rad-Events.
Tastatur- und Textereignisse.
Verbundveranstaltung.
Ereignis ändern.
HTML5-Ereignisse.
Geräteereignisse.
Berührungs- und Gestenereignisse.