SELFHTML/Navigationshilfen JavaScript/DOM Sprachelemente| SELFHTML/Navigationshilfen JavaScript/DOM Sprachelemente |
 |
Event-Handler |
|
|
 | |
Event-Handler (Ereignis-Behandler) sind ein wichtiges Bindeglied zwischen HTML und JavaScript. Event-Handler werden meist in Form von Attributen in HTML-Tags notiert. Da es sich um Bestandteile handelt, die innerhalb von HTML vorkommen, hat das W3-Konsortium die Event-Handler mittlerweile auch in den HTML-Sprachstandard mit aufgenommen (siehe auch 
Universalattribute: 
Event-Handler). Dort wird auch festgelegt, in welchen HTML-Tags welcher Event-Handler vorkommen darf. Das Problem dabei ist jedoch, dass die Praxis derzeit noch stark davon abweicht - zumindest bei Netscape 4.x. Der MS Internet Explorer dagegen interpretiert Event-Handler seit seiner Version 4.x weitgehend so universell wie vom W3-Konsortium vorgesehen. Bei den Beschreibungen der Event-Handler auf dieser Seite wird jeweils versucht, auf die Problematik einzugehen. Letztendlich hilft aber nur: selber im Einzelfall mit mehreren verschiedenen Browsern testen und ausprobieren.
Event-Handler erkennen Sie daran, dass solche HTML-Attribute immer mit on beginnen, zum Beispiel onClick=. Hinter dem Istgleichzeichen notieren Sie - in Anführungszeichen, eine JavaScript-Anweisung. Wenn Sie mehrere Anweisungen ausführen wollen, dann definieren Sie sich dazu am besten in einem JavaScript-Bereich eine Funktion und rufen hinter dem Istgleichzeichen diese Funktion auf, also z.B. onClick="Umrechnen()".
Jeder Event-Handler steht für ein bestimmtes Anwenderereignis, onClick= etwa für das Ereignis "Anwender hat mit der Maus geklickt". Der Anzeigebereich des HTML-Elements, in dem der Event-Handler notiert ist, ist das auslösende Element. Wenn der Event-Handler onClick= beispielsweise in einem Formularbutton notiert wird, wird der damit verknüpfte JavaScript-Code nur dann ausgeführt, wenn der Mausklick im Anzeigebereich dieses Elements erfolgt. Das mag Ihnen jetzt selbstverständlich vorkommen. Ist es auch, solange es beispielsweise um Formularbuttons geht. Aber nach dem erweiterten Modell von HTML 4.0 kann etwa auch ein HTML-Bereich, der mit <div>...</div> definiert wird, einen Event-Handler wie onClick= enthalten.
Es wurden nur solche Event-Handler aufgenommen, die auch tatsächlich in HTML-Tags vorkommen können und im HTML-4.0-Standard erwähnt sind (mit Ausnahme von onAbort= und onError=). Das sind weniger, als Netscape und der MS Internet Explorer kennen. Bei Netscape kommt verwirrenderweise hinzu, dass einige Event-Handler zwar so bezeichnet werden, aber eigentlich gar nicht innerhalb von HTML-Tags vorkommen können. Es ist zu hoffen, dass es hierbei in Zukunft mehr Übereinstimmungen zwischen Sprachstandards und Browser-Implementierungen geben wird.
|
onAbort (bei Abbruch)Ist für den Fall gedacht, dass ein Anwender im Browser den Stop-Button drückt, obwohl noch nicht alle Grafiken geladen wurden.
Nach JavaScript (Netscape) erlaubt in folgendem HTML-Tag:
<img>
Anzeigebeispiel: So sieht's aus (beim Aufruf sofort ESC drücken!)
<html><head><title>Test</title>
</head><body>
<img src="onabort.jpg" width="400" height="600" alt="Grafik"
onAbort="alert('Schade, dass Sie das Bild nicht sehen wollen')">
</body></html>
|
Im Beispiel wird eine Grafik in HTML referenziert. Für den Fall, dass der Anwender den Stop-Button im Browser drückt, bevor die Grafik ganz geladen ist, wird mit alert() eine Meldung ausgegeben.
Dieser Eventhandler gehört nicht zum HTML-Standard und wird vom Netscape 6 und Opera 5 nicht interpretiert.
|
|
onBlur (beim Verlassen)Für den Fall, dass ein Element zuvor aktiviert war und der Anwender es jetzt verlässt.
Nach JavaScript (Netscape) erlaubt erlaubt in folgenden HTML-Tags:
<body> <frameset> <input> <layer> <select> <textarea>
Nach HTML 4.0 erlaubt in folgenden HTML-Tags:
<a> <area> <button> <input> <label> <select> <textarea>
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
</head><body>
<form name="Test" action="">
Name: <input type="text" name="Eingabe" onBlur="CheckInhalt(this.value)"><br>
Name oder nichts eingeben und dann woanders hinklicken!
</form>
<script type="text/javascript">
document.Test.Eingabe.focus();
function CheckInhalt(Feld)
{
if(Feld == "") {
alert("Namensfeld muss einen Inhalt haben!");
document.Test.Eingabe.focus();
return false;
}
}
</script>
</body></html>
|
Im Beispiel wird ein Formular definiert, das ein Eingabefeld enthält. Unterhalb des Formulars ist ein JavaScript-Bereich notiert. Der Bereich wird deshalb unterhalb des Formulars definiert, weil zu Beginn des Bereichs gleich eine Anweisung ausgeführt wird, die die Existenz des Formulars bereits voraussetzt. Diese Anweisung (document.Test.Eingabe.focus();) setzt den Cursor in das Eingabefeld. Dort soll der Anwender seinen Namen eingeben. Klickt er dann irgendwo anders hin, wird der EventHandler onBlur aktiv, der im HTML-Tag des Eingabefeldes notiert ist. Dabei wird die Funktion CheckInhalt() aufgerufen, die ebenfalls in dem JavaScript-Bereich notiert ist. Diese Funktion fragt ab, ob die ihr übergebene Zeichenkette, der Inhalt des Namensfeldes, leer ist. Wenn ja, wird ein Meldungsfenster ausgegeben, und der Cursor wird wieder in das Feld positioniert.
Unter Opera 5.02 erzeugt die Verwendung dieses Beispieles eine unendliche Schleife, da die Bestätigung des Meldungsfensters ebenfalls den EventHandler auslöst. Mit Opera 5.12 wurde dieses Problem behoben.
|
|
onChange (bei erfolgter Änderung)Für den Fall, dass ein Element einen geänderten Wert erhalten hat.
Nach HTML 4.0 und JavaScript 1.2 (Netscape) erlaubt in folgenden HTML-Tags:
<input> <select> <textarea>
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> </head><body> <form name="Test" action=""> <textarea rows="5" cols="40" onChange="alert(this.value)">Bearbeiten Sie diesen Text hier und klicken Sie dann woanders hin! Oder lassen Sie ihn unbearbeitet und klicken dann woanders hin!</textarea> </body></html> |
Im Beispiel wird ein Formular mit einem mehrzeiligen Eingabefeld definiert. Wenn der Anwender irgendetwas in das Feld eingibt und anschließend woanders hin klickt, wird der Event-Handler onChange aktiv, der im HTML-Tag des mehrzeiligen Eingabefeldes notiert ist. Im Beispiel wird einfach der aktuelle geänderte Inhalt des Feldes in einem Meldungsfenster ausgegeben.
|
|
onClick (beim Anklicken)Für den Fall, dass der Anwender ein Element anklickt.
Nach JavaScript (Netscape) erlaubt erlaubt in folgenden HTML-Tags:
<a> <area> <input> <textarea>
Nach HTML 4.0 erlaubt in folgenden HTML-Tags:
<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>
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> </head><body> <form name="Test" action=""> <input size="30" name="Ausgabe" readonly><br> <input type="button" value="Letzter Update" onClick="this.form.Ausgabe.value=document.lastModified"> </form> </body></html> |
Im Beispiel wird ein Formular mit einem Eingabefeld (das jedoch auf "readonly", also nur Lesen gesetzt wird) und einem Button definiert. Der Button hat die Aufschrift "Letzter Update". Beim Anklicken des Buttons wird der Event-Handler onClick aktiv, der im HTML-Tag des Buttons definiert ist. Im Beispiel wird daraufhin in das Eingabefeld der Zeitpunkt der letzten Änderung am Dokument geschrieben.
|
|
onDblClick (bei doppeltem Anklicken)Für den Fall, dass der Anwender ein Element doppelt anklickt.
Nach JavaScript (Netscape) erlaubt erlaubt in folgenden HTML-Tags:
<a> <area> <input> <textarea>
Nach HTML 4.0 erlaubt in folgenden HTML-Tags:
<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>
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> </head><body> <form name="Rechnen" action=""> Wert: <input size="10" name="Wert"> <input type="button" value="Doppelklick = hoch 2" onDblClick="document.Rechnen.Wert.value=document.Rechnen.Wert.value*document.Rechnen.Wert.value"> </form> </body></html> |
Im Beispiel wird ein Formular mit einem Eingabefeld und einem Button definiert. Im Button ist der Event-Handler onDblClick= notiert. Der Button reagiert daher nur auf Doppelklick. Wenn der Anwender doppelt auf den Button klickt, wird von dem Wert, den er in dem Eingabefeld eingegeben hat, das Quadrat errechnet, und das Ergebnis wird wiederum in das Eingabefeld geschrieben.
Bei Netscape-Browsern unter Macintosh und unter Opera ist dieser Event-Handler nicht verfügbar!
|
|
onError (im Fehlerfall)Eignet sich zum Abfangen von Fehlermeldungen und zum Ersetzen solcher Meldungen durch eigene. Beachten Sie jedoch, dass dadurch nicht die Fehler selbst beseitigt werden! onError ist vor allem zum Handling von Fehlern beim Laden von Grafiken gedacht.
Nach JavaScript erlaubt in folgendem HTML-Tag:
<img>
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
</head><body>
<img src="gibtsnicht.gif" onError="alert('an dieser Stelle
sollte eine Grafik stehen,\n doch leider kann sie nicht angezeigt werden!')">
</body></html>
|
Im Beispiel wird in einer Grafikreferenz der Event-Handler onError= notiert. Er wird dann aktiv, wenn die Grafikdatei nicht existiert oder nicht angezeigt werden kann. Im Beispiel wird dann ein entsprechendes Meldungsfenster ausgegeben.
|
|
onFocus (beim Aktivieren)Tritt ein, wenn der Anwender ein Element aktiviert.
Nach JavaScript (Netscape) erlaubt erlaubt in folgenden HTML-Tags:
<body> <frame> <input> <layer> <select> <textarea>
Nach HTML 4.0 erlaubt in folgenden HTML-Tags:
<a> <area> <button> <input> <label> <select> <textarea>
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> </head><body> <form name="Test" action=""> <input size="30" onFocus="this.value='Hier Ihren Namen eingeben'"><br> <input size="30" onFocus="this.value='Hier Ihren Wohnort eingeben'"><br> <input size="30" onFocus="this.value='Hier Ihr Alter eingeben'"><br> </form> </body></html> |
In dem Beispiel wird ein Formular definiert, das drei Eingabefelder enthält. Da die Felder unbeschriftet sind, hat der Anwender keine Ahnung, was der in die einzelnen Felder eingeben kann. Bewegt er den Cursor aus Neugier doch in eines der Eingabefelder, wird der Event-Handler onFocus= des jeweiligen Feldes aktiv. Dabei wird in das jeweilige Feld eine Aufforderung geschrieben, was in dem Feld einzugeben ist.
|
|
onKeyDown (bei gedrückter Taste)Tritt ein, wenn der Anwender, während er ein Element aktiviert hat, eine Taste drückt.
Nach JavaScript (Netscape) erlaubt erlaubt in folgenden HTML-Tags:
<input> <textarea>
Nach HTML 4.0 erlaubt in folgenden HTML-Tags:
<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>
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
function Aktualisieren() {
document.Test.Kontrolle.value = document.Test.Eingabe.value.length + 1;
return true;
}
</script>
</head><body>
<form name="Test" action="">
Kurzbeschreibung Ihrer Homepage (max 50 Zeichen):<br>
<input type="text" name="Eingabe" size="40" onKeyDown="Aktualisieren(this.value)">
<input type="text" value="0" readonly size="3" name="Kontrolle"><br>
<input type="reset">
</form>
</body></html>
|
Im Beispiel wird ein Formular definiert, in dem der Anwender eine Kurzbeschreibung seiner Homepage in einem Eingabefeld abliefern kann. Der Text soll maximal 50 Zeichen lang sein. Damit der Anwender nicht mitzählen muss, gibt es ein kleines Eingabefeld nebendran, in dem nach jedem Tastendruck ausgegeben wird, wie viele Zeichen bereits eingegeben wurden. Dazu ist in dem Eingabefeld mit Namen Eingabe der Event-Handler onKeyDown= notiert. Er bewirkt, dass, solange der Anwender in dem Formularfeld etwas eingibt, bei jedem Tastendruck die Funktion Aktualisieren() aufgerufen wird, die im Dateikopf in einem Scriptbereich definiert ist. Diese Funktion errechnet aus document.Test.Eingabe.value.length + 1, wie viele Zeichen bereits eingegeben wurden, und schreibt eine entsprechende Ausgabe in das dafür vorgesehene "Eingabe"-Feld.
|
|
onKeyPress (bei gedrückt gehaltener Taste)Tritt ein, wenn der Anwender eine Taste drückt und diese gedrückt hält.
Nach JavaScript (Netscape) erlaubt erlaubt in folgenden HTML-Tags:
<input> <textarea>
Nach HTML 4.0 erlaubt in folgenden HTML-Tags:
<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>
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> </head><body> <form name="Test" action=""> <input type="text" size="30" name="Eingabe" onKeyPress="alert(this.value)"> </form> </body></html> |
Im Beispiel ist ein Formular mit einem Eingabefeld definiert. Wenn der Anwender in dem Eingabefeld etwas eingibt, wird bei jedem Tastendruck in einem Meldungsfenster der aktuelle Wert des Formularfeldes ausgegeben. Dazu ist in dem Eingabefeld der Event-Handler onKeypress= notiert. Er tritt in Aktion, wenn eine Taste gedrückt und gedrückt gehalten wird.
In Netscape 4.x und Opera 5 wird dieser EventHandler stets nach dem EventHandler onKeyDown ausgeführt. Gibt der EventHandler onKeyDown den Wert false zurück, so wird unter Netscape die Ausführung des EventHandlers onKeyPress unterdrückt. Im MS Internet Explorer unterdrückt der EventHandler onKeyPress den Eventhandler onKeyDown.
Im MS Internet Explorer können Sie zusätzlich die Eigenschaften des event-Objekts abfragen.
|
|
onKeyup (bei losgelassener Taste)Tritt ein, wenn der Anwender eine Taste gedrückt hat und diese wieder loslässt.
Nach JavaScript (Netscape) erlaubt erlaubt in folgenden HTML-Tags:
<input> <textarea>
Nach HTML 4.0 erlaubt in folgenden HTML-Tags:
<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>
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> </head><body> <form name="Test" action=""> <input type="text" size="30" name="Eingabe" onKeyup="this.form.Ausgabe.value=this.value"><br> <input type="text" readonly size="30" name="Ausgabe"><br> <input type="reset"> </form> </body></html> |
Im Beispiel wird ein Formular definiert, das zwei Eingabefelder mit den Namen Eingabe und Ausgabe enthält. Wenn der Anwender in dem oberen Feld, also dem, das für die Eingabe gedacht ist, etwas eingibt, wird der Wert automatisch Zeichen für Zeichen in das untere, also das Ausgabefeld übernommen. Dazu ist im Eingabefeld der Event-Handler onKeyup notiert. Dieser Event-Handler tritt in Aktion, wenn der Anwender in dem Feld eine Taste gedrückt und wieder losgelassen hat, was ja bei jedem eingegebenen Zeichen der Fall ist. Mit this.form.Ausgabe.value=this.value wird dem Ausgabefeld der aktuelle Wert des Eingabefeldes zugewiesen.
|
|
onLoad (beim Laden einer Datei)Tritt ein, wenn eine HTML-Datei geladen wird.
Nach JavaScript (Netscape) und HTML 4.0 erlaubt erlaubt in folgenden HTML-Tags:
<frameset> <body>
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function NaviFenster() {
Navigation = window.open("navigat.htm","Navigation","height=100,width=300");
Navigation.focus();
}
// -->
</script>
</head>
<body onLoad="NaviFenster()">
<h1>Seite mit "Fernbedienung"</h1>
</body></html>
|
<html><head><title>Test</title> </head><body> <a href="javascript:void(opener.location.href='../../../index.htm');">SELFHTML</a><br> <a href="javascript:void(opener.location.href='../../index.htm');">JavaScript</a><br> <a href="javascript:void(opener.location.href='../index.htm');">Sprachelemente</a><br> </body></html> |
Im Beispiel wird beim Einlesen der HTML-Datei ein zweites Fenster geöffnet, das zum Beispiel als "Fernbedienung" des Hauptfensters dienen könnte. Dazu ist im einleitenden <body>-Tag der Event-Handler onLoad= notiert. Er ruft die Funktion NaviFenster() auf, die in einem JavaScript-Bereich im Dateikopf definiert ist. Innerhalb dieser Funktion steht der Befehl zum Öffnen des Zweitfensters. Das Fenster erhält auch gleich den Fokus (wird zum aktiven Fenster), so dass es im Vordergrund des Hauptfensters zu sehen ist. Ins Zweitfenster wird die Datei navigat.htm geladen. Diese enthält Verweise mit dem "Event-Handler" javascript:. Beim Ausführen des Verweises wird im Elternfenster des Zweitfensters, markiert durch den reservierten Fensternamen opener, mit document.location.href eine Seite geladen. Die Anweisung opener.location.href='../index.htm' gibt den URI der zu ladenen Datei zurück. Mit Hilfe des Operators void wird dieser unterdrückt. Dadurch werden Anzeigefehler vermieden.
|
|
onMousedown (bei gedrückter Maustaste)Tritt ein, wenn der Anwender die Maustaste gedrückt hält.
Nach JavaScript (Netscape) erlaubt erlaubt in folgenden HTML-Tags:
<input type="button"> <a>
Nach HTML 4.0 erlaubt in folgenden HTML-Tags:
<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>
Anzeigebeispiel: So sieht's aus (auf Verweis klicken, Maus gedrückt halten und auf Statuszeile achten!)
<html><head><title>Test</title> </head><body> <a href="../../../index.htm" onMousedown="window.status='Verweis zur Startseite';return true;">Verweis</a> </body></html> |
Das Beispiel enthält einen Verweis. Bei vollständig erfolgtem Anklicken des Verweises wird ganz normal das Verweisziel, im Beispiel also ../../../index.htm, aufgerufen. Vorher jedoch, sobald der Anwender die Maustaste gedrückt und bevor er sie wieder losgelassen hat, tritt der Event-Handler onMousedown= in Aktion, der im Verweis-Tag notiert ist. Im Beispiel wird dabei in der Statuszeile des Browsers ausgegeben: Verweis zur Homepage.
|
|
onMousemove (bei weiterbewegter Maus)Tritt ein, wenn der Anwender die Maus bewegt, unabhängig davon, ob die Maustaste gedrückt ist oder nicht.
Nach JavaScript (Netscape) bislang nicht in HTML-Tags möglich, sondern nur im Zusammenhang mit dem event-Objekt.
Nach HTML 4.0 erlaubt in folgenden HTML-Tags:
<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>
Anzeigebeispiel: So sieht's aus (Maus über den Text bewegen und auf Statuszeile achten!)
<html><head><title>Test</title>
<script language="JavaScript">
function Mauskontrolle(Element) {
var Pos = Element.offsetLeft + "/" + Element.offsetTop;
window.status = Pos;
return true;
}
</script>
</head><body>
<p onMousemove="Mauskontrolle(this)">Hier ein kleiner Text</p>
</body></html>
|
Das Beispiel zeigt, wie Event-Handler auch in HTML-Tags funktionieren, bei denen das früher nicht möglich war. In dem Beispiel wird ein Textabsatz definiert. Innerhalb des Textabsatzes ist der Event-Handler onMousemove= notiert. Der Event-Handler tritt in Aktion, solange der Anwender die Maus im Anzeigebereich des Textabsatzes bewegt. Dann wird so oft wie möglich die Funktion Mauskontrolle() aufgerufen, die in einem Scriptbereich im Dateikopf notiert ist. Dieser Funktion wird als Parameter mittels this das betroffene Element übergeben. Die Funktion bewirkt, dass in der Statuszeile des Browsers jeweils die Koordinaten der linken oberen Ecke des Elementes angezeigt werden.
Im MS Internet Explorer können Sie zusätzlich die Eigenschaften des event-Objekts abfragen.
|
|
onMouseout (beim Verlassen des Elements mit der Maus)Tritt ein, wenn der Anwender mit der Maus über ein Element fährt und dieses dabei verlässt.
Nach JavaScript (Netscape) erlaubt erlaubt in folgenden HTML-Tags:
<a> <area>
Nach HTML 4.0 erlaubt in folgenden HTML-Tags:
<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>
Anzeigebeispiel: So sieht's aus (Maus über den Link und wieder weg bewegen!)
<html><head><title>Test</title>
</head><body>
<a href="http://selfaktuell.teamone.de/news.htm"
onMouseout="alert('Die News sollten Sie ruhig mal besuchen')"><b>News</b></a>
</body></html>
|
Im Beispiel ist ein Verweis definiert. Wenn der Anwender mit der Maus über den Verweis fährt, ihn dann aber nicht anklickt, sondern die Maus doch wieder von dem Verweis entfernt, tritt der Event-Handler onMousout= in Aktion. Im Beispiel wird dann ein Meldungsfenster ausgegeben, dass den Anwender darauf hinweist, dass er die News-Seite ruhig mal aufrufen soll.
|
|
onMouseover (beim Überfahren des Elements mit der Maus)Nach JavaScript (Netscape) erlaubt erlaubt in folgenden HTML-Tags:
<a> <area>
Nach HTML 4.0 erlaubt in folgenden HTML-Tags:
<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>
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> </head><body> <h1 id="Test" onMouseover="this.innerHTML='Sehen Sie?'" onMouseout="this.innerHTML='Ich bin dynamisch'">Ich bin dynamisch</h1> </body></html> |
Das Beispiel zeigt, wie Event-Handler auch in HTML-Tags funktionieren, bei denen das bislang nicht möglich war. Das Beispiel funktioniert mit dem MS Internet Explorer ab Version 4.x und im Netscape Navigator ab Version 6, welche die Event-Handler nach HTML 4.0 weitgehend interpretieren. In dem Beispiel wird eine Überschrift erster Ordnung definiert. Innerhalb der Überschrift sind die Event-Handler onMouseover= und onMouseout= notiert. Der Event-Handler onMouseover= tritt in Aktion, wenn der Anwender die Maus in den Anzeigebereich der Überschrift bewegt, und onMouseout= wird aktiv, wenn er die Maus wieder aus dem Anzeigebereich herausbewegt. Mit Hilfe von this nehmen Sie Bezug auf das aktuelle Objekt und können mittels der Eigenschaft innerHTML mit jedem Aktivwerden eines der beiden Event-Handler der Text der Überschrift dynamisch austauschen. Bei onMouseover= wird ein anderer Text angezeigt, bei onMouseout= wieder der ursprüngliche Text.
Auch Opera ab Version 5 interpretiert den EventHandler nach HTML 4.0. Er kennt jedoch nicht die Eigenschaft innerHTML.
|
|
onMouseUp (bei losgelassener Maustaste)Tritt ein, wenn der Anwender die Maustaste gedrückt hat und sie nun wieder loslässt.
Nach JavaScript (Netscape) erlaubt erlaubt in folgenden HTML-Tags:
<input type="button"> <a>
Nach HTML 4.0 erlaubt in folgenden HTML-Tags:
<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>
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
</head><body>
<a href="../../../index.htm"
onMouseup="alert('Die Show beginnt JETZT'); window.location.href='../../../index.htm'; return false">Verweis</a>
</body></html>
|
Im Beispiel ist ein Verweis notiert. Wenn der Anwender den Verweis anklickt und die Maustaste loslässt, also unmittelbar vor dem Laden der Seite, auf die verwiesen wird, geht ein Meldungsfenster auf, das den Anwender in aller Dramatik noch mal darauf hinweist, dass jetzt die Show beginnt. Dazu ist im einleitenden Verweis-Tag der Event-Handler onMouseup= notiert. Wenn der in Aktion tritt, wird zunächst das Meldungsfenster angezeigt. Anschließend wird die Datei ../../../index.htm geladen. Die Anweisung return false verhindert, dass Browser, die den EventHandler
onMouseup= interpretieren, den location.href-Verweis nicht ausführen, sondern den gewöhnlichen Verweis, der beim href-Attribut notiert ist.
|
|
onReset (beim Zurücksetzen des Formulars)Tritt ein, wenn der Anwender Eingaben in einem Formular verwerfen will.
Nach JavaScript (Netscape) erlaubt erlaubt in folgendem HTML-Tag:
<form>
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
function ResetCheck() {
var chk = window.confirm("Wollen Sie alle Eingaben loeschen?");
return(chk);
}
</script>
</head><body>
<form name="Test" onReset="return ResetCheck()" action=""><pre>
Name: <input size="30"><br>
Idee: <input size="30"><br>
<input type="reset">
</pre></form>
</body></html>
|
Das Beispiel enthält ein Formular, das unter anderem einen Abbrechen-Button (Reset-Button) enthält. Beim Anklicken dieses Buttons werden normalerweise alle Eingaben im Formular gelöscht. Im Beispiel ist jedoch im einleitenden <form>-Tag der Event-Handler onReset= notiert. Dieser tritt in Aktion, wenn der Reset-Button angeklickt wird. Im Beispiel wird dann die Funktion ResetCheck() aufgerufen, die in einem Scriptbereich im Dateikopf steht. Diese Funktion fragt den Anwender in einem Bestätigungsfenster (window.confirm()), ob er wirklich alle Eingaben in dem Formular löschen will. Bestätigt er den Löschwunsch, gibt das Bestätigungsfenster den Wert true zurück. Verneint er den Löschwunsch, wird false zurückgegeben. Der Rückgabewert wird in der Variablen chk gespeichert und diese wird wiederum von der Funktion Funktion ResetCheck() an den aufrufenden Event-Handler zurückgegeben. Der Effekt ist, dass die Formulareingaben nur gelöscht werden, wenn true zurückgegeben wird.
|
|
onSelect (beim Selektieren von Text)Tritt ein, wenn der Anwender Text selektiert.
Nach JavaScript (Netscape) und HTML 4.0 erlaubt erlaubt in folgenden HTML-Tags:
<input> <textarea>
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> </head><body> <form name="Test" action=""> <textarea cols="40" rows="10" name="Eingabe" onSelect="window.status='Mit der rechten Maustaste über dem selektierten Text klicken!'; return true;">Selektieren Sie einfach irgendwelchen Text aus diesem Text hier!</textarea> </form> </body></html> |
Im Beispiel wird ein Formular mit einem mehrzeiligen Eingabefeld definiert, das mit Text vorbelegt ist. Wenn der Anwender Text in diesem Feld selektiert, wird mit onSelect erreicht, dass in der Statuszeile (window.status) ein Hinweis ausgegeben wird, was der Anwender nun tun kann.
Opera 5 und Netscape 4.x interpretieren diesen EventHandler nicht.
|
|
onSubmit (beim Absenden des Formulars)Tritt ein, wenn der Anwender ein Formular absendet.
Nach JavaScript (Netscape) erlaubt erlaubt in folgendem HTML-Tag:
<form>
Anzeigebeispiel: So sieht's aus (nicht alle Felder ausfüllen und Formular dann absenden!)
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function CheckInput() {
for(i=0; i<document.forms[0].elements.length; ++i)
if(document.forms[0].elements[i].value == "") {
alert("Es wurden nicht alle Felder ausgefuellt!");
document.forms[0].elements[i].focus();
return false;
}
return true;
}
//-->
</script>
</head><body>
<form action="onsubmit.htm" onSubmit="return CheckInput();">
Feld 1: <input size="30"><br>
Feld 2: <input size="30"><br>
Feld 3: <input size="30"><br>
<input type="submit">
</form>
</body></html>
|
Das Beispiel enthält ein Formular mit mehreren Eingabefeldern. Beim Absenden des Formulars, also beim Klicken auf den Submit-Button, wird jedoch erst mal überprüft, ob in allen Feldern etwas eingegeben wurde. Wenn eines der Felder leergelassen wurde, wird das Formular nicht abgesendet. Stattdessen wird eine Fehlermeldung ausgegeben, und der Cursor wird in das erste nicht ausgefüllte Eingabefeld positioniert. Dazu ist im einleitenden <form>-Tag der Event-Handler onSubmit= notiert. Beim Absenden des Formulars wird dadurch die Funktion CheckInput() aufgerufen, die in einem Scriptbereich im Dateikopf notiert ist. Diese Funktion prüft in einer for-Schleife alle einzelnen Formularfelder, ob diese einen leeren Inhalt haben (leere Zeichenkette ""). Ist das der Fall, wird die Fehlermeldung ausgegeben und auf das entsprechende Formularfeld positioniert. An den aufrufenden Event-Handler onSubmit wird der Wert false zurückgegeben. Nur wenn alle Formularfelder ausgefüllt wurden, wird true zurückgegeben. Dadurch wird entschieden, ob das Formular abgeschickt wird oder nicht.
|
|
onUnload (beim Verlassen der Datei)Tritt ein, wenn eine HTML-Datei verlassen wird.
Nach JavaScript (Netscape) und HTML 4.0 erlaubt erlaubt in folgenden HTML-Tags:
<frameset> <body>
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
var Start = new Date();
var Startzeit = Start.getTime();
function Aufenthalt() {
var Ende = new Date();
var Endzeit = Ende.getTime();
var Aufenthalt = Math.floor((Endzeit - Startzeit) / 1000);
alert("Sie waren " + Aufenthalt + " Sekunden auf dieser Seite");
}
</script>
</head>
<body onUnload="Aufenthalt()">
<h1>Einen langen Aufenthalt auf dieser Seite!</h1>
<p><a href="../../../index.htm"><b>Und dann aber nix wie weg!</b></a></p>
</body></html>
|
Im Beispiel ist im Dateikopf ein JavaScript-Bereich definiert. Gleich beim Einlesen der Datei wird mit Hilfe des Date-Objekts der aktuelle Zeitpunkt ermittelt und in der Variablen Startzeit gespeichert. Im einleitenden <body>-Tag der Datei ist der Event-Handler onUnload= notiert. Er tritt in Aktion, wenn die Datei - zum Beispiel durch Anklicken eines Verweises zu einer anderen Seite - verlassen wird. In diesem Fall wird im Beispiel die Funktion Aufenthalt() aufgerufen, die ebenfalls in dem Scriptbereich im Dateikopf steht. Diese Funktion ermittelt wieder den aktuellen Zeitpunkt, ermittelt dann aber noch die Differenz zwischen gespeicherter Startzeit und der jetzt ermittelten "Endzeit" und gibt das Ergebnis in einem Meldungsfenster aus.
|
|
javascript: (bei Verweisen)Dies ist kein Event-Handler im engeren Sinn. Es handelt sich um eine Syntax, die eingeführt wurde, um JavaScript-Code als Verweisziel zu notieren.
Nach JavaScript (Netscape) erlaubt erlaubt in folgenden HTML-Tags:
<a> <area>
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title> </head> <body> <a href="javascript:alert(document.lastModified)"><b>Letzter Update</b></a> </body></html> |
Das Beispiel gibt bei Anklicken des Verweises ein Meldungsfenster mit dem Zeitpunkt des letzten Updates der Datei aus. Um einen Verweis dieser Art zu notieren, notieren Sie hinter dem Attribut href= in Anführungszeichen das Schlüsselwort javascript, gefolgt von einem Doppelpunkt : und dahinter eine oder mehrere JavaScript-Anweisungen. Bei mehreren Anweisungen ist es jedoch besser, diese in einer Funktion zu notieren und beim Verweis dann diese Funktion aufzurufen.
Diese Form des Aufrufes erfordert zwingend den Rückgabewert undefined. Ist dies nicht der Fall, wird der jeweilige Rückwert der JavaScript-Anweisung in das Dokument geschrieben und die aktuelle Seite gelöscht.
Sie können gegebenenfalls unter Verwendung des Operators void den Rückgabewert einer Anweisung unterdrücken und auf undefined setzen.
|
| |
 |
Hinweise zur JavaScript-Objektreferenz
|
 |
Reservierte Wörter
|
| SELFHTML/Navigationshilfen JavaScript/DOM Sprachelemente |
© 2001 
selfhtml@teamone.de