Mausereignisse beginnen in dem Moment, in dem ein Anwender die Maus über den Anzeigebereich eines Elements bewegt. Jeder Mausklick ist ein Ereignis, wobei ein Mausklick letztlich aus mehreren Einzelereignissen besteht, nämlich dem Drücken der Maustaste, dem Gedrückthalten und dem Loslassen. Auch Mausrad-Bewegungen lassen sich abfangen. Die Mausereignisse gelten natürlich ebenso für Eingabegeräte oder Eingabeformen, die eine Maus simulieren, also etwa Touchpads, Touchscreens, Trackpoints usw.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Mausereignisse</title> <script> function mouse_pos(e) { if(!e) e = window.event; var doc = (window.document.compatMode && window.document.compatMode == "CSS1Compat") ? window.document.documentElement : window.document.body; return { top: e.pageY ? e.pageY : e.clientY + doc.scrollTop - doc.clientTop, left: e.pageX ? e.pageX : e.clientX + doc.scrollLeft - doc.clientLeft }; } function show_mouse_pos(obj) { var pos = mouse_pos(); document.getElementById('mouse_info').innerHTML = pos.top + " / " + pos.left; } var bgcolor = "#FFFFFF"; function toggle_bgcolor() { bgcolor == "#FFFFFF" ? bgcolor = "#FFFF33" : bgcolor = "#FFFFFF"; document.getElementById('dyntext').style.backgroundColor = bgcolor; } </script> </head> <body> <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <h1>onmousedown - onmouseup</h1> <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <p>Klicken Sie auf den Button und lassen Sie die Maustaste einige Zeit heruntergedrückt, um den Event-Handler in Aktion zu sehen:</p> <form><input type="button" value="Klick mich!" onmousedown="this.value = 'Maustaste wurde gedrückt!';" onmouseup="this.value = 'Maustaste wurde losgelassen!';"></form> <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <h1>onmousemove</h1> <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <p style="border: solid 1px silver; padding: 3px;" id="mouse_info"> </p> <p style="border: solid 1px silver; padding: 3px;" onmousemove="show_mouse_pos()"> Bewegen Sie den Mauscursor<br>über diesen Text</p> <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <h1>onmouseover - onmouseout - onclick</h1> <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <p id="dyntext" style="cursor:pointer" onmouseover="this.innerHTML = 'Sehen Sie?'" onmouseout="this.innerHTML = 'Ich bin dynamisch'" onclick="toggle_bgcolor();">Ich bin dynamisch</p> </body> </html>
Das Beispiel zeigt ein vollständiges HTML-Dokument. Im Dokumentkopf ist ein Scriptbereich notiert. Der Dokumentkörper stellt insgesamt drei kleine Beispiele für Event-Handler im Zusammenhang mit Mausereignissen vor.
Einige Ereignisse hängen komplementär zusammen. So etwa die die Ereignisse mousedown (Maustaste wurde gedrückt) und mouseup (Maustaste wurde wieder losgelassen), oder mouseover (Maus wird über ein Element bewegt) und mouseout (Maus wird aus einem Element herausbewegt).
Im ersten der Beispiele wird eine Schaltfläche (<input type="button">) definiert. Darin sind die beiden Event-Handler onmousedown (wenn Maustaste gedrückt wurde) und onmouseup (wenn Maustaste wieder losgelassen wurde) notiert. Wenn eines der beiden Ereignisse eintritt, wird der Wert des Elementattributs value mit einem entsprechenden Text überschrieben. Das bedeutet: die Schaltfläche zeigt zunächst Klick mich an. Wenn der Anwender darauf klickt, ändert sich die Schaltflächenbeschriftung in Maustaste wurde gedrückt, und wenn der Anwender den Mausklick beendet, ändert sie sich nochmals, nämlich in Maustaste wurde losgelassen. Die Wertzuweisungen an die Event-Handler onmousedown und onmouseup sind jeweils ein JavaScript-Statement. Mit this wird das aktuelle Element als DOM-HTML-Objekt adressiert. Jedes Attribut des Elements ist dabei eine Objekteigenschaft. Mit this.attributname kann lesend oder ändernd auf ein Attribut zugegriffen werden.
Das zweite Beispiel enthält zwei Textabsätze. Der erste enthält zunächst nur ein erzwungenes Leerzeichen ( ) als Inhalt. Der zweite enthält etwas Inhalt und im einleitenden <p>-Tag den Event-Handler onmousemove. Das Ziel ist, im ersten Textabsatz jederzeit die Koordinaten der aktuellen Mausposition anzuzeigen, während der Anwender die Maus über den Inhalt des zweiten Textabsatzes bewegt. Leider ist das nicht ganz trivial, weshalb das Script-Statement, das dem Event-Handler onmousemove zugewiesen ist, eine Funktion namens show_mouse_pos() aufruft. Diese Funktion ist in dem Scriptbereich im Dokumentkopf notiert. Diese ruft wiederum eine allgemeinere Funktion namens mouse_pos() auf. Letztere ermittelt browser-übergreifend die gewünschten Mauskoordinaten und gibt sie in Form eines anonymen Objekts zurück. Das zurückgegebene Objekt von mouse_pos()wird in der aufrufenden Funktion show_mouse_pos() in einer Variablen namens pos gespeichert. In den Objekteigenschaften pos.top bzw. pos.left stehen die Mauskoordinaten. Diese werden von der Funktion show_mouse_pos() dynamisch in den ersten Textabsatz geschrieben.
Das dritte Beispiel besteht aus einem einzigen Textabsatz mit dem Default-Text Ich bin dynamisch. Der Event-Handler onmouseover (beim Überfahren des Elementinhalts mit der Maus) weist dem Elementinhalt mit this.innerHTML einen anderen Inhalt zu, sobald der Anwender den Mauscursor über den Erstreckungsbereich des Elements bewegt. Dieser neue Inhalt würde jedoch auch stehen bleiben, wenn der Anwender den Mauscursor wieder aus dem Elementbereich herausbewegt. Mit dem Event-Handler onmouseout wird dieses Ereignis jedoch abgefangen, und wenn es eintritt, wird mit einer weiteren this.innerHTML-Zuweisung der ursprüngliche Text wiederhergestellt.
Außerdem enthält das <p>-Tag des Textabsatzes noch einen onclick-Event-Handler. Zugewiesen ist diesem Event-Handler im Beispiel ein Aufruf einer Funktion namens toggle_bgcolor(). Der Event-Handler wird ausgelöst, wenn der Anwender mit der Maus in den Bereich des Elements klickt. Wenn man so will, ist onclick die Summe von onmousedown und onmouseup. Die Funktion toggle_bgcolor() bewirkt ein abwechselndes Ändern der Hintergrundfarbe des Elements. In der Variablen bgcolor merkt sie sich den jeweils aktuellen Zustand der Hintergrundfarbe.
In den obigen Beispielen wird jedem Event-Handler immer nur ein JavaScript-Statement zugeordnet. Es ist aber durchaus erlaubt, auch mehrere Statements zuzuordnen. Alle außer dem letzten Statement müssen dabei mit einem Semikolon (;) abgeschlossen werden.
Es gibt weitere Event-Handler für Mausereignisse. Details siehe Eventreferenz.
Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.