HTML DOM Ereignis

HTML-DOM-Ereignisse

HTML-DOM-Ereignisse ermöglichen es JavaScript, verschiedene Event-Handler für HTML-Dokument-Elemente zu registrieren.

Ereignisse werden normalerweise in Kombination mit Funktionen verwendet, und Funktionen werden nicht ausgeführt, bevor das Ereignis eintritt! (z. B. wenn ein Benutzer auf eine Schaltfläche klickt).

Tipp:Das Ereignismodell ist in den W3C DOM Level 2 Events standardisiert.

HTML-DOM-Ereignisse

DOM：Gibt die verwendete DOM-Attributstufe an.

Maus-Ereignisse

Attribute Beschreibung DOM
onclick Event-Handler, der aufgerufen wird, wenn der Benutzer auf ein Objekt klickt. 2
oncontextmenu Wird ausgelöst, wenn der Benutzer mit der rechten Maustaste klickt, um das Kontextmenü zu öffnen  
ondblclick Event-Handler, der aufgerufen wird, wenn der Benutzer auf ein Objekt doppelklickt. 2
onmousedown Die Maustaste wird gedrückt. 2
onmouseenter Wird ausgelöst, wenn der Mauszeiger auf ein Element kommt. 2
onmouseleave Wird ausgelöst, wenn der Mauszeiger ein Element verlässt. 2
onmousemove Die Maus wird bewegt. 2
onmouseover Die Maus wird über ein Element bewegt. 2
onmouseout Die Maus wird von einem Element weg bewegt. 2
onmouseup Die Maustaste wird losgelassen. 2

Tastatur-Ereignisse

Attribute Beschreibung DOM
onkeydown Eine Tastaturtaste wird gedrückt. 2
onkeypress Eine Tastaturtaste wird gedrückt und losgelassen. 2
onkeyup Eine Tastaturtaste wird losgelassen. 2

Frame-/Objekt-Ereignisse

Attribute Beschreibung DOM
onabort Das Laden eines Bildes wird unterbrochen. ( <object>) 2
onbeforeunload Dieses Ereignis wird ausgelöst, wenn die Seite verlassen werden soll (Aktualisieren oder Schließen). 2
onerror Beim Laden eines Dokuments oder eines Bildes tritt ein Fehler auf. ( <object>, <body> und <frameset>)  
onhashchange Dieses Ereignis wird ausgelöst, wenn der Ankerteil der aktuellen URL geändert wird.  
onload Eine Seite oder ein Bild wurde vollständig geladen. 2
onpageshow Dieses Ereignis wird ausgelöst, wenn der Benutzer die Seite besucht.
onpagehide Dieses Ereignis wird ausgelöst, wenn der Benutzer die aktuelle Seite verlässt und zu einer anderen Seite navigiert.
onresize Die Größe des Fensters oder Frames wird geändert. 2
onscroll Ereignis, das auftritt, wenn ein Dokument gescrollt wird. 2
onunload Der Benutzer verlässt die Seite. ( <body> und <frameset>) 2

Formular-Ereignisse

Attribute Beschreibung DOM
onblur Wird ausgelöst, wenn ein Element den Fokus verliert. 2
onchange Dieses Ereignis wird ausgelöst, wenn sich der Inhalt eines Formularelements ändert ( <input>, <keygen>, <select> und <textarea>) 2
onfocus Wird ausgelöst, wenn ein Element den Fokus erhält. 2
onfocusin Wird ausgelöst, wenn ein Element kurz davor ist, den Fokus zu erhalten. 2
onfocusout Wird ausgelöst, wenn ein Element kurz davor ist, den Fokus zu verlieren. 2
oninput Wird ausgelöst, wenn ein Element Benutzereingaben empfängt. 3
onreset Wird ausgelöst, wenn ein Formular zurückgesetzt wird. 2
onsearch Wird ausgelöst, wenn der Benutzer Text in ein Suchfeld eingibt ( <input="search">)  
onselect Wird ausgelöst, wenn der Benutzer Text auswählt ( <input> und <textarea>) 2
onsubmit Wird ausgelöst, wenn ein Formular übermittelt wird. 2

Zwischenablage-Ereignisse

Attribute Beschreibung DOM
oncopy Dieses Ereignis wird ausgelöst, wenn der Benutzer den Inhalt eines Elements kopiert.  
oncut Dieses Ereignis wird ausgelöst, wenn der Benutzer den Inhalt eines Elements ausschneidet.  
onpaste Dieses Ereignis wird ausgelöst, wenn der Benutzer den Inhalt eines Elements einfügt.  

Druckereignisse

Attribute Beschreibung DOM
onafterprint Dieses Ereignis wird ausgelöst, nachdem die Seite mit dem Drucken begonnen hat, oder wenn das Druckfenster geschlossen wurde.  
onbeforeprint Dieses Ereignis wird ausgelöst, wenn die Seite kurz davor ist, mit dem Drucken zu beginnen.  

Drag-Ereignisse

Ereignis Beschreibung DOM
ondrag Dieses Ereignis wird ausgelöst, wenn ein Element gezogen wird.  
ondragend Dieses Ereignis wird ausgelöst, wenn der Benutzer das Ziehen eines Elements beendet.  
ondragenter Dieses Ereignis wird ausgelöst, wenn ein gezogenes Element das Drop-Ziel betritt.  
ondragleave Dieses Ereignis wird ausgelöst, wenn ein gezogenes Element das Drop-Ziel verlässt.  
ondragover Dieses Ereignis wird ausgelöst, wenn sich ein gezogenes Element über dem Drop-Ziel befindet.  
ondragstart Dieses Ereignis wird ausgelöst, wenn der Benutzer beginnt, ein Element zu ziehen.  
ondrop Dieses Ereignis wird ausgelöst, wenn ein gezogenes Element auf dem Zielbereich abgelegt wird.  

Medienereignisse

Ereignis Beschreibung DOM
onabort Das Ereignis wird ausgelöst, wenn das Video/Audio (Audio/Video) das Laden abbricht.  
oncanplay Das Ereignis wird ausgelöst, wenn der Benutzer mit der Wiedergabe des Videos/Audios (Audio/Video) beginnen kann.  
oncanplaythrough Das Ereignis wird ausgelöst, wenn das Video/Audio (Audio/Video) normal ohne Pausieren und Puffern abgespielt werden kann.  
ondurationchange Das Ereignis wird ausgelöst, wenn sich die Dauer des Videos/Audios (Audio/Video) ändert.  
onemptied Wird ausgelöst, wenn die aktuelle Wiedergabeliste leer ist.  
onended Das Ereignis wird ausgelöst, wenn die Wiedergabe von Video/Audio (Audio/Video) endet.  
onerror Das Ereignis wird ausgelöst, wenn beim Laden von Video/Audio-Daten (Audio/Video-Daten) ein Fehler auftritt.  
onloadeddata Das Ereignis wird ausgelöst, wenn der Browser den aktuellen Frame des Video/Audio (Audio/Video) lädt.  
onloadedmetadata Das Ereignis wird ausgelöst, nachdem die Metadaten des angegebenen Video/Audio (Audio/Video) geladen wurden.  
onloadstart Das Ereignis wird ausgelöst, wenn der Browser mit der Suche nach dem angegebenen Video/Audio (Audio/Video) beginnt.  
onpause Das Ereignis wird ausgelöst, wenn das Video/Audio (Audio/Video) pausiert wird.  
onplay Das Ereignis wird ausgelöst, wenn das Video/Audio (Audio/Video) mit der Wiedergabe beginnt.  
onplaying Das Ereignis wird ausgelöst, wenn das Video/Audio (Audio/Video) pausiert ist oder bereit ist, die Wiedergabe nach dem Puffern fortzusetzen.  
onprogress Das Ereignis wird ausgelöst, wenn der Browser das angegebene Video/Audio (Audio/Video) herunterlädt.  
onratechange Das Ereignis wird ausgelöst, wenn sich die Wiedergabegeschwindigkeit des Video/Audio (Audio/Video) ändert.  
onseeked Das Ereignis wird ausgelöst, nachdem der Benutzer die Wiedergabeposition des Video/Audio (Audio/Video) geändert hat.  
onseeking Das Ereignis wird ausgelöst, wenn der Benutzer beginnt, die Wiedergabeposition des Video/Audio (Audio/Video) zu ändern.  
onstalled Das Ereignis wird ausgelöst, wenn der Browser Mediendaten abruft, aber die Mediendaten nicht verfügbar sind.  
onsuspend Das Ereignis wird ausgelöst, wenn der Browser das Lesen von Mediendaten abbricht.  
ontimeupdate Das Ereignis wird ausgelöst, wenn sich die aktuelle Wiedergabeposition ändert.  
onvolumechange Das Ereignis wird ausgelöst, wenn sich die Lautstärke ändert.  
onwaiting Das Ereignis wird ausgelöst, wenn das Video puffern muss, um den nächsten Frame abzuspielen.  

