Mit Javascript erfolgt die Zuordnung des oder der zu überwachenden
Events an eigene Event Handler Programme.
▲
Zunächst wird das zu überwachende DOM-Element (hier die
Grafik raster, alternativ das
gesamte <body>-Element) als
Objekt an eine Variable
(hier n) zugewiesen.
▼
Leider ist die Syntax nicht einheitlich: Gängige Browser verwenden 2
verschiedene Methoden: attachEvent
oder addEventListener
▲
Beide Methoden werden ausprobiert.
Variable ok zeigt an,
ob eine der Methoden funktioniert hat. Halten sie die gezeigte Reihenfolge
ein, denn Opera ergibt mit addEventListener keinen Fehler,
funktioniert jedoch nicht.
▲
Dieser Code kann erst nach dem Laden der Webseite, muss jedoch
vor der Verwendung ausgeführt werden - Sinnvoll mit
einem onload-Handler des
<body>-Elements.
♦ Details zu
Objekten und
DOM-Methoden.
|
Javascript:
var n=document.getElementById("raster");
// var n=document.getElementsByTagName("body")[0];
var ok=false;
try{
n.attachEvent("onmouseover",my_over);
n.attachEvent("onmouseout",my_out);
n.attachEvent("onmousedown",my_down);
n.attachEvent("onmouseup",my_up);
n.attachEvent("onmousemove",my_move);
n.attachEvent("onclick",my_click);
ok = true; // M$IE, Opera
}
catch(e) {}
if(!ok) {
try{
n.addEventListener("mouseover",my_over,true);
n.addEventListener("mouseout",my_out,true);
n.addEventListener("mousedown",my_down,true);
n.addEventListener("mouseup",my_up,true);
n.addEventListener("mousemove",my_move,true);
n.addEventListener("click",my_click,true);
ok=true; // Gecko (Firefox), [Opera ohne Wirkung]
}
catch(e) {}
}
if(!ok) {alert("Fehler...");}
|
●
Wenn sie nicht alle Ereignisse überwachen wollen, dann löschen sie die
entsprechenden Anweisungen.
●
Wenn sie zusätzlich das Event dblclick nutzen wollen,
dann fügen sie die entsprechende Anweisung ein.
●
Sie müssen sämtliche angegebenen Handler-Funktionen
( my_over...my_click ) zur Verfügung stellen.
|
●
Wenn sie zusätzliche Elemente überwachen wollen, dann fügen sie
entsprechende Anweisungen ein.
●
Im Beispiel werden auch die beiden Fadenkreuz-Linien überwacht.
Da diese vor der Grafik liegen, ergeben sich beim Überfahren
der Linien mouseout und mouseover Ereignisse,
die jedoch hier nicht eigens ausgeblendet werden.
|
Javascript
Links zum Thema 'Mouse events'
Microsoft: die Anzahl der Möglichkeiten sagt nichts über deren Brauchbarkeit...
Mozilla:
