Events
<< < > >> > Hauptteil > Interaktion > Events

2. Hauptteil
   2.6 Interaktion
     2.6.2 Events
     2.6.3 SVG DOM

Interaktion beginnt meistens damit, dass ein Event - also ein benutzergesteuertes Ereignis - ausgelöst wird. Dieses wird erst dann auch zu Interaktion, wenn als Antwort eine Animation oder ein Skript gestartet wird. Es gibt drei verschiedene Aspekte in SVG, die von Events beeinflusst werden:

  1. SVG stellt die sogenannten "Event attributes" für die Elemente zur Verfügung, die Skripte beinhalten für den Fall, dass das bezeichnete Event ausgelöst wird. Diese Art des Event-Listeners wird aus HTML bekannt sein, das auch Event-Attribute wie "onmouseover" etc. anbietet (Bsp.: <rect onclick="doSomething()"/>). Die Beispiele werden diese Art des Eventlistenings benutzen.
  2. Benutzt man das SVG DOM, kann das Skript DOM2 Eventlistener registrieren und wiederum eine Behandlung für ein eingehendes Event beschreiben. Das bedeutet, dass man ein Objekt für das Element hat, welches das Event auslösen soll (wie man darauf zugreift, erfolgt in den nächsten Kapiteln), und für dieses Objekt die Funktion addEventListener(Event-Name, Funktionsname, 'false') aufruft. Dieses Verfahren wird am Ende von Kapitel 2.6.3.2 kurz vorgestellt.
  3. Zudem können SVG Animationen auf ein Event hin beginnen und enden.

Die Events, die SVG definiert hat, sind in den folgenden Tabellen aufgelistet. Die erste Tabelle listet die Events auf, die sich auf das gesamte SVG-Dokument beziehen und daher nur für das <svg>-Element ausgelöst werden.

Event-Name event attribute Beschreibung
SVGLoad onload Das Event wird ausgelöst, wenn das SVG-Dokument vollständig geladen ist.
SVGUnload onunload Das Event wird ausgelöst, wenn das SVG-Dokument aus dem Viewer entfernt wird.
SVGAbort onabort Das Event wird ausgelöst, wenn das Laden des SVG-Dokuments vor seiner Vollendung abgebrochen wird.
SVGError onerror Das Event wird ausgelöst, wenn ein Fehler durch ein Skript oder fehlerhaftes Laden der Elemente auftritt.
SVGZoom onzoom Das Event wird ausgelöst, wenn der zoom-Level verändert wird.
SVGResize onresize Das Event wird ausgelöst, wenn die Größe der SVG verändert wird.
SVGScroll onscroll Das Event wird ausgelöst, wenn innerhalb der SVG gescrollt wird.

Die nächste Tabelle zeigt die Events an, die für Grafik- und Textelemente ausgelöst werden können:

Event-name event-attribute DOM2 name Bedeutung
focusin onfocusin DOMFocusIn Das Event tritt ein, wenn ein Element den Focus erhält, z. B. wenn Text markiert wird.
focusout onfocusout DOMFocusOut Das Event tritt ein, wenn ein Element den Foucs verliert, z. B. wenn markierter Text die Markierung verliert.
activate onactivate DOMActivate Das Event tritt ein, wenn ein Element beispielsweise durch einen Mausklick aktiviert wird.
click onclick DOMClick Das Event tritt ein, wenn ein Zeigegerät (meist ja die Maus) das Element anklickt.
mousedown onmousedown DOMMouseDown Das Event tritt ein, wenn ein Zeigegerät über dem Element gedrückt wird.
mouseup onmouseup DOMMouseUp Das Event tritt ein, wenn über dem Element eine gedrückte Taste eines Zeigegeräts gelöst wird.
mouseover onmouseover DOMMouseOver Das Event tritt ein, wenn sich der Cursor über dem Element befindet.
mousemove onmousemove DOMMouseMove Das Event tritt ein, wenn sich der Cursor über dem Element bewegt
mouseout onmouseout DOMMouseOut Das Event tritt ein, wenn der Cursor sich aus dem Element raus bewegt.

Die letzte Tabelle zeigt die Events, die innerhalb einer Animation auftreten können und auch nur in einem der Animations-Tags vorkommen dürfen:

Event-Name event attribute Beschreibung
beginEvent onbegin Das Event wird ausgelöst, wenn die Animation gestartet wird.
endEvent onend Das Event wird ausgelöst, wenn die Animation beendet wird.
repeatEvent onrepeat Das Event wird jedes Mal ausgelöst, wenn die Animation wiederholt wird.

Das Beispiel 45 zeigt, wie eine Geometrie - ein runder Button - auf ein Maus-Event, genauer gesagt dem onmouseover-Event, mit einer Animation reagiert. Die Gruppe, die die Elemente des Buttons umschliesst, besitzt zwei Event-Attribute, onmouseover und onmouseout. Die Werte der Event-Attribute sind Skripte zum Starten der zwei Animationen mit den ids "btnId" (diese Animation verändert die Farbe des Buttoninneren) und "warningAni" (diese Animation macht den "warning!"-Text sichtbar). Die Skripte müssen jetzt noch nicht verstanden werden, da sie in den nächsten Kapiteln erst erklärt werden. Also, einfach mal mit der Maus über den Button fahren! Es sollte noch einmal daran erinnert werden, dass die Attribute begin und end der Animationen auf den Wert "indefinite" gesetzt werden müssen, damit das SVG weiss, dass diese Zeitpunkte Skript-gesteuert sind.

In diesem Kapitel fällt eines sicher auf: es wurden bisher keine Tastaturereignisse erwähnt. Das liegt daran, dass das SVG Event Modell keine Tastaturereignisse unterstützt. Der SVG Viewer von Adobe interpretiert nichts desto trotz die Events keydown, keyup und keypress. Da dies eigentlich W3C-unkonform ist, wird im Tutorial nicht weiter darauf eingegangen. Da aber der SVG-Standard ständig erneuert wird, ist es ratsam, auf diesen Punkt ein Auge zu behalten.