DOM -Ereignisse

DOM (Dokumentobjektmodell) Ereignisse sind ein Signal, dass etwas aufgetreten ist oder auftritt und durch Benutzerinteraktionen oder durch den Browser ausgelöst werden kann.[1] Client-Seite Skriptsprachen wie JavaScript, Jscript, ECMaskript, Vbscript, und Java kann verschiedene registrieren Event -Handler oder Zuhörer auf den Elementknoten in a Dom Baum, wie in Html, Xhtml, Xul, und SVG Unterlagen.

Beispiele für DOM -Ereignisse:

  • Wenn ein Benutzer auf die Maus klickt
  • Wenn eine Webseite geladen wurde
  • Wenn ein Bild geladen wurde
  • Wenn sich die Maus über ein Element bewegt
  • Wenn ein Eingangsfeld geändert wird
  • Wenn ein HTML -Formular eingereicht wird
  • Wenn ein Benutzer eine Taste drückt[2]

Historisch gesehen wie DOM die Ereignismodelle, die von verschiedenen verwendet werden Internetbrowser hatten einige signifikante Unterschiede, die Kompatibilitätsprobleme verursachten. Um dies zu bekämpfen, wurde das Ereignismodell durch das standardisiert World Wide Web Konsortium (W3C) in DOM -Stufe 2.

Veranstaltungen

HTML -Ereignisse

Gemeinsame Ereignisse

Es gibt eine große Sammlung von Ereignissen, die von den meisten Elementknoten generiert werden können:

  • Maus Veranstaltungen.[3][4]
  • Klaviatur Veranstaltungen.
  • HTML -Frame/Objektereignisse.
  • HTML Form Ereignisse.
  • Benutzeroberflächenereignisse.
  • Mutationsereignisse (Benachrichtigung über Änderungen an der Struktur eines Dokuments).
  • Fortschrittsereignisse[5] (benutzt von Xmlhttprequest, Datei -API,[6]).

Beachten Sie, dass die obige Ereignisklassifizierung nicht genau mit der Klassifizierung von W3C entspricht.

Kategorie Typ Attribut Beschreibung Bläschen Stornierbar
Maus klicken ONCLICK Feuert, wenn die Zeigegerät Die Schaltfläche wird über ein Element geklickt. Ein Klick wird als Mousedown und MouseUp über demselben Bildschirmort definiert. Die Abfolge dieser Ereignisse ist:
  • Maus nach unten
  • Mausup
  • klicken
 Ja Ja
dblclick ONDBLCLICK Feuer, wenn die Taste des Zeigegeräts ist Doppelklick über ein Element Ja Ja
Maus nach unten OnmouseDown Zeugt, wenn die Taste des Zeigegeräts über ein Element gedrückt wird Ja Ja
Mausup OnmouseUp Feuer, wenn die Taste des Zeigegeräts über ein Element freigegeben wird Ja Ja
Mausover Onmouseover Feuert, wenn das Zeigegerät auf ein Element verschoben wird Ja Ja
Mousemove[7] Onmousemove Feuer, wenn das Zeigegerät bewegt wird, während es über einem Element ist Ja Ja
Mausout Onmouseout Feuer, wenn das Zeigungsgerät von einem Element entfernt wird Ja Ja
Dragstart Ondragstart Auf ein Element gefeuert, wenn ein Widerstand begonnen wird. Ja Ja
ziehen ONDRAG Dieses Ereignis wird auf die Quelle des Widerstands, dh dem Element, in dem Dragstart abgefeuert wurde, während des Widerstandsvorgangs abgefeuert. Ja Ja
Dragenter ONDRAGENTER Feuer, wenn die Maus zum ersten Mal über ein Element bewegt wird, während ein Widerstand auftritt. Ja Ja
Dragleave Ondragleave Dieses Ereignis wird abgefeuert, wenn die Maus ein Element hinterlässt, während ein Widerstand auftritt. Ja Nein
drüber ziehen ONDRAGOVER Dieses Ereignis wird abgefeuert, da die Maus über ein Element bewegt wird, wenn ein Widerstand auftritt. Ja Ja
fallen ONDROP Das Drop -Ereignis wird auf das Element abgefeuert, in dem der Tropfen am Ende des Widerstandsvorgangs auftritt. Ja Ja
Dragend ONDRAGEND Die Quelle des Drag erhält ein Dragend -Ereignis, wenn der Drag -Operation abgeschlossen ist, unabhängig davon, ob er erfolgreich war oder nicht. Ja Nein
Klaviatur Taste nach unten Onkeydown Feuer vor dem Tastendruck, wenn eine Taste auf der Tastatur gedrückt wird. Ja Ja
Tastendruck Onkeypress Zündet nach dem Tastendown, wenn eine Taste auf der Tastatur gedrückt wird. Ja Ja
Keyup Onkeyup Feuer, wenn eine Taste auf der Tastatur veröffentlicht wird Ja Ja
HTML -Rahmen/Objekt Belastung Onload Feuert, wenn die User-Agent Beendet das Laden aller Inhalte in einem Dokument, einschließlich Fenster, Frames, Objekten und Bildern

Für Elemente feuert es aus, wenn das Zielelement und der gesamte Inhalt das Laden beendet haben

 Nein Nein
entladen Onunladung Fügt, wenn der Benutzeragent alle Inhalte aus einem Fenster oder Frame entfernt

Für Elemente feuert es aus, wenn das Zielelement oder ein seiner Inhalte entfernt wurde

 Nein Nein
