JavaScript/DOM/Event

JavaScript-Programme bestehen aus zwei Hauptbestandteilen:

1. Synchroner Code, der beim Aufruf eines Scripts sofort ausgeführt wird
2. Asynchroner Code, der ausgeführt wird, wenn in der Umgebung, in der JavaScript ausgeführt wird, irgendetwas geschieht.

Es ist Aufgabe des synchronen Codeteils, der Ausführungsumgebung bekanntzugeben, für welche Geschehnisse sich das Script interessiert und welche Funktion aufzurufen ist, um auf das Geschehen zu reagieren.

Der Mechanismus, mit dem JavaScript dies steuert, nennt sich Event, und Objekte, die in einem Browser Geschehnisse mittels eines Events signalisieren können, sind ein EventTarget. Andere Ausführungsumgebungen, wie beispielsweise node.js, verwenden teils andere Mechanismen.

Typische EventTargets sind die Elementobjekte von HTML- oder SVG-Elementen, es gibt aber noch viele mehr. Events auf den Elementobjekten des DOM informieren Sie über Benutzeraktionen mit Tastatur, Maus oder Touchscreen, aber auch über den Fortschritt von asynchron ausgeführten Operationen wie das Laden von Bildern oder der Fortschritt einer Animation.

Die Funktion, die bei Auslösen eines Events aufzurufen ist, ist der event handler. Das DOM übergibt ihm ein Objekt, das Auskunft über die Umstände gibt, die das Event ausgelöst haben. Dieses Objekt verfügt über eine Reihe von Eigenschaften und Methoden, die als die Event-Schnittstelle bezeichnet werden.

Wenn Ihnen das Thema noch ganz neu ist, sollten Sie sich zunächst mit den folgenden Tutorials befassen. Im Anschluss an diese Liste finden Sie eine Übersicht über die Event-Schnittstelle und eine Aufstellung der Events, die im DOM ausgelöst werden können.

Tutorials

… für Anfänger

• Grundlagen der Ereignisverarbeitung

… für Fortgeschrittene

• Ereignisbehandlung
• Mouse and more (Eventverarbeitung mit Maus, Touch oder Stift)
• Debounce und Throttle (Bei einer Kette von Events Funktionen nicht zu oft aufrufen)

Die Event-Schnittstelle

Eigenschaften

• altKey, ctrlKey, shiftKey
• button
• clientX, clientY
• screenX, screenY
• bubbles
• cancelable
• currentTarget
• target
• timeStamp
• charCode, keyCode, key, which (Tastaturabfragen)

Methoden

• createEvent
• handleEvent
• initEvent
• preventDefault
• stopImmediatePropagation
• stopPropagation

Events

A

• abort (Abbruch beim Laden der Seite, unvollständig geladen)
• activate (ausgelöst ↔ click)
• afterprint (nach dem Druckereignis)
• animationend (CSS-animation beendet)
• animationiteration (CSS-animation wiederholt)
• animationstart (CSS-animation begonnen)

B

• beforeprint (vor Auslösen des Druckereignis)
• beforeunload
• blur (beim Verlassen)

C

• canplay (bereit zum Abspielen)
• canplaythrough (bereit zum Abspielen bis zum Ende)
• change (bei erfolgter Änderung)
• click (beim Anklicken)
• contextmenu (wenn die rechte Maustaste ein Kontextmenü anfordert)
• copy (in Zwischenablage kopiert)
• cuechange
• cut (ausgeschnitten)

D

• dblclick (bei doppeltem Anklicken)
• DOMContentLoaded (DOM ist geladen)
• drag (Element gezogen)
• dragend (Ziehen beendet)
• dragenter (Ziel erreicht)
• dragleave (Ziel verlassen)
• dragover (Ziehen auf Ziel)
• dragstart (Ziehen begonnen)
• drop (Element abgelegt)
• durationchange (Änderung der Dauer)

E

• emptied (Medien-Datei nicht verfügbar)
• ended (Ende der Medien-Datei erreicht)
• error (Element nicht richtig geladen o. Skript läuft fehlerhaft)

F

• focus (beim Aktivieren)
• focusin (wenn ein Element angeklickt wird)
• focusout (wenn ein Element verlassen wird)

G

• gotpointercapture

H

• hashchange (wenn Anker aufgerufen werden)

I

• input (wenn etwas eingeben wird)
• invalid (Wenn eine Eingabe ungültig ist)

J

• javascript

K

• keydown (bei gedrückter Taste)
• keypress (bei gedrückt gehaltener Taste)
• keyup (bei losgelassener Taste)

L

• languagechange (Sprache wird geändert)
• load (Elemente & Unterelement vollständig geladen)
• loadeddata (Daten sind geladen)
• loadedmetadata (Metadaten sind geladen)
• loadstart (Laden der Daten begonnen)
• lostpointercapture

M

• message (eine Nachricht erhalten)
• mousedown (bei gedrückter Maustaste)
• mouseenter (beim Überfahren des Elements)
• mouseleave (beim Verlassen des Elements)
• mousemove (bei weiterbewegter Maus)
• mouseout (beim Verlassen des Elements)
• mouseover (beim Überfahren des Elements)
• mouseup (bei losgelassener Maustaste)
• mousewheel (bei Drehen des Mausrads)

O

• offline (nicht mit dem Server verbunden)
• online (mit dem Server verbunden)

P

• pageshow (angezeigt wird.)
• pagehide (versteckt, im Hintergrund)
• paste (aus Zwischenablage eingefügt)
• pause (pausiert)
• play (Abspielen nach Pause)
• playing (Abspielen nach Pause)
• pointercancel
• pointerdown (wenn Zeiger (Maus, Touch oder Stift) auslöst)
• pointerenter (wenn aktive Fläche erreicht wird)
• pointerleave (wenn aktive Fläche verlassen wird)
• pointermove (wenn Zeiger sich bewegt)
• pointerout
• pointerover
• pointerup (wenn Maustaste losgelassen wird oder Fingerberührung auf Touchdisplay endet)
• popstate (wenn sich die active history ändert)
• progress (Download läuft)

R

• ratechange (Änderung der Abspielgeschwindigkeit)
• reset (beim Zurücksetzen des Formulars)
• resize (beim Verändern der Fenstergröße)

S

• scroll (Dokumentansicht wird entlang der x/y-Achsen verschoben)
• search (wenn etwas in einem Suchformular gesucht wird)
• seeked (wenn Nutzer andere Stelle ausgesucht hat)
• seeking (wenn Nutzer zu anderer Stelle geht)
• select (beim Selektieren von Text)
• stalled (Laden des Mediums nicht erfolgt)
• storage (Speicher-Ereignis)
• submit (beim Absenden des Formulars)
• suspend (Ende des Ladens)

T

• timeupdate (Änderung der playback Position)
• toggle (Bei Klick auf Details Element)
• touchcancel (Abbruch der Berührung ↔ mouseout)
• touchend (Ende der Berührung ↔ mouseup)
• touchmove (Wischen ↔ mousemove)
• touchstart (Beginn der Berührung ↔ mousedown)
• transitionend (CSS-transition beendet)

U

• unload (beim Verlassen der Datei)

V

• volumechange (Lautstärkeänderung)

W

• waiting (buffering, wenn gewartet werden muss)
• wheel (wenn sich das Mausrad bewegt)

Z

• zoom (Dokument-Zoom-Stufe oder aktueller Maßstab wird geändert)

Allgemeines zu Event-Handlern

Events (Ereignisse) und Event-Handler (Ereignisbehandler) sind ein wichtiges Bindeglied zwischen HTML und JavaScript. Event-Handler werden entweder in Form von HTML-Attributen, besser aber mittels der Methode addEventListener hinzugefügt.

Es gibt in JavaScript bestimmte Anwenderereignisse (events), click etwa für das Ereignis "Anwender hat mit der Maus geklickt". Der Anzeigebereich des HTML-Elements, mit dem der Event-Handler verbunden ist, ist das auslösende Element. Wenn der Event-Handler click beispielsweise in einem Formular-Button notiert wird, wird der damit verknüpfte JavaScript-Code nur dann ausgeführt, wenn der Mausklick im Anzeigebereich dieses Elements erfolgt.

Empfehlung: Gemäß den Regeln des unaufdringlichen JavaScript sollten Event-Handler in der Regel nicht als HTML-Attribute, sondern dynamisch mit addEventListener an HTML-Elemente angehängt werden.