Animationsereignisse

Ereignis Beschreibung DOM
animationend Dieses Ereignis wird ausgelöst, wenn eine CSS-Animation fertig abgespielt ist.  
animationiteration Dieses Ereignis wird ausgelöst, wenn eine CSS-Animation wiederholt wird.  
animationstart Dieses Ereignis wird ausgelöst, wenn eine CSS-Animation zu spielen beginnt.  

Übergangsereignisse

Ereignis Beschreibung DOM
transitionend Dieses Ereignis wird ausgelöst, nachdem der CSS-Übergang abgeschlossen wurde.  

Weitere Ereignisse

Ereignis Beschreibung DOM
onmessage Dieses Ereignis wird ausgelöst, wenn eine Nachricht durch ein Objekt oder von einem Objekt (WebSocket, Web Worker, Event Source, einem untergeordneten Frame oder einem übergeordneten Fenster) empfangen wird.  
onmousewheel Veraltet.Verwenden Sie stattdessen dasonwheel-Ereignis.  
ononline Dieses Ereignis wird ausgelöst, wenn der Browser online geht.  
onoffline Dieses Ereignis wird ausgelöst, wenn der Browser offline geht.  
onpopstate Dieses Ereignis wird ausgelöst, wenn sich der Browserverlauf (history-Objekt) des Fensters ändert.  
onshow Dieses Ereignis wird ausgelöst, wenn das <menu>-Element im Kontextmenü angezeigt wird.  
onstorage Dieses Ereignis wird ausgelöst, wenn Web Storage (HTML 5 Web Storage) aktualisiert wird.  
ontoggle Dieses Ereignis wird ausgelöst, wenn der Benutzer das <details>-Element öffnet oder schließt.  
onwheel Dieses Ereignis wird ausgelöst, wenn das Mausrad über einem Element nach oben oder unten gescrollt wird.  
visibilitychange Dieses Ereignis wird verwendet, um zu erkennen, ob sich der Sichtbarkeitszustand der aktuellen Seite geändert hat.  

Event-Objekt

Konstanten

Statische Variablen Beschreibung DOM
CAPTURING-PHASE Die aktuelle Ereignisphase ist die Capture-Phase (1) 1
AT-TARGET Das aktuelle Ereignis ist die Zielphase, wobei das Zielereignis ausgewertet wird (1) 2
BUBBLING-PHASE Das aktuelle Ereignis ist die Bubble-Phase (3) 3

Eigenschaften

