CSS, HTML UND JAVASCRIPT MIT {STIL}

Mouse-Events müssen heute mit Umsicht behandelt werden: Immer mehr Geräte werden nicht mehr mit der Maus gesteuert. Touch-Pads am Notebook und Smartphones, iPhone und iPad reagieren nicht unbedingt auf Maus-Events, sondern auf Touch-Events.

Das Interessante an einem mouseover-Event ist die Frage: Woher kam die Maus?

<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.

document.getElementById('image1').onmouseout = function (event) {
	if (this.src == 'chips.png') {
		this.src = 'mix.png';
	} else if (this.src == 'mix.png') {
		this.src = 'chips.png';
	} 
} 

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