CSS, HTML und Javascript mit {stil}

mouseover, mousemove, mouseout, mousedown, mouseup

Javascript Events: onmouseover, onmousemove, onmouseout, onmousedown, onmouseup

onmouseover ruft einen Event Handler auf, wenn die Maus in ein Element bewegt wird.

mouseover entdeckt die Bewegung der Maus, wenn der Cursor die Grenze zum Element passiert hat (mousemove hingegen bereits an der Grenze zum Element).

Mouse-Events müssen heute mit Umsicht behandelt werden: Mobilgeräte werden nicht mit der Maus gesteuert, sondern durch einen Touch und durch Gesten mit dem Finger. Touch-Pads am Notebook und Smartphones, iPhone und iPad reagieren nicht unbedingt auf Maus-Events, sondern auf Touch-Events.

Nicht nur das Entdecken eines mouseover ist interessant, sondern auch die Frage, woher die Maus kam?

<div><img src="mouseover.png" id="image1" /></div>
<p id="response"></p>
document.getElementById('image1').onmouseover = function (evt) {
   evt = (evt) ? evt : ((window.event) ? window.event : "");
   var theBox = this.parentNode;
   var elem = (evt.target) ? evt.target : evt.srcElement;
   var relTarget = (evt.relatedTarget) ? evt.relatedTarget : evt.fromElement;
   var response = document.getElementById ('response');
   response.innerHTML = ' Maus kommt von ' + relTarget.tagName + 
   Auslösendes Element ist ' + elem.tagName; 
   if (this.src == 'img/mouseout.png') {
      this.src = 'img/mouseover.png';
   } else {
      this.src = 'img/mouseout.png';
   } 
}  

onmousedown, onmouseup

Javascript mouseup ruft einen Event Handler auf, wenn eine Maustaste über einem Element losgelassen wird. onmousedown ruft einen Event-Handler auf, wenn der Benutzer eine Taste der Maus über einem Element herunterdrückt.

Das Herunterdrücken einer Maustaste erzeugt immer drei Ereignisse: mousedown, mouseup und click, die in dieser Reihenfolge nacheinander abgearbeitet werden. Jedes Ereignis muss abgearbeitet sein, bevor das nächste Ereignis beginnen kann.

onmousedown – schnellere Reaktion bei Animationen

Auf den ersten Blick scheint onmousedown viel mit dem onclick-Event gemeinsam zu haben. Der entscheidende Unterschied: Das Event onmousedown feuert bereits, wenn der Benutzer die Maustaste herunterdrückt. Das Event onclick feuert, wenn die Taste heruntergedrückt und losgelassen wurde. onclick ist also eine Kombination aus onmousedown und onmouseup. mousedown anstelle von click kann dem Benutzer eine viel schnellere Reaktion bescheren als click.

onmousedown wird nicht oft verwendet, denn in den meisten Programmen kann der Benutzer den versehentlichen Klick auf ein Element noch zurücknehmen, indem er mit der bereits gedrückten Maustaste das Element wieder verläßt. Das funktioniert beim onclick-Event, nicht aber beim onmousedown-Event.

Hier ist also nichts mit »schnell noch runter vom Button«. Der Button reagiert bereits, wenn der Benutzer die Maustast auf dem Button herunterklickt, noch bevor die Maustaste wieder losgelassen wird.

document.getElementById('theButton').onmousedown = function (evt) {
	evt = (evt) ? evt : ((window.event) ? window.event : "");
	var elem = (evt.target) ? evt.target : evt.srcElement;
	…
}

Auf die Box klicken, um die Hintergrundfarbe zu ändern

document.getElementById('thisBox').onmouseup = function (event) {
   this.setAttribute ('style','background: #E4F1F9');
}

onmousemove

Javascript onmousemove ruft einen Event Handler auf, wenn die Maus über einem Element bewegt wird. mousemove feuert bei jedem Pixel, um den die Maus bewegt wird.

onmousemove bleibt aktiv, solange sich der Mauszeiger innerhalb des Elements befindet. Wenn der Mauszeiger das Element verlässt, wird onmouseout feuern.

<div id="theInput"></div>
<p id="thisBox"></p>
document.getElementById('theInput').onmousemove = function(event) {
	evt = (evt) ? evt : ((window.event) ? window.event : "");
	var elem = (evt.target) ? evt.target : evt.srcElement;
	var redbox = document.getElementById('redbox');
	
	redbox.innerHTML = 'pageX ' + evt.pageX + ' pageY ' + evt.pageY + 
		' clientX ' + evt.clientX + ' clientY ' + evt.clientY + ' und Sie halten ' + evt.button;
}

onmouseout

Javascript onmouseout löst einen Event Handler aus, wenn die Maus aus einem Element herausbewegt wird. Das mouseout-Event feuert in dem Augenblick, in dem der Mauszeiger die Grenze des Elements von innen nach außen überquert.

Das onmouseout-Event liefert im Parameter »relatedTarget« auch das Element, das die Maus beim Event betritt.

Vorsicht: Meist erwarten wir ein mouseover-Ereignis, aber hier tritt das Ereignis erst ein, wenn die Maus aus dem Bild herausbewegt wird.

var on = false;
document.getElementById('onout').onmouseout = function (event) {
   if (on == false) {
      c1.setAttribute ('fill-opacity','1');
      on = true;
   } else {
      c1.setAttribute ('fill-opacity','0');
      on = false;
   }
} 

Attribute für Mouse Events

button
die Maustaste, die das Ereignis auslöst
relatedTarget
Beim mouseover das Element, das die Maus verlässt, wenn sie das Ereignis-auslösende Element betritt, beim mouseout-Ereignis das Element, das die Maus betritt, wenn sie das Ereignis-auslösende Element verlässt.
type
Typ des Ereignisses
target
Objekt zu dem das Ereignis ursprünglich gesendet wurde
eventPhase
Phase, in der das Ereignis bearbeitet wird: AT_TARGET, BUBBLING_PHASE, CAPTURING_PHASE
bubbles
true, wenn das Ereignis nach oben steigen kann
cancelable
true, wenn die Aktion des Ereignis verhindert werden kann
timeStamp
Zeit in Millisekunden, zu der das Ereignis eingetreten ist
screenX, screenY, clientX, clientY
Position des Mauszeigers zum Zeitpunkt des Ereignisses
altKey, ctrlKey, shiftKey, metaKey
zusätzlich gedrückte Tasten