JavaScript: EventHandler und das event-Objekt

Eventhandler, was man damit machen kann und wie die Syntax aussieht, das erfahrt ihr hier.

Events (Ereignisse) sind etwas sehr wichtiges. Z.B. wird ein Ereignis ausgelöst, wenn man einen Schalter anklickt oder auch nur den Mauszeiger bewegt. Dieses Ereignis wird von dem Betriebssystem an den Browser weitergegeben. In JavaScript kann man solche Ereignisse abfangen und verarbeiten. Nur so kann eine Aktion ausgelöst werden, wenn z.B. ein Button gedrückt wird.
Event-Handler (also die Sprachelemente JavaScripts, die solche Events abfangen) beginnen in JavaScript immer mit „on“ Beispiele:

onClick
onBlur

Da solche Ereignisse mittlerweile sehr oft in reinem HTML gebraucht werden, wurden sie auch in den Sprachumfang von demselben aufgenommen und das W3C hat festgelegt, welche Tags solche Event-Handler als Attribute aufnehmen dürfen. Beispiele:

<textarea rows=„Zeilenanzahl„ cols=„Spaltenanzahl„ onchange=„Code, der ausgelÃ¶st werden soll, wenn <textarea> einen anderen Wert erhÃ¤lt„>

Im folgenden eine Tabelle mit allen (uns bekannten) Event-Handlern, ihrer Bedeutung und in welchen HTML-Tags sie genutzt werden dürfen.

Event:	Bedeutung:	HTML-Tags:
onAbort	Ist dazu gedacht, dass etwas gemacht wird, wenn der Besucher einer Site vorzeitig deren Aufbau unterbricht und manche Bilder nicht geladen werden können	<img> (Netscape)
onBlur	Für den Fall, das der Anwender ein zuvor aktiviertes Element verlässt (es verliert den Fokus)	<a>, <area>, <button>, <input>, <label>, <select>, <textarea>(HTML 4.0) <body>, <frameset>, <input>, <layer>, <select>, <textarea>(Netscape)
onChange	Für den Fall, das der Wert eines Elements geändert wurde	<input>, <select>, <textarea> (Netscape und HTML 4.0)
onClick	Für den Fall, das etwas einmal angeklickt wird	<a> <area>, <input>, <textarea>(Netscape) <a>, <abbr>, <acronym>, <address>, <area>, <b>, <big>, <blockquote>, <body>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hr>, <i>, <img>, <input>, <ins>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <menu>, <noframes>, <noscript>, <object>, <ol>, <optgroup>, <option>, <p>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <u>, <ul>, <var>(HTML 4.0)
onDblClick	Für den Fall, dass etwas doppelt angeklickt wird	s. onClick
onError	Tut irgendetwas (natürlich vom Programmierer gewolltes), wenn ein Fehler beim Erzeugen eines Bildes aufgetreten ist	<img>(Netscape)
onFocus	Für den Fall, dass ein Element den Fokus erhält(das markierte Element hat den Fokus)	<body>, <frame>, <input>, <layer>, <select>, <textarea> (Netscape) <a>, <area>, <button>, <input>, <label>, <select>, <textarea>(HTML 4.0)
onKeydown	Tritt auf, wenn ein Benutzer bei aktiviertem Element eine Taste drückt	<input>, <textarea> (Netscape) s. onClick (HTML 4.0)
onKeypress	Tritt ein, wenn der User eine Taste drückt und gedrückt hält	s. onKeydown
onKeyup	Tritt auf, wenn eine Taste losgelassen wird	s. onKeydown
onLoad	Tritt auf, wenn eine HTML-Datei geladen wird	<frameset>, <body> (Netscape und HTML 4.0)
onMousedown	Tritt auf, wenn Maustaste gedrückt wird	<input type=“button“>, <a> (Netscape) s. onClick (HTML 4.0)
onMousemove	Tritt auf, wenn Maustaste bewegt wird	nur in Zusammenhang mit event-Objekt (Netscape) s. onClick (HTML 4.0)
onMouseout	Tritt auf, wenn beim Bewegen des Mauszeigers ein Element verlassen wird	<a>, <area> (Netscape) s. onClick (HTML 4.0)
onMouseover	Tritt auf, wenn ein Element überfahren wird (mit der Maus, nicht mit dem Auto;-) )	s. onMousout
onMouseup	Tritt auf, wenn die Maustaste losgelassen wird	s. onMousedown
onReset	Tritt auf, wenn der Anwender Eingaben in einem Formular verwirft	<form> (Netscape)
onSelect	Tritt auf, wenn Text selektiert wird	<input>, <textarea> (Netscape)
onSubmit	Tritt auf, wenn ein Formular abgesendet wird	<form (Netscape)
onUnload	Tritt auf, wenn ein HTML-Dokument verlassen wird	<frameset>, <body> (Netscape)

Achtung! Der Netscape Navigator 4.x erlaubt diese Event-Handler oft nur für weniger HTML-Tags und andere Browser fabrizieren Fehler bei manchen dieser Event-Handler. Für genauere Informationen kann man in SelfHTML o. Ä. unter Event-Handler nachgucken.

