Was ist ein Javascript-Ereignismodell?

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

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

1. Ursprüngliches Ereignismodell

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

Die Registrierung des Ereignisprogramms kann auf folgende Weise erfolgen:

1. JS-Code als HTML-Eigenschaftswert

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

2. Ereignishandler als JS-Attribut

Hinweis: Jedes HTML-Element im Dokument verfügt über ein entsprechendes JS-Objekt im Dokumentbaum, und die Eigenschaften dieses JS-Objekts entsprechen diesem HTML Elementeigenschaften, egal ob es sich um einen JS-Code mit HTML-Charakter oder einen Zeithandler als JS-Attribut handelt, sein eigenes Attribut ist eine Funktion „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;

Ereignishandler als JS-Attribute können explizit mit JS-Attributen aufgerufen werden

document.myfrom.onsubmit();

Ereignishandler können false zurückgeben, 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 wird unter Bezugnahme auf das Blasenmodell von IE formuliert durch w3c-Spezifikation. Im Originalmodell wird der Ereignishandler direkt aufgerufen, sobald ein Ereignis auftritt, und es gibt keinen anderen Ereignisausbreitungsprozess. Im DOM2-Modell gibt es einen speziellen Ausbreitungsprozess, der in drei Phasen unterteilt ist:

(1) Erfassungsphase: Das Ereignis wird vom Dokument bis zum Zielelement weitergegeben. Wenn während dieses Prozesses ein Vorgängerelement an dem Ereignis interessiert ist, kann es seine eigene Verarbeitungsfunktion registrieren

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

(3) Sprudelphase: Das Ereignis steigt vom Zielelement auf, bis es das Dokument erreicht , nur einige Ereignisse durchlaufen die Bubbling-Phase. Beispielsweise ist das Submit-Ereignis nicht aktiv.
Während des gesamten Ereignisweitergabeprozesses können Sie event.stopPropagation() aufrufen, um die Ereignisweitergabe zu stoppen Verhindern Sie das Standardverhalten des Browsers.

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

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

Drei, IE-Modell

IE-Modell wird ebenfalls bereitgestellt. Ein Ereignisobjekt kapselt die Details des Ereignisses, aber der IE übergibt das Objekt nicht an die Ereignisverarbeitungsfunktion, da dies nur der Fall ist Ein Ereignis zu jedem Zeitpunkt wird vom IE als Attribut des globalen Objektfensters verwendet. Der Modus entspricht der zweiten und dritten Stufe von DOM2. Er führt zunächst die Verarbeitungsfunktion des Zielelements aus und breitet sich dann nach oben aus Im IE können nur Mausereignisse erfasst werden, während in DOM2 alle Ereignisse erfasst werden können. Die Methode zur Verarbeitung von Funktionen unterscheidet sich ebenfalls von DOM2 durch die Elemente attachmentEvent("eventType","handler") und detachEvent("eventType","handler"). Der Unterschied zu dom2 besteht darin, dass eventType mit dem Präfix

Features:

1 erfolgt . Bubble-Interrupt-Methode:

window.ecent.cancelBubble=true;

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

3. Event-Registrierungsfunktion: attachmentEvent()

4. Netscape4-Ereignismodell

Da Netscape die Entwicklung vollständig eingestellt hat, werde ich nicht näher darauf eingehen : Es ist nur Capture ohne Schaumbildung möglich.

【Empfohlenes Lernen:

Javascript-Tutorial für Fortgeschrittene

】

Das obige ist der detaillierte Inhalt vonWas ist ein Javascript-Ereignismodell?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!