Eigenschaften Beschreibung DOM
bubbles Gibt einen booleschen Wert zurück, der angibt, ob das Ereignis ein Bubbling-Ereignistyp ist. 2
cancelable Gibt einen booleschen Wert zurück, der angibt, ob das Ereignis eine abbrechbare Standardaktion hat. 2
currentTarget Gibt das Element zurück, dessen Ereignis-Listener das Ereignis ausgelöst hat. 2
eventPhase Gibt die aktuelle Phase der Ereignispropagierung zurück. 2
target Gibt das Element zurück, das dieses Ereignis ausgelöst hat (den Zielknoten des Ereignisses). 2
timeStamp Gibt das Datum und die Uhrzeit zurück, zu der das Ereignis erzeugt wurde. 2
type Gibt den Namen des Ereignisses zurück, das durch das aktuelle Event-Objekt dargestellt wird. 2

Methoden

Methoden Beschreibung DOM
initEvent() Initialisiert die Eigenschaften eines neu erstellten Event-Objekts. 2
preventDefault() Teilt dem Browser mit, die mit dem Ereignis verbundene Standardaktion nicht auszuführen. 2
stopPropagation() Stoppt die Weitergabe des Ereignisses. 2

Zielereignisobjekt

Methoden

Methoden Beschreibung DOM
addEventListener() Ermöglicht das Registrieren von Listener-Ereignissen für das Zielereignis (IE8 = attachEvent()) 2
dispatchEvent() Ermöglicht das Senden von Ereignissen an Listener (IE8 = fireEvent()) 2
removeEventListener() Führt ein am Ereignisziel registriertes Listener-Ereignis einmal aus (IE8 = detachEvent()) 2

Ereignis-Listener-Objekt

Methoden

Methoden Beschreibung DOM
handleEvent() Registriert ein beliebiges Objekt als Ereignishandler. 2

Document-Ereignisobjekt

Methoden

Methoden Beschreibung DOM
createEvent()   2

Maus-/Tastatur-Ereignisobjekte

Eigenschaften

Eigenschaften Beschreibung DOM
altKey Gibt zurück, ob "ALT" gedrückt wurde, als das Ereignis ausgelöst wurde. 2
button Gibt zurück, welche Maustaste angeklickt wurde, als das Ereignis ausgelöst wurde. 2
clientX Gibt die horizontale Koordinate des Mauszeigers zurück, als das Ereignis ausgelöst wurde. 2
clientY Gibt die vertikale Koordinate des Mauszeigers zurück, als das Ereignis ausgelöst wurde. 2
ctrlKey Gibt zurück, ob die Taste "CTRL" gedrückt wurde, als das Ereignis ausgelöst wurde. 2
Ort Gibt die Position der Taste auf dem Gerät zurück. 3
charCode Gibt den Zeichencode des Tastenwerts zurück, der das onkeypress-Ereignis ausgelöst hat. 2
key Gibt den Bezeichner der Taste zurück, wenn die Taste gedrückt wird. 3
keyCode Gibt den Zeichencode des durch das onkeypress-Ereignis ausgelösten Tastenwerts oder den Tastencode des onkeydown- oder onkeyup-Ereignisses zurück. 2
which Gibt den Zeichencode des durch das onkeypress-Ereignis ausgelösten Tastenwerts oder den Tastencode des onkeydown- oder onkeyup-Ereignisses zurück. 2
metaKey Gibt zurück, ob die "meta"-Taste gedrückt wurde, als das Ereignis ausgelöst wurde. 2
relatedTarget Gibt den Knoten zurück, der mit dem Zielknoten des Ereignisses verknüpft ist. 2
screenX Gibt die horizontale Koordinate des Mauszeigers zurück, wenn ein Ereignis ausgelöst wurde. 2
screenY Gibt die vertikale Koordinate des Mauszeigers zurück, wenn ein Ereignis ausgelöst wurde. 2
shiftKey Gibt zurück, ob die "SHIFT"-Taste gedrückt wurde, als das Ereignis ausgelöst wurde. 2

Methoden

Methoden Beschreibung W3C
initMouseEvent() Initialisiert den Wert des Mausereignis-Objekts. 2
initKeyboardEvent() Initialisiert den Wert des Tastaturereignis-Objekts. 3
Weitere Erweiterungen