Zusätzlich gibt es noch einen Parameter, den man bei Verweisen angeben kann: javascript:. Es ist genau genommen gar kein Event-Handler, sondern eine Syntax, die eingeführt wurde, um auch Verweise auf JavaScript-Code fabrizieren zu können. Dazu muss man dem Parameter href in Anführungszeichen das oben gezeigte Gebilde übergeben. Hinter den Doppelpunkt kann man dann ganz normalen JavaScript-Code eingeben. Ein Beispiel, das das Datum der letzten Modifikation an dem HTML-Dokument ausgibt:

<html>
<head>
<title>Letzte Modifikation</title>
</head>
<body>
<a href=„javascript:document.write(document.lastModified)„>Letztes Update</a>
</body>
</html>

Wenn man dabei mehrere Anweisungen ausführen will, sollte man diese in eine Funktion schreiben und dann diese aufrufen.

Das event-Objekt in JavaScript

Mit dem event-Objekt kann man genaue Werte z.B. über die Position des Mauszeigers ermittlen. Außerdem ist es möglich, auch auf bestimmte Tasten zu reagieren. Folgende Tabelle enthält die Methoden von event:

Methode:	Bedeutung:
altKey, ctrlKey, shiftKey (Microsoft-Syntax)	Speichert, ob Zusatztasten gemeinsam mit einer Anderen (auch Maus) gedrückt sind (Alt-Taste, Strg-Taste, Shift-Taste)
clientX, clientY (Microsoft-Syntax)	Speichert horizontale (clientX) und vertikale (clientY) Cursorpositionen);linke obere Ecke Punkt 0\|0
keyCode (Microsoft-Syntax)	Speichert ASCII-Code der aktuellen Taste
layerX, layerY (Netscape-Syntax)	Speichert aktuelle Breite (layerX) und Höhe (layerY) eines Objekts, wenn bei onResize überwacht wird, sonst die Cursorpositionen ,wobei linke obere Layer-Position 0\|0 (Netscape 6.1 speichert in beiden Variablen nur 0!!)
modifiers (Netscape)	Speichert, ob Zusatztasten zusammen mit anderer Taste (auch Maus) gedrückt wurden
offsetX, offsetY (Microsoft)	Speichert die Cursorposition in einem Element, das ein Ereignis auszulösen hat
pageX, pageY (Netscape)	aktuelle Cursorposition im Dokument
screenX, screenY (Netscape)	Speichert Cursorposition, beginnt nicht links oben 0\|0, sondern benutzt Bildschirmauflösung
which (Netscape)	Speichert ASCII-Code bei Zeichen;Maustaste bei Maus
type (Netscape)	Speichert, welches Ereignis aufgetreten ist, aber ohne Präfix (on)
x, y (Microsoft)	Speichert Cursor-Koordinaten relativ zum Elternfenster (z.B. das Formular, auf dem ein Button angeordnet ist)

Hier gibt es mal wieder ein Beispiel, das direkt aus SelfHTML geklaut ist. Das Beispiel zeigt aber trotzdem schön, dass man beim event-Objekt für die beiden verschiedenen Browser ganz unterschiedliche Syntaxen braucht und deshalb zwei Teile dafür schreiben muss. Andere Browser sind dabei noch nicht einmal berücksichtigt.

<html>
<head>
<title>Test</title>
<script type=“text/javascript„>
<!–
var Netscape = new Boolean();
if(navigator.appName == „Netscape„) Netscape = true;
function TasteGedrueckt(Ereignis)
{
if(Netscape)
{ window.status = „Taste mit Dezimalwert „ + Ereignis.which + „ gedrueckt„; return true; }
}
function TasteLosgelassen(Ereignis)
{
if(Netscape)
{ window.status = „Taste mit Dezimalwert „ + Ereignis.which + „ losgelassen„„document„ event=„onkeydown()„ type=„text/jscript“>
<!–
{ window.status = „Taste mit Dezimalwert “ + window.event.keyCode + “ gedrueckt“; return true; }
//–>
</script>
<script for=„document„ event=„onkeyup()„ type=„text/jscript„>
<!–
{ window.status = „Taste mit Dezimalwert „ + window.event.keyCode + „ losgelassen„; return true; }
//–>
</script>
</head>
</body>

Erläuterung des Quellcodes:

Der Quellcode reagiert auf einen Tastendruck in das leere HTML-Dokument und schreibt deren ASCII-Code und ob die Taste gedrückt oder ob sie losgelassen wurde in die Statuszeile des Browsers. Dazu muss das Dokument den Fokus haben (einfach anklicken). Der erste Bereich des Codes soll nur von Netscape-Browsern, die schon JavaScript 1.2 können, ausgeführt werden, weshalb immer nach dem Browser gefragt werden muss (der Internet Explorer würde das ja auch interpretieren, aber Fehler verursachen). Die beiden letzten Teile werden nur vom Internet Explorer ausgeführt, da nur er die Sprache JScript kann. In beiden Teilen werden die Funktionen TasteGedrückt und TasteLosgelassen deklariert, die ihrem Namen nach arbeiten. In der Funktion TasteGedrückt wird der ASCII-Code und dass die Taste gedrückt wurde ausgegeben, in TasteLosgelassen wird ebenfalls der ASCII-Code ausgegeben, und zusätzlich, dass die Taste losgelassen wurde.