abbrechen Onabort Feuer, wenn ein Objekt/Bild vor dem vollständig geladenen Laden gestoppt wird Ja Nein
Error onError Feuert, wenn ein Objekt/Bild/Rahmen nicht ordnungsgemäß geladen werden kann Ja Nein
Größenänderung onresize Brände, wenn eine Dokumentansicht geändert wird Ja Nein
scrollen ONSCROLL Feuert, wenn eine Element- oder Dokumentansicht gescrollt wird Nein, außer dass ein Scroll -Ereignis im Dokument zum Fenster sprudeln muss[8] Nein
HTML -Form auswählen Onselect Feuert, wenn ein Benutzer einen Text in a auswählt Textfeld, einschließlich Eingabe und Textbereich Ja Nein
Rückgeld bei Änderung Feuer, wenn eine Steuerung den Eingang verliert Fokus und sein Wert wurde seit dem Gewinn des Fokus geändert Ja Nein
einreichen ONSUBMIT Brände, wenn ein Formular eingereicht wird Ja Ja
zurücksetzen Onreset Feuer, wenn ein Formular zurückgesetzt wird Ja Nein
Fokus im Fokus Feuert, wenn ein Element den Fokus entweder über das Zeigegerät oder durch erhält Tab Navigation Nein Nein
verwischen Onblur Feuert, wenn ein Element den Fokus entweder über das Zeigegerät oder durch verliert Tabbing -Navigation Nein Nein
Benutzeroberfläche Fokusin (keiner) Ähnlich wie beim HTML -Fokusereignis, kann aber auf jedes fokussierbare Element angewendet werden Ja Nein
Fokusout (keiner) Ähnlich wie bei HTML Blur -Ereignis, kann aber auf jedes fokussierbare Element angewendet werden Ja Nein
Domaktivieren (keiner) Ähnlich wie das XUL -Befehlsereignis. Brennt, wenn ein Element beispielsweise über einen Mausklick oder einen Tastendruck aktiviert wird. Ja Ja
Mutation DomsubTreemodified (keiner) Feuert, wenn der Unterbaum modifiziert wird Ja Nein
DomnodeInserted (keiner) Feuer, wenn ein Knoten als Kind eines anderen Knotens hinzugefügt wurde Ja Nein
Domnoderemed (keiner) Feuer, wenn ein Knoten aus einem Dom-Baum entfernt wurde Ja Nein
DomnoderemedFromDocument (keiner) Feuer, wenn ein Knoten aus einem Dokument entfernt wird Nein Nein
DomnodeinsertedIntodocument (keiner) Feuer, wenn ein Knoten in ein Dokument eingefügt wird Nein Nein
DomattrModified (keiner) Feuer, wenn ein Attribut geändert wurde Ja Nein
Domaracterdatamodified (keiner) Feuert, wenn die Charakterdaten geändert wurden Ja Nein
Fortschritt loadstart (keiner) Der Fortschritt hat begonnen. Nein Nein
Fortschritt (keiner) Im Gange. Nach dem Versand von LoadStart. Nein Nein
Error (keiner) Fortschritt fehlgeschlagen. Nachdem der letzte Fortschritt versandt wurde oder nach dem Versand von Laststart gesendet wurde, wenn keine Fortschritte geschickt wurden. Nein Nein
abbrechen (keiner) Fortschritt wird beendet. Nachdem der letzte Fortschritt versandt wurde oder nach dem Versand von Laststart gesendet wurde, wenn keine Fortschritte geschickt wurden. Nein Nein
Belastung (keiner) Fortschritt ist erfolgreich. Nachdem der letzte Fortschritt versandt wurde oder nach dem Versand von Laststart gesendet wurde, wenn keine Fortschritte geschickt wurden. Nein Nein
Loadend (keiner) Der Fortschritt hat gestoppt. Nach dem Fehler wurde abgebrochen oder lastet versandt. Nein Nein

Beachten Sie, dass die Ereignisse, deren Namen mit "DOM" beginnen, derzeit nicht gut unterstützt werden und aus diesem und anderen Leistungsgründen vom W3C in DOM Level 3 veraltet werden. Mozilla und Oper Unterstützung DomattrModified, DomnodeInserted, Domnoderemed und Domaracterdatamodified. Chrom und Safari Unterstützen Sie diese Ereignisse außer auf DomattrModified.

Berührenereignisse

Webbrowser laufen auf Touch Aktiviert Geräte wie Apple's iOS und Google AndroidErstellen Sie zusätzliche Ereignisse.[9]: §5.3

Kategorie Typ Attribut Beschreibung Bläschen Stornierbar
Berühren Touchstart Feuer, wenn ein Finger auf die Berührungsoberfläche/den Bildschirm platziert wird. Ja Ja
Berührung Feuer, wenn ein Finger von der Berührungsoberfläche/des Bildschirms entfernt wird. Ja Ja
Touchmove Feuer, wenn ein bereits auf dem Bildschirm platzierter Finger über den Bildschirm verschoben wird. Ja Ja
Berührung Feuer, wenn sich ein Berührungspunkt auf den interaktiven Bereich bewegt, der durch ein DOM -Element definiert ist. Ja Ja
Touchleave Brennt, wenn ein Berührungspunkt den interaktiven Bereich abhebt, der durch ein DOM -Element definiert ist. Ja Ja
Touchcancel A User-Agent Muss diesen Ereignisart entsenden, um anzuzeigen, wann ein Berührungspunkt auf implementierungsspezifische Weise gestört wurde, z. B. durch das Bewegen der Grenzen des UA-Fensters. Ein Benutzeragenten kann diesen Ereignisentyp auch versenden, wenn der Benutzer mehr Berührungspunkte (den Koordinatenpunkt, an dem ein Zeiger (z. B. Finger oder Stift) die Zieloberfläche einer Schnittstelle überschneidet) auf der Berührungsoberfläche platziert, als das Gerät oder die Implementierung konfiguriert ist Speichern Sie in diesem Fall das früheste Touchpoint -Objekt in der Touchliste.[9]: §5.9 Ja Nein

In dem W3c Entwurfsempfehlung, a Touchentest liefert a Touchliste von Berühren Standorte, die Modifikatorschlüssel das waren aktiv, a Touchliste von Berühren Standorte innerhalb des gezielten DOM -Elements und a Touchliste von Berühren Standorte, die sich seit dem vorherigen geändert haben Touchentest.[9]

Apfel Nicht in dieser Arbeitsgruppe beigetreten und verzögerte die W3C -Empfehlung der Spezifikation für Touch -Ereignisse durch Offenlegung Patente spät im Empfehlungsprozess.[10]

Zeigerereignisse

