Einführung in das JavaScript-Ereignismodell (grafisches Tutorial)

Es gibt drei Ereignismodelle in verschiedenen Browsern: das ursprüngliche Ereignismodell, das DOM2-Ereignismodell und das IE-Ereignismodell. Das ursprüngliche Ereignismodell wird von allen Browsern unterstützt, und das in DOM2 definierte Ereignismodell wird derzeit von allen gängigen Browsern unterstützt Browser außer IE.

1. Ursprüngliches Ereignismodell

Die Ereignistypen: unterteilt in „Eingabeereignisse (z. B. onclicki)“ und „semantische Ereignisse (z. B. onsubmit)“

Das Ereignisprogramm kann auf folgende Weise registriert werden:

1. JS-Code als HTML-Eigenschaftswert

<input type="button" value="Press me" onclick="alert(&#39;thanks&#39;);"

2. Ereignishandler als JS-Attribut

Hinweis : Dokumentation Jedes HTML-Element verfügt über ein entsprechendes JS-Objekt im Dokumentbaum. Die Eigenschaften dieses JS-Objekts entsprechen den Eigenschaften dieses HTML-Elements. Unabhängig davon, ob es sich um einen JS-Code als HTML-Eigenschaft oder um einen Zeithandler als JS-Eigenschaft handelt. seine eigenen Die Attribute sind alle Funktionen „Funktion“.

<form name="f1">
<input name="b1" type="button" value="Press Me"/>
</form>

Die erste Zuweisungsmethode:

document.f1.b1.onclick=function(){alert('thanks');};

Die zweite Zuweisungsmethode:

function plead(){window.status="Please Press Me!";}
document.f1.bi.onmouseover=plead;

Kann als Event-Handler für verwendet werden JS-Attribute Das JS-Attribut ruft explizit den

document.myfrom.onsubmit();

-Ereignishandler auf, um „false“ zurückzugeben, um zu verhindern, dass der Browser die Standardaktion des Ereignisses ausführt, häufig verwendete Vorgänge wie „onsubmit“. Die Ausnahme ist das Blockieren des window.status-Anzeigeereignisses des Hyperlink-Mouseovers, das „true“ zurückgibt. Beispiel:

<a href="help.htm" onmouseover="window.status=&#39;help&#39;;return true;">help</a>

2. DOM2-Ereignismodell

Dieses Modell Es wird unter Bezugnahme auf das Blasenmodell von IE formuliert, eine von w3c formulierte Spezifikation. Im ursprünglichen Modell wird der Ereignishandler direkt aufgerufen, sobald ein Ereignis auftritt, und im DOM2-Modell gibt es keinen anderen Ereignisausbreitungsprozess ein spezieller Ausbreitungsprozess, unterteilt in drei Phasen:

(1) Erfassungsphase: Das Ereignis wird vom Dokument bis zum Zielelement weitergegeben, sofern ein Vorfahrenelement von Interesse ist Das Ereignis kann seine eigene Handlerfunktion registrieren.

(2)Zielphase: Das Ereignis erreicht das Zielelement und die Ereignisverarbeitungsfunktion des Zielelements wird ausgeführt.

(3 )Bubbling-Phase: Das Ereignis steigt vom Zielelement bis zum Erreichen des Dokuments, obwohl alle Ereignistypen die Captruing-Phase durchlaufen, aber nur einige Ereignisse die Bubbling-Phase durchlaufen. Beispielsweise wird das Submit-Ereignis nicht ausgelöst .

Während des gesamten Ereignisausbreitungsprozesses kann event.stopPropagation() aufgerufen werden, um die Ereignisausbreitung zu stoppen.

addEventListener("eventType","handler","true!false");
removeEventListner("eventType","handler","true!false");

3

Das IE-Modell stellt auch ein Ereignisobjekt bereit, das die Details des Ereignisses kapselt. Der IE übergibt das Objekt jedoch nicht an die Ereignisverarbeitungsfunktion, da es immer nur ein Ereignis gibt. IE verwendet es als Attribut des globalen Objektfensters. Der Ereignisausbreitungsmodus im IE entspricht der zweiten und dritten Stufe von DOM2. Führen Sie zuerst die Verarbeitungsfunktion des Zielelements aus und verbreiten Sie es dann nach oben, um das Dokument zu erreichen Es können nur Mausereignisse erfasst werden, während in DOM2 alle Ereignisse erfasst werden können. Die Methode zum Registrieren und Löschen von Ereignisverarbeitungsfunktionen im IE unterscheidet sich ebenfalls von DOM2.

Die Ereignishandlerfunktion wird über registriert und gelöscht Das attachmentEvent("eventType","handler") und detachEvent("eventType","handler") des Elements. Der Unterschied zu dom2 besteht darin, dass eventType das on-Präfix

Features: 1. Der Ausbreitungsprozess erzeugt nur Blasen und erfasst nicht. Bubble-Interrupt-Methode:

window.ecent.cancelBubble=true;

2. Das Event-Objekt ist kein Funktionsparameter des Event-Handlers, sondern eine globale Variable des Fensters.

3. Ereignisregistrierungsfunktion: attachmentEvent() und detachEvent()4. Netscape4-Ereignismodell

Da Netscape die Entwicklung vollständig eingestellt hat Ich werde nicht auf Details eingehen. Um es einfach auszudrücken: Es fängt nur Blasen ein, ohne zu sprudeln.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Detailliertes Verständnis selbstausführender anonymer Funktionen in Javascript (grafisches Tutorial)

Detaillierte Erklärung von javascript Das Prinzip des neuen Operators in (grafisches Tutorial)

Detaillierte Interpretation der vier Existenzformen von JavaScript-Funktionen (grafisches Tutorial)

Das obige ist der detaillierte Inhalt vonEinführung in das JavaScript-Ereignismodell (grafisches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!