Um dem Nutzer Aktionen zu ermöglichen, mit denen er irgdneine Verändeurng der SCG-Grafik auslösen kann, verfügt Raphaël über eine Reihe von sogenannten Eventhandlern. Das sind im Einzelnen:
Zunächst wird ein SVG-Objekt erzeugt, dem wird ein Event-Handler zugewiesen, der beim Auslösen eine beliebige andere Funktion ausführt.
Bei dem nachfolgenden Beispiel versteckt ein Klick auf das rote Quadrat den Kreis, ein Doppelklick auf das gelbe Quadrat macht ihn wieder sichtbar.
Der Quellcode dazu sieht so aus:
window.onload = function () {
prettyPrint();
// SVG-Zeichnungsfläche mit 640x100 Pixel im Element mit ID event1 erstellen
var paper = Raphael("event1", 640, 100);
// Quadrate erzeugen
var q1 = paper.rect(10, 10, 50, 50).attr("fill","#f00");
var q2 = paper.rect(70, 10, 50, 50).attr("fill","#ff0");
// Kreis erzeugen
var c1 = paper.circle(150, 35, 25);
// dem Quadrat einen click event-Handler zuweisen der beim Auslösen...
q1.click(function () {
//mit Klick den Kreis versteckt
c1.hide();
});
q2.dblclick(function () {
//mit Doppelklick den Kreis zeigt
c1.show();
});
}
Die beiden Quadrate sind zwar einerseits zur besseren Unterscheidung farblich gefüllt. Die Füllung hat jedoch noch einen anderen Grund: bei einem ungefüllten Objekt müsse man genau auf die Begrenzungslinie klicken. Es ist nicht sinnvoll, einem Nutzer eine derartige Zielübung zuzumuten. Daher solte man immer auf die Füllung achten und diese ggf. transparent machen.
Weitere Erklärungen und Beispiele zu den Event-Handlern bei Raphaël bei Bedarf.