Webbrowser auf Geräten mit verschiedenen Arten von Eingabegeräten, einschließlich Maus, Touchpanel und Stift, können integrierte Eingabeereignisse generieren. Benutzer können sehen, welche Art von Eingabegerät gedrückt wird, welche Taste auf diesem Gerät gedrückt wird und wie stark die Taste gedrückt wird, wenn es um einen Stiftstift geht. Ab Oktober 2013 wird diese Veranstaltung nur von Internet Explorer 10 und 11 unterstützt.[11]

Kategorie Typ Attribut Beschreibung Bläschen Stornierbar
Zeiger Zeiger Onpointerdown Zeugt, wenn die Taste des Zeigegeräts aktiviert oder über ein Element gedrückt wird. Ja Ja
Zeiger Onpointerup Feuer, wenn die Taste des Zeigegeräts über ein Element freigegeben wird Ja Ja
pointercancel Onpointercancel Brände, wenn ein Zeigegerät es unwahrscheinlich ist, dass ein Ereignis produziert, da das Gerät beispielsweise zum Schwingen/Zoomen nach einem Zeigerereignis verwendet wird. Ja Ja
Zeigermove Onpointermove Feuer, wenn das Zeigegerät bewegt wird, während es über einem Element ist Ja Ja
Zeiger Onpointerover Feuert, wenn das Zeigegerät auf ein Element verschoben wird Ja Ja
Zeiger Onpointerout Feuer, wenn das Zeigungsgerät von einem Element entfernt wird. Zeugt auch nach dem Zeiger, indem Sie Geräte ohne Überlebung oder danach zeigen, oder danach Ja Ja
Zeiger Onpointerenter Feuer, wenn das Zeigungsgerät auf ein Element verschoben wird oder wenn der Taste des Zeigungsgeräts, der nicht schwebend unterstützt wird, auf eines seiner Nachkommenelemente gedrückt wird. Nein Ja
Zeigerleibe Onpointerleave Brände, wenn das Zeigungsgerät von einem Element weggezogen wird oder wenn der Knopf des Zeigungsgeräts, der nicht schwebend unterstützt wird, über seine Nachkommenelemente freigegeben wird. Nein Ja
gotpointercapture OngotPointercapture Zündet, wenn der Zeiger mit der SetPointercapture -Methode erfasst wird. Ja Nein
LostPointercapture Onlostpointercapture Brennt, wenn der Zeiger durch die Releasepointercapture -Methode freigegeben wird. Ja Nein

Indie -UI -Ereignisse

Die Indie -UI -Arbeitsgruppen, die Webanwendungsentwicklern helfen, können Standard -Benutzer -Interaktionsereignisse unterstützen, ohne verschiedene plattformspezifische technische Ereignisse zu verarbeiten, die mit ihm übereinstimmen.[12]

Das Scripting nutzbare Schnittstellen kann schwierig sein, insbesondere wenn man berücksichtigt, dass die Design -Designmuster der Benutzeroberfläche in Bezug auf Softwareplattformen, Hardware und Lokales unterscheiden und dass diese Interaktionen basierend auf persönlichen Vorlieben weiter angepasst werden können. Einzelpersonen sind an die Art und Weise gewöhnt, wie die Schnittstelle in ihrem eigenen System funktioniert, und ihre bevorzugte Schnittstelle unterscheidet sich häufig von der der bevorzugten Schnittstelle des Webanwalts.

Zum Beispiel müssen Autoren von Webanwendungen, die die Absicht eines Benutzers abfangen möchten, die letzte Aktion rückgängig zu machen, für alle folgenden Ereignisse "zuhören":

  • Steuerung+Z unter Windows und Linux.
  • Befehl+Z unter Mac OS X.
  • Shake Events auf einigen mobilen Geräten.

Es wäre einfacher, auf eine einzelne, normalisierte Anfrage zu hören, die vorherige Aktion rückgängig zu machen.

