Event-Handler (Ereignisbehandler) 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 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 Formular-Button 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 Formular-Buttons 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 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.
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>
Beispiel:
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>
Erläuterung:
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.
Beachten Sie:
Dieser Event-Handler gehört nicht zum HTML-Standard und wird von Netscape 6, Opera, Safari und Konqueror nicht interpretiert.
Für den Fall, dass ein Element zuvor aktiviert war und der Anwender es jetzt verlässt.
Nach JavaScript (Netscape) 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>
Beispiel:
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>
Erläuterung:
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 Event-Handler 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.
Beachten Sie:
Unter Opera 5.02 erzeugt die Verwendung dieses Beispieles eine unendliche Schleife, da die Bestätigung des Meldungsfensters ebenfalls den Event-Handler auslöst. Mit Opera 5.12 wurde dieses Problem behoben.
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>
Beispiel:
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>
Erläuterung:
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.
Beachten Sie:
Dieser Event-Handler wird nicht sofort bei der Änderung eines Formularfeldes aufgerufen, sondern erst nachdem ein anderes Feld nach der Änderung angewählt wurde.
Für den Fall, dass der Anwender ein Element anklickt.
Nach JavaScript (Netscape) 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>
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
</head><body>
<form name="Test" action="">
<input type="text" size="30" name="Ausgabe" readonly="readonly"><br>
<input type="button" value="Letzter Update"
onClick="this.form.Ausgabe.value = document.lastModified">
</form>
</body></html>
Erläuterung:
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.
Für den Fall, dass der Anwender ein Element doppelt anklickt.
Nach JavaScript (Netscape) 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>
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
</head><body>
<form name="Rechnen" action="">
Wert: <input type="text" 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>
Erläuterung:
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.
Beachten Sie:
Bei Netscape-Browsern unter Macintosh ist dieser Event-Handler nicht verfügbar! Safari erkennt diesen Event-Handler nicht an Buttons.
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>
Beispiel:
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>
Erläuterung:
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.
Tritt ein, wenn der Anwender ein Element aktiviert.
Nach JavaScript (Netscape) 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>
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
</head><body>
<form name="Test" action="">
<input type="text" size="30" onFocus="this.value = 'Hier Ihren Namen eingeben'"><br>
<input type="text" size="30" onFocus="this.value = 'Hier Ihren Wohnort eingeben'"><br>
<input type="text" size="30" onFocus="this.value = 'Hier Ihr Alter eingeben'"><br>
</form>
</body></html>
Erläuterung:
In dem Beispiel wird ein Formular definiert, das drei Eingabefelder enthält. Da die Felder unbeschriftet sind, hat der Anwender keine Ahnung, was 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.
Tritt ein, wenn der Anwender, während er ein Element aktiviert hat, eine Taste drückt.
Nach JavaScript (Netscape) 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>
Beispiel:
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="readonly" size="3" name="Kontrolle"><br>
<input type="reset">
</form>
</body></html>
Erläuterung:
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 Script-Bereich 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.
Tritt ein, wenn der Anwender eine Taste drückt und diese gedrückt hält.
Nach JavaScript (Netscape) 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>
Beispiel:
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>
Erläuterung:
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 Event-Handler stets nach dem Event-Handler onKeyDown ausgeführt. Gibt der Event-Handler onKeyDown den Wert false zurück, so wird unter Netscape die Ausführung des Event-Handlers onKeyPress unterdrückt. Im Internet Explorer unterdrückt der Event-Handler onKeyPress den Event-Handler onKeyDown.
Beachten Sie:
Im Internet Explorer können Sie zusätzlich die Eigenschaften des event-Objekts abfragen.
Tritt ein, wenn der Anwender eine Taste gedrückt hat und diese wieder loslässt.
Nach JavaScript (Netscape) 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>
Beispiel:
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="readonly" size="30" name="Ausgabe"><br>
<input type="reset">
</form>
</body></html>
Erläuterung:
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.
Tritt ein, wenn eine HTML-Datei geladen wird.
Nach JavaScript (Netscape) und HTML 4.0 erlaubt in folgenden HTML-Tags:
<frameset> <body>
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
function NaviFenster () {
Navigation = window.open("navigat.htm", "Navigation", "height=200,width=300");
Navigation.focus();
}
</script>
</head>
<body onLoad="NaviFenster()">
<h1>Seite mit "Fernbedienung"</h1>
</body></html>
Beispiel - Datei navigat.htm:
<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>
Erläuterung:
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.
 |
Tritt ein, wenn der Anwender die Maustaste gedrückt hält.
Nach JavaScript (Netscape) 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>
Beispiel:
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>
Erläuterung:
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.
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>
Beispiel:
Anzeigebeispiel: So sieht's aus (Maus über den Text bewegen und auf Statuszeile achten!)
<html><head><title>Test</title>
<script type="text/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>
Erläuterung:
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 Script-Bereich 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.
Beachten Sie:
Opera 5 kennt den Event-Handler onMousemove zwar, interpretiert das obige Beispiel aber nicht, weil Opera die Eigenschaft window.status erst ab Version 6 unterstützt.
Im Internet Explorer können Sie zusätzlich die Eigenschaften des event-Objekts abfragen.
Tritt ein, wenn der Anwender mit der Maus über ein Element fährt und dieses dabei verlässt.
Nach JavaScript (Netscape) 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>
Beispiel:
Anzeigebeispiel: So sieht's aus (Maus über den Link und wieder weg bewegen!)
<html><head><title>Test</title>
</head><body>
<a href="http://aktuell.de.selfhtml.org/news.htm"
onMouseout="alert('Die News sollten Sie ruhig mal besuchen')"><b>News</b></a>
</body></html>
Erläuterung:
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.
Nach JavaScript (Netscape) 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>
Beispiel:
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>
Erläuterung:
Das Beispiel zeigt, wie Event-Handler auch in HTML-Tags funktionieren, bei denen das bislang nicht möglich war. Das Beispiel funktioniert mit dem 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 den Text der Überschrift dynamisch austauschen. Bei onMouseover wird ein anderer Text angezeigt, bei onMouseout wieder der ursprüngliche Text.
Beachten Sie:
Auch Opera ab Version 5 interpretiert den Event-Handler nach HTML 4.0. Er kennt jedoch nicht die Eigenschaft innerHTML.
Tritt ein, wenn der Anwender die Maustaste gedrückt hat und sie nun wieder loslässt.
Nach JavaScript (Netscape) 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>
Beispiel:
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>
Erläuterung:
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 Event-Handler
onMouseup interpretieren, den location.href-Verweis ausführen und nicht den gewöhnlichen Verweis, der beim href-Attribut notiert ist.
Tritt ein, wenn der Anwender Eingaben in einem Formular verwerfen will.
Nach JavaScript (Netscape) erlaubt in folgendem HTML-Tag:
<form>
Beispiel:
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 type="text" size="30"><br>
Idee: <input type="text" size="30"><br>
<input type="reset">
</pre></form>
</body></html>
Erläuterung:
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 Script-Bereich 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 ResetCheck() an den aufrufenden Event-Handler zurückgegeben. Der Effekt ist, dass die Formulareingaben nur gelöscht werden, wenn true zurückgegeben wird.
| |
Tritt ein, wenn der Anwender Text selektiert.
Nach JavaScript (Netscape) und HTML 4.0 erlaubt in folgenden HTML-Tags:
<input> <textarea>
Beispiel:
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>
Erläuterung:
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.
Beachten Sie:
Opera 5 und Netscape 4.x interpretieren diesen Event-Handler nicht.
Tritt ein, wenn der Anwender ein Formular absendet.
Nach JavaScript (Netscape) erlaubt in folgendem HTML-Tag:
<form>
Beispiel:
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 type="text" size="30"><br>
Feld 2: <input type="text" size="30"><br>
Feld 3: <input type="text" size="30"><br>
<input type="submit" value="absenden">
</form>
</body></html>
Erläuterung:
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 Script-Bereich 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.
| |
Tritt ein, wenn eine HTML-Datei verlassen wird.
Nach JavaScript (Netscape) und HTML 4.0 erlaubt in folgenden HTML-Tags:
<frameset> <body>
Beispiel:
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">Und dann aber nix wie weg!</a></p>
</body></html>
Erläuterung:
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 Script-Bereich 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.
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 in folgenden HTML-Tags:
<a> <area>
Beispiel:
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
</head>
<body>
<a href="javascript:alert(document.lastModified)">Letzter Update</a>
</body></html>
Erläuterung:
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 im 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.
Beachten Sie:
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.
© 2005 Impressum
SELFHTML/Navigationshilfen 
onAbort (bei Abbruch)
onBlur (beim Verlassen)