Kategorie Typ Beschreibung Bläschen Stornierbar
Anfrage undorequest Zeigt an, dass der Benutzer die vorherige Aktion "rückgängig machen" möchte. (Kann durch die undomanager -Schnittstelle ersetzt werden.) Ja Ja
Redorequest Zeigt an, dass der Benutzer die zuvor "rückgängige" Aktion "wiederherstellen" möchte. (Kann durch die undomanager -Schnittstelle ersetzt werden.) Ja nein
expandrequest Zeigt der Benutzer an, um Informationen in einem zusammengebrochenen Abschnitt (z. B. einem Offenlegungs -Widget) oder einem Zweigknoten in einer Hierarchie (z. B. a Baumsicht). Ja Ja
Collapssequest Zeigt an, dass der Benutzer Informationen in einem erweiterten Abschnitt (z. B. einem Offenlegungs -Widget) oder einem Zweigknoten in einer Hierarchie (z. B. einer Baumansicht) ausblenden oder zusammenbricht. Ja Ja
Entlassung Zeigt die Wünsche der aktuellen Ansicht an (z. B. Stornierung eines Dialogfelds oder Schließen eines Popup -Menüs). Ja Ja
Löschen Zeigt an, dass der Benutzer eine "Löschen" -Kaktion auf das markierte Element oder die aktuelle Ansicht einleiten möchte. Ja Ja
Fokusanfrage Direktionalfokusrequest Initiiert, wenn der Benutzeragent eine "Direction Focus" -Anforderung an die Webanwendung sendet. Webautoren sollten nicht für DirectionalfocusRequest -Ereignisse verwenden oder registrieren, wenn der Standard -Browser -Fokus- und Blur -Ereignisse ausreicht. Wenn Sie diese Ereignisse unnötig verwenden, kann dies zu einer verringerten Leistung oder einer negativen Benutzererfahrung führen. Ja Ja
linearfocusRequest Initiiert, wenn der Benutzeragent eine "lineare Fokus" -Anforderung an die Webanwendung sendet. Webautoren sollten nicht für linearFocusRequest -Ereignisse verwenden oder registrieren, wenn der Standard -Browser -Fokus- und Blur -Ereignisse ausreicht. Dieser Ereignisart ist nur bei speziellen Steuertypen wie Datennetze erforderlich, bei denen das logische nächste Element erst angefordert wird. Wenn Sie diese Ereignisse unnötig verwenden, kann dies zu einer verringerten Leistung oder einer negativen Benutzererfahrung führen. Ja Ja
PalettefocusRequest Initiiert, wenn der Benutzeragent eine "Palette Focus" -Anforderung an die Webanwendung sendet. Web -App -Autoren, die dieses Ereignis erhalten, sollten den Fokus auf die erste Palette in der Webanwendung oder den Zyklusfokus zwischen allen verfügbaren Paletten verlagern. Hinweis: Paletten werden manchmal als nicht modale Dialoge oder Inspektorfenster bezeichnet. Ja Ja
ToolBarfocusRequest Initiiert, wenn der Benutzeragent eine "Toolbar Focus" -Anforderung an die Webanwendung sendet. Web -App -Autoren, die dieses Ereignis erhalten, sollten sich auf die Haupt -Symbolleiste in der Webanwendung befassen oder den Zyklusfokus zwischen allen verfügbaren Symbolleisten. Ja Ja
Manipulationsanfrage Moverequest Initiiert, wenn der Benutzeragent eine Verschiebungsanforderung an die Webanwendung mit den damit verbundenen X/Y -Delta -Werten sendet. Dies wird beispielsweise verwendet, wenn ein Objekt an einen neuen Ort auf einer Layout -Leinwand verschoben wird. Ja Ja
Panrequest Initiiert, wenn der Benutzeragent eine PAN -Anforderung an die Webanwendung sendet, mit begleitenden X/Y -Delta -Werten. Dies wird beispielsweise beim Ändern des Mittelpunkts beim Verschwinden einer Karte oder eines anderen benutzerdefinierten Bildbetriebs verwendet. Ja Ja
RotationRequest Initiiert, wenn der Benutzeragent eine Rotationsanforderung an die Webanwendung mit den begleitenden Ursprungs -X/Y -Werten und einem Rotationswert in Grad sendet. Ja Ja
ZoomRequest Initiiert, wenn der Benutzeragent eine Zoomanforderung an die Webanwendung sendet, mit den begleitenden Ursprungs -X/Y -Werten und dem Zoomskala -Faktor. Ja Ja
Scrollanfrage ScrollRequest Initiiert, wenn der Benutzeragent eine Scroll -Anforderung an die Webanwendung sendet, mit begleitenden X/Y -Delta -Werten oder einer der anderen definierten Scrolltype -Werte. Autoren sollten dieses Ereignis nur mit benutzerdefinierten Bildlaufansichten verwenden. Ja Ja
Valuechange -Anfrage Valuechangerequest Initiiert, wenn der Benutzeragent eine Wertänderungsanforderung an die Webanwendung sendet. Wird für benutzerdefinierte Reichweite wie Schieberegler, Karussell usw. verwendet. Ja Ja

Internet Explorer-spezifische Ereignisse

Zusätzlich zu den gemeinsamen Ereignissen (W3C) werden zwei Haupttypen von Ereignissen hinzugefügt von hinzugefügt von Internet Explorer. Einige der Ereignisse wurden als implementiert als de facto Standards von anderen Browsern.

  • Zwischenablage Veranstaltungen.
  • Datenbindungsereignisse.[Klarstellung erforderlich]
Kategorie Typ Attribut Beschreibung Bläschen Stornierbar
Zwischenablage schneiden Oncut Brände nach einer Auswahl werden in die Zwischenablage geschnitten. Ja Ja
Kopieren Onkopie Brände nach einer Auswahl werden in die Zwischenablage kopiert. Ja Ja
Einfügen Onpaste Brände nach einer Auswahl werden aus der Zwischenablage eingefügt. Ja Ja
vorpecut aufbefürecut Brände vor einer Auswahl wird in die Zwischenablage geschnitten. Ja Ja
Beforecopy onbeForecopy Brände vor einer Auswahl werden in die Zwischenablage kopiert. Ja Ja
Vorpaste onbeforpaste Brände vor einer Auswahl werden aus der Zwischenablage eingefügt. Ja Ja
Datenbindung nach dem Update onafterupdate Feuer unmittelbar nach dem Aktualisieren eines Datenblockobjekts. Ja Nein
vor OUPDATE onbeforeupdate Feuer vor einer Datenquelle wird aktualisiert. Ja Ja
CellChange Oncellchange Feuer, wenn sich eine Datenquelle geändert hat. Ja Nein
Daten verfügbar ONDATAAVAILE Feuert, wenn neue Daten aus einer Datenquelle verfügbar sind. Ja Nein
datasetchanged ONDATASETADEDED Feuert, wenn sich der Inhalt in einer Datenquelle geändert hat. Ja Nein
DataSetComplete ONDATASETCOMPLETET Feuert bei der Übertragung von Daten aus der Datenquelle ab. Ja Nein
ERROULUPDATE onErrorupdate Feuert, wenn ein Fehler beim Aktualisieren eines Datenfelds auftritt. Ja Nein
Rowenter Onrowenter Feuert, wenn eine neue Datenreihe aus der Datenquelle verfügbar ist. Ja Nein
rowexit Onrowexit Feuert, wenn eine Reihe von Daten aus der Datenquelle gerade fertiggestellt ist. Nein Ja
ROWSDELETE onrowsdelete Feuert, wenn eine Datenreihe aus der Datenquelle gelöscht wird. Ja Nein
RowInserted Onrowinserted Feuert, wenn eine Datenreihe aus der Datenquelle eingefügt wird. Ja Nein
Maus Kontextmenü OncontextMenu Feuert, wenn das Kontextmenü angezeigt wird. Ja Ja
ziehen ONDRAG Feuer, wenn während a Maus ziehen (auf dem sich bewegenden Element). Ja Ja
Dragstart Ondragstart Feuer, wenn ein Maus -Zug beginnt (auf dem sich bewegenden Element). Ja Ja
Dragenter ONDRAGENTER Feuer, wenn etwas auf einen Bereich gezogen wird (auf das Zielelement). Ja Ja
drüber ziehen ONDRAGOVER Brände, wenn ein Widerstand über einem Bereich gehalten wird (auf dem Zielelement). Ja Ja
Dragleave Ondragleave Feuer, wenn etwas aus einem Bereich (auf das Zielelement) herausgezogen wird. Ja Ja
Dragend ONDRAGEND Feuer, wenn eine Maus zieht (auf dem sich bewegenden Element). Ja Ja
fallen ONDROP Feuer, wenn eine Maustaste während eines Zuges über ein gültiges Ziel freigelassen wird (auf dem Zielelement). Ja Ja
selectStart Onselectstart Feuert, wenn der Benutzer beginnt, Text auszuwählen. Ja Ja
Klaviatur Hilfe OnHelp Feuert, wenn der Benutzer Hilfe initiiert. Ja Ja
HTML -Rahmen/Objekt Vorher onbeforeUnload Brände bevor ein Dokument entladen wird. Nein Ja
Pause OnStop Feuert, wenn der Benutzer das Laden des Objekts nicht mehr lädt. (Im Gegensatz zu ABORT kann das Stop -Event an das Dokument beigefügt werden) Nein Nein
HTML -Form voreditfocus onbeforeeditfocus Feuer vor einem Element gewinnt Fokus für die Bearbeitung. Ja Ja
Festzelt Anfang am Start Feuer, wenn ein Festzelt eine neue Schleife beginnt. Nein Nein
Fertig Onfinish Brände, wenn die Festzeltschlaufe abgeschlossen ist. Nein Ja
prallen onstrounce Feuer, wenn ein Scrolling -Festzelt in die andere Richtung zurückspringt. Nein Ja
Sonstig vorabdruck onbeforprint Brände, bevor ein Dokument gedruckt wird Nein Nein
Nachdruck nach dem Nachdruck Brennt unmittelbar nach dem Dokument. Nein Nein
PropertyChange On -Propertychange Feuert, wenn die Eigenschaft eines Objekts geändert wird. Nein Nein
Filterchange Onfilterchange Feuert, wenn ein Filter die Eigenschaften ändert oder einen Übergang beendet. Nein Nein
ReadyStatechange onreadyStatechange Feuert, wenn sich die ReadyState -Eigenschaft eines Elements ändert. Nein Nein
Losecapture OnloSecapture Feuer, wenn die Veröffentlichungsmethode aufgerufen wird. Nein Nein

Beachten Sie, dass Mozilla, Safari und Opera auch das ReadyStatechange -Event für die Xmlhttprequest Objekt. Mozilla unterstützt auch das voranladende Ereignis mit der herkömmlichen Ereignisregistrierungsmethode (DOM -Stufe 0). Mozilla und Safari unterstützen auch ContextMenu, aber Internet Explorer für Mac nicht.

Beachten Sie, dass Firefox 6 und später die Vorabdruck- und Nachdruckereignisse unterstützen.

Xul Ereignisse

Zusätzlich zu den gemeinsamen Ereignissen (W3C) definierte Mozilla eine Reihe von Ereignissen, die nur mit funktionieren Xul Elemente.

Kategorie Typ Attribut Beschreibung Bläschen Stornierbar
Maus DommouSeScroll DommouSeScroll Feuer, wenn das Mausrad bewegt wird, wodurch der Inhalt scrollen kann. Ja Ja
ziehen und loslassen ONDRAGROP Feuert, wenn der Benutzer die Maustaste freigibt, um auf Lassen Sie ein Objekt fallen lassen, das gezogen wird. Nein Nein
Dragenter ONDRAGENTER Zeugt, wenn sich der Mauszeiger beim Widerstand zum ersten Mal über ein Element bewegt. Es ähnelt dem Mausover -Ereignis, tritt jedoch beim Ziehen auf. Nein Nein
Dragexit ONDRAGEXIT Feuer, wenn sich der Mauszeiger während eines Zuges von einem Element entfernen. Es wird auch nach einem Tropfen auf ein Element aufgerufen. Es ähnelt dem Mausout -Ereignis, tritt jedoch während eines Widerstandes auf. Nein Nein
Draggesture ONDRAGURDURE Brennt, wenn der Benutzer das Element schleppt, normalerweise durch das Maustaste und das Bewegen der Maus. Nein Nein
drüber ziehen ONDRAGOVER In Bezug auf das Mousemove -Ereignis wird dieses Ereignis abgefeuert, während etwas über ein Element gezogen wird. Nein Nein
Eingang CheckBoxStatEchange Feuert, wenn ein Kontrollkästchen entweder vom Benutzer oder eines Skripts überprüft oder deaktiviert wird. Nein Nein
Radiostatechange Feuert, wenn ein Optionsfeld ausgewählt wird, entweder vom Benutzer oder eines Skripts. Nein Nein
nah dran Onclose Feuer, wenn eine Anfrage gestellt wurde, um das Fenster zu schließen. Nein Ja
Befehl auf Befehl Ähnlich wie bei W3C Domactivate Ereignis. Brennt, wenn ein Element beispielsweise über einen Mausklick oder einen Tastendruck aktiviert wird. Nein Nein
Eingang aufInput Feuert, wenn ein Benutzer in ein Textfeld in Text eingeht. Ja Nein
Benutzeroberfläche Dommenuitemactive Dommenuitemactive Brände, wenn ein Menü oder ein Menuitem ist schwebte über, oder hervorgehoben. Ja Nein
Dommenuiteminactive Dommenuiteminactive Brände, wenn ein Menü oder Menuitem nicht mehr umgezogen oder hervorgehoben werden. Ja Nein
Kontextmenü OncontextMenu Fügt, wenn der Benutzer anfordert, das Kontextmenü für das Element zu öffnen. Die Aktion, dies zu tun, variiert je nach Plattform, ist jedoch in der Regel ein Rechtsklick. Nein Ja
Überlauf Onoverflow Feuert ein Kästchen oder ein anderes Layoutelement ab, wenn nicht genügend Platz ist, um sie in voller Größe anzuzeigen. Nein Nein
überlaufend Onoverflowchanged Feuert, wenn sich der Überlaufstatus ändert. Nein Nein
Unterfluss Onderflow Zeugt auf ein Element, wenn genügend Platz ist, um es in voller Größe anzuzeigen. Nein Nein
Popuphiden Onpopuphidden Feuer zu einem Popup, nachdem es versteckt wurde. Nein Nein
Popupthiding Onpopuphiding Feuer zu einem Popup, wenn es kurz vor dem Versteck ist. Nein Nein
Popupshowing Onpopupshowing Feuer zu einem Popup, kurz bevor es geöffnet wird. Nein Ja
Popupshown Onpopupshown Feuer zu einem Popup, nachdem es geöffnet wurde, ähnlich wie das Onload -Ereignis an ein Fenster gesendet wird, wenn es geöffnet wird. Nein Nein
Befehl Übertragung OnBroadcast Auf einen Beobachter platziert. Die Sendungsveranstaltung wird gesendet, wenn die Attribute des Senders geändert werden. Nein Nein
Commandupdate oncommandupdate Feuert, wenn ein Befehls -Update auftritt. Nein Nein

Andere Ereignisse

Für Mozilla und Opera 9 gibt es auch undokumentierte Ereignisse, die als bekannt sind Domcontent geladen und DomfrAmeContent Loaded Welches Feuer, wenn der DOM -Inhalt geladen ist. Diese unterscheiden sich von "Laden", wenn sie vor dem Laden verwandter Dateien (z. B. Bilder) abfeuern. Domcontentled wurde jedoch zu dem hinzugefügt HTML 5 Spezifikation.[13] Das Domcontent -Ereignis wurde auch in der implementiert Webkit Rendering Motor Build 500+.[14][15] Dies korreliert mit allen Versionen von Google Chrome und Safari 3.1+. Domcontentload wird ebenfalls in implementiert Internet Explorer 9.[16]

Opera 9 unterstützt auch die Webformulare 2.0 Ereignisse Domcontrolvaluechanged, ungültig, Forminput und Formchange.

Ereignisfluss

Betrachten Sie die Situation, wenn zwei Ereignisziele an a teilnehmen Baum. Beide haben Event -Hörer im selben Event -Typ registriert: "Click". Wenn der Benutzer auf das innere Element klickt, gibt es zwei mögliche Möglichkeiten, es zu handhaben:

  • Lösen Sie die Elemente von außen nach innerlich (Ereigniserfassung). Dieses Modell ist in implementiert in Netscape Navigator.
  • Lösen Sie die Elemente von inneren nach äußerlich (Ereignis sprudeln). Dieses Modell wird in Internet Explorer und anderen Browsern implementiert.[17]

W3C nimmt eine mittlere Position in diesem Kampf ein.[18]: §1.2

Laut W3C gehen die Ereignisse drei Phasen durch, wenn ein Ereignisziel an einem Baum teilnimmt:

  1. Die Erfassungsphase: Das Ereignis fährt vom Root -Ereignisziel zum Ziel eines Ereignisses nach unten
  2. Die Zielphase: Das Ereignis führt das Ereignisziel durch
  3. Die Blasenphase (Optional): Das Ereignis bewegt sich vom Ziel eines Ereignisses zum Stammereignisziel zurück. Die Blasenphase tritt nur für Ereignisse auf, die Blasen (wo Ereignis.Bubbles == True)

Sie können eine Visualisierung dieses Ereignisflusses finden https://domevents.dev

Ereignisse stoppen

Während eine Veranstaltung durch Event -Hörer reist, kann die Veranstaltung mit gestoppt werden Event.StopPropagation () oder Event.StopimmediatePropagation ()

  • Event.StopPropagation (): Das Ereignis wird gestoppt, nachdem alle Ereignishörer, die dem aktuellen Ereignisziel in der aktuellen Ereignisphase angehängt sind
  • Event.StopimmediatePropagation (): Die Veranstaltung wird sofort gestoppt und es werden keine weiteren Ereignishörer ausgeführt

Wenn ein Ereignis gestoppt wird, reist sie nicht mehr über den Veranstaltungspfad. Das Stoppen eines Ereignisses storniert kein Ereignis.

Legacy -Mechanismen, um ein Ereignis zu stoppen

  • Setzen Sie die Event.CancelBubble zu Stimmt (Internet Explorer)
  • Setzen Sie die Event.ReturnValue Eigentum an FALSCH

Ereignisse stornieren

A stornierbar Ereignis kann durch Anrufe abgesagt werden Event.PreventDefault (). Das Abbrechen eines Ereignisses wird das Standard -Browserverhalten für dieses Ereignis abmelden. Wenn eine Veranstaltung abgesagt wird, die Event.DefaultPrevented Eigenschaft wird auf Stimmt. Durch das Abbrechen eines Ereignisses wird das Ereignis nicht daran hindern, den Event -Pfad aufzuwenden.

Ereignisobjekt

Das Ereignisobjekt enthält viele Informationen zu einem bestimmten Ereignis, einschließlich Informationen zu Zielelemente, Tastendruck, Maustaste, Mausposition usw. Leider gibt es in diesem Bereich sehr schwerwiegende Browser -Inkompatibilitäten. Daher wird in diesem Artikel nur das W3C -Ereignisobjekt erörtert.

Ereigniseigenschaften
Name Typ Beschreibung
Typ Domstring Der Name des Ereignisses (Fall-unempfindlich in DOM-Stufe 2, aber Fallempfindlichkeit in DOM Level 3 [19]).
Ziel EventTarget Wird verwendet, um das EventTarget anzugeben, zu dem das Ereignis ursprünglich versandt wurde.
derzeitiges Ziel EventTarget Wird verwendet, um das EventTarget anzugeben, dessen EventListener derzeit verarbeitet werden.
EventPhase nicht signiert Wird verwendet, um anzuzeigen, in welcher Phase des Ereignisflusses derzeit bewertet wird.
Bläschen Boolesche Wird verwendet, um anzuzeigen, ob ein Ereignis ein sprudeltes Ereignis ist oder nicht.
stornierbar Boolesche Wird verwendet, um anzugeben, ob ein Ereignis seine Standardaktion verhindert oder nicht.
Zeitstempel Domtimestamp Wird verwendet, um die Zeit (in Millisekunden im Verhältnis zur Epoche) anzugeben, zu der das Ereignis erstellt wurde.
Ereignismethoden
Name Argumentyp Argumentname Beschreibung
Stopppropagation Um eine weitere Ausbreitung eines Ereignisses während des Ereignisflusss zu verhindern.
Standard verhindern Um das Ereignis zu kündigen, wenn es storniert werden kann, was bedeutet, dass keine Standardaktionen, die normalerweise von der Implementierung aufgrund des Ereignisses erfolgt, nicht erfolgen.
inszenvent Domstring EventTypearg Gibt den Ereignisart an.
Boolesche Canbubblearg Gibt an, ob das Ereignis sprudeln kann oder nicht.
Boolesche Cancelablearg Gibt an, ob die Standardaktion des Ereignisses verhindert werden kann oder nicht.

Event -Handling -Modelle

DOM Level 0

Dieses Modell zur Bearbeitung von Veranstaltungen wurde von vorgestellt von Netscape Navigatorund bleibt das Cross-Browser-Modell ab 2005. Es gibt zwei Modelltypen: das Inline -Modell und das traditionelle Modell.

Inline -Modell

Im Inline -Modell,[20] Ereignishandler werden als Attribute von Elementen hinzugefügt. Im folgenden Beispiel eine Warndialogfeld mit der Nachricht "Hey Joe" erscheint nach der Hyperlink wird geklickt. Die Standard -Klickaktion wird abgebrochen, indem im Ereignishandler falsch zurückgegeben wird.

 <html Lang="en"> <Kopf> 	<Meta Charset="UTF-8"> 	<Titel>Inline -Event -HandhabungTitel> Kopf> <Karosserie> 	<H1>Inline -Event -HandhabungH1> 	<p>Hey <a href="http://www.example.com" ONCLICK="Triggeralert ('joe'); false zurück;">Joea>!p> 	<Skript> 		Funktion Triggeralert(Name) { 			Fenster.Alarm("Hey " + Name); 		} 	Skript> Karosserie> html>

Ein gemeinsames Missverständnis mit dem Inline -Modell ist die Überzeugung, dass es die Registrierung von Ereignishandlern mit benutzerdefinierten Argumenten ermöglicht, z. Name in dem Triggeralert Funktion. Während es so aussieht, als ob dies im obigen Beispiel der Fall ist, ist das, was wirklich passiert JavaScript -Engine des Browsers schafft eine Anonyme Funktion enthält die Aussagen in der ONCLICK Attribut. Das ONCLICK Der Handler des Elements wäre an die folgende anonyme Funktion gebunden:

Funktion () { 	Triggeralert("Joe"); 	Rückkehr FALSCH; }

Diese Einschränkung des JavaScript -Ereignismodells wird normalerweise überwunden, indem dem Funktionsobjekt des Ereignishandlers oder durch Verwendung Attribute zugewiesen wird Schließungen.

Traditionelles Modell

Im traditionellen Modell,[21] Ereignishandler können durch Skripte hinzugefügt oder entfernt werden. Wie das Inline -Modell kann jedes Ereignis nur einen Ereignis -Handler registrieren lassen. Das Ereignis wird hinzugefügt, indem der Handler -Name der Ereigniseigenschaft des Elementobjekts zugewiesen wird. Um einen Event -Handler zu entfernen, stellen Sie einfach die Eigenschaft auf NULL ein:

 <html Lang="en"> <Kopf> 	<Meta Charset="UTF-8"> 	<Titel>Traditionelle Event -HandhabungTitel> Kopf> <Karosserie> 	<H1>Traditionelle Event -HandhabungH1> 	 	<p>Hallo Joe!p> 	<Skript> 		var Triggeralert = Funktion () { 			Fenster.Alarm("Hallo Joe"); 		}; 		 		// einen Ereignishandler zuweisen 		dokumentieren.ONCLICK = Triggeralert; 		 		// einen anderen Ereignishandler zuweisen 		Fenster.Onload = Triggeralert; 		 		// Entfernen Sie den gerade zugewiesenen Event -Handler, der gerade zugewiesen wurde 		Fenster.Onload = Null; 	Skript> Karosserie> html>

Zum Hinzufügen von Parametern:

var Name = "Joe"; dokumentieren.ONCLICK = (Funktion (Name) { 	Rückkehr Funktion () { 		Alarm('Hey ' + Name + '!'); 	}; } (Name));

Innere Funktionen bewahren ihre Umfang.

DOM Level 2

Das W3C hat ein flexibleres Modell zur Handhabung von Ereignissen in DOM Level 2 entwickelt.[18]

Name Beschreibung Argumentyp Argumentname
AddEventListener Ermöglicht die Registrierung von Ereignishörern auf das Ereignisziel. Domstring Typ
EventListener Hörer
Boolesche usecapture
REMEDEVENTLISTENER Ermöglicht das Entfernen von Ereignishörern aus dem Ereignisziel. Domstring Typ
EventListener Hörer
Boolesche usecapture
DispatchEvent Ermöglicht das Senden der Veranstaltung an die abonnierten Event -Hörer. Vorfall evt

Einige nützliche Dinge zu wissen:

  • Um zu verhindern, dass ein Ereignis sprudelt, müssen Entwickler das anrufen StopPropagation () Methode des Ereignisobjekts.
  • Um die Standardaktion des zu rufenden Ereignisses zu verhindern, müssen Entwickler die aufrufen Standard verhindern() Methode des Ereignisobjekts.

Der Hauptunterschied zum traditionellen Modell besteht darin, dass mehrere Ereignishandler für dasselbe Ereignis registriert werden können. Das usecapture Die Option kann auch verwendet werden, um anzugeben, dass der Handler in der Erfassungsphase anstelle der sprudelnden Phase aufgerufen werden sollte. Dieses Modell wird von unterstützt von Mozilla, Oper, Safari, Chrom und Konqueror.

Ein Umschreiben des Beispiels im traditionellen Modell 

 <html Lang="en"> <Kopf>  <Meta Charset="UTF-8">  <Titel>DOM Level 2Titel> Kopf> <Karosserie>  <H1>DOM Level 2H1>        <p>Hallo Joe!p>              <Skript>  var Hallo Joe = Funktion () {  Fenster.Alarm("Hallo Joe!");  }             // einen Event -Handler hinzufügen  dokumentieren.AddEventListener( "klicken", Hallo Joe, Stimmt );  // Erfassungsphase             // fügen Sie einen anderen Event -Handler hinzu  Fenster.AddEventListener( "Belastung", Hallo Joe, FALSCH );  // sprudelnde Phase             // Entfernen Sie den gerade hinzugefügten Event -Handler  Fenster.REMEDEVENTLISTENER( "Belastung", Hallo Joe, FALSCH );  Skript> Karosserie> html>

Internet Explorer-spezifisches Modell

Microsoft Internet Explorer vor Version 8 folgt dem W3C -Modell nicht, da sein eigenes Modell vor der Ratifizierung des W3C -Standards erstellt wurde. Internet Explorer 9 folgt DOM Level 3 -Ereignissen.[22] und Internet Explorer 11 löscht seine Unterstützung für das Microsoft-spezifische Modell.[23]

Name Beschreibung Argumentyp Argumentname
Anhang Ähnlich wie die AddEventListener -Methode von W3C. Saite Sieber
Zeiger fpnotify
Ablösung Ähnlich wie bei der REME -EVentListener -Methode von W3C. Saite Sieber
Zeiger fpnotify
FireeEvent Ähnlich wie die DispatchEvent -Methode von W3C. Saite Sieber
Vorfall oeventObject

Einige nützliche Dinge zu wissen:

  • Um ein Ereignis zu verhindern, müssen Entwickler die Veranstaltung festlegen CancelBubble Eigentum.
  • Um die Standardaktion des zu rufenden Ereignisses zu verhindern, müssen Entwickler die Ereignis festlegen Rückgabewert Eigentum.
  • Das Dies Schlüsselwort bezieht sich auf die globale Fenster Objekt.

Auch dieses Modell unterscheidet sich vom traditionellen Modell, da mehrere Ereignishandler für dasselbe Ereignis registriert werden können. Jedoch das usecapture Die Option kann nicht verwendet werden, um anzugeben, dass der Handler in der Erfassungsphase aufgerufen werden sollte. Dieses Modell wird von Microsoft unterstützt Internet Explorer und Dreizackbasierte Browser (z.B. Maxthon, Avantbrowser).

Ein Umschreiben des Beispiels im alten Internet Explorer-spezifischen Modell 

 <html Lang="en"> <Kopf>  <Meta Charset="UTF-8">  <Titel>Internet Explorer-spezifisches ModellTitel> Kopf> <Karosserie>  <H1>Internet Explorer-spezifisches ModellH1>  <p>Hallo Joe!p>  <Skript>  var Hallo Joe = Funktion () {  Fenster.Alarm("Hallo Joe!");  }             // einen Event -Handler hinzufügen  dokumentieren.Anhang("Onclick", Hallo Joe);             // fügen Sie einen anderen Event -Handler hinzu  Fenster.Anhang("Onload", Hallo Joe);             // Entfernen Sie den gerade hinzugefügten Event -Handler  Fenster.Ablösung("Onload", Hallo Joe);  Skript> Karosserie> html>

Verweise

  • Deitel, Harvey. (2002). Internet und World Wide Web: Wie man programmiert (Zweite Ausgabe). ISBN0-13-030897-8
  • Die Mozilla -Organisation. (2009). DOM -Ereignisreferenz. Abgerufen am 25. August 2009.
  • Quirksmodode (2008). Ereigniskompatibilitätstabellen. Abgerufen am 27. November 2008.
  • http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-iphone/

Externe Links

Verweise

  1. ^ "DOM Standard". Dom.spec.whatwg.org. Abgerufen 2021-05-25.
  2. ^ "JavaScript DOM -Ereignisse". www.w3schools.com. Abgerufen 2019-08-03.
  3. ^ "7,8 Drag and Drop - HTML5".
  4. ^ "HTML Drag & Drop API".
  5. ^ "Fortschrittsereignisse".
  6. ^ "Datei -API".
  7. ^ "Element: Mousemove Ereignis - Web -APIs | Mdn".
  8. ^ "Dokumentobjektmodell (DOM) Stufe 3 Ereignisspezifikation (Arbeitsentwurf)". W3c. Abgerufen 2013-04-17.
  9. ^ a b c "Touch Events Version 2 - W3C Editor Entwurf". W3c. 14. November 2011. Abgerufen 10. Dezember 2011.
  10. ^ "Apple verwendet Patente, um wieder offene Standards zu untergraben". Opera.com. 9. Dezember 2011. Abgerufen 9. Dezember 2011.
  11. ^ "Zeigerereignisse".
  12. ^ "Indieui: Events 1.0".
  13. ^ "HTML Standard".
  14. ^ [1] Archiviert 11. Juni 2010 bei der Wayback -Maschine
  15. ^ "Welche Browser unterstützen native Domcontent -Ereignisse?« Perfection Labs Development Tipps ". 29. Juni 2011. Archiviert vom Original am 29. Juni 2011.{{}}: CS1 Wartung: Bot: Original -URL -Status unbekannt (Link)
  16. ^ "Test Laufwerk umleiten". Archiviert von das Original Am 2010-05-08. Abgerufen 2010-05-06.
  17. ^ "Einführung in Ereignisse". Quirksmodode.org. Abgerufen 15. September 2012.
  18. ^ a b "Dokumentobjektmodell (DOM) Stufe 2 Ereignisspezifikation". W3c. 13. November 2000. Abgerufen 15. September 2012.
  19. ^ "Dokumentobjektmodell (DOM) Stufe 3 Ereignisspezifikation (Arbeitsentwurf)". W3c. Abgerufen 2013-04-17.
  20. ^ "Frühe Event -Handler". Quirksmodode.org. Abgerufen 15. September 2012.
  21. ^ "Traditionelles Ereignisregistrierungsmodell". Quirksmodode.org. Abgerufen 15. September 2012.
  22. ^ "DOM Level 3 -Veranstaltungen unterstützen in IE9". Microsoft. 26. März 2010. Abgerufen 2010-03-28.
  23. ^ "Kompatibilitätsänderungen in der IE11 -Vorschau". Microsoft. 9. September 2013. Abgerufen 2013-10-05.