# Event-Handler

Allgemeines zu Event-Handlern
onabort (bei Abbruch)
onblur (beim Verlassen)
onchange (bei erfolgter Änderung)
onclick (beim Anklicken)
ondblclick (bei doppeltem Anklicken)
onerror (im Fehlerfall)
onfocus (beim Aktivieren)
onkeydown (bei gedrückter Taste)
onkeypress (bei gedrückt gehaltener Taste)
onkeyup (bei losgelassener Taste)
onload (beim Laden einer Datei)
onmousedown (bei gedrückter Maustaste)
onmousemove (bei weiterbewegter Maus)
onmouseout (beim Verlassen des Elements mit der Maus)
onmouseover (beim Überfahren des Elements mit der Maus)
onmouseup (bei losgelassener Maustaste)
onreset (beim Zurücksetzen des Formulars)
onselect (beim Selektieren von Text)
onsubmit (beim Absenden des Formulars)
onunload (beim Verlassen der Datei)
javascript: (bei Verweisen)

## Allgemeines zu Event-Handlern

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.

## 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>`

### 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, Mozilla Firefox, Safari und Konqueror 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 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="PruefeInhalt(this.value)"><br>
    Geben Sie irgendetwas ein und klicken Sie dann woanders hin, um das Eingabefeld zu verlassen!
    </form>
    <script type="text/javascript">
    document.Test.Eingabe.focus();
    function PruefeInhalt (Feld) {
      if (Feld == "") {
        alert("Das 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 `PruefeInhalt()` 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.

## 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>`

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

Der Internet Explorer hat einen Bug, der verhindert, dass man mit `onchange` Änderungen bei Radiobuttons erkennen kann. Der Eventhandler wird aufgerufen, bevor die Änderung in die JavaScript-Eigenschaften übertragen wird. Verwenden Sie hierfür ggf. `onclick`.

## onclick (beim Anklicken)

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.

### Beachten Sie:

Konqueror 3.1 interpretiert zwar diesen Event-Handler, kann aber das Anzeigebeispiel nicht darstellen, da lastModified nicht interpretiert werden kann.

## ondblclick (bei doppeltem Anklicken)

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 4.x unter Macintosh ist dieser Event-Handler nicht verfügbar! Safari 1.0 erkennt diesen Event-Handler nicht an Buttons.

## 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>`

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

## onfocus (beim Aktivieren)

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.

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

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

## onkeyup (bei losgelassener Taste)

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.

## onload (beim Laden einer Datei)

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), sodass 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 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>
    <p>Klicken Sie auf den Button und lassen Sie die Maustaste einige Zeit heruntergedrückt,
    um den Event-Handler in Aktion zu sehen:</p>
    <input type="button" value="Klick mich!"
      onmousedown="this.value = 'Maustaste wurde gedrückt!';"
      onmouseup="this.value = 'Maustaste wurde losgelassen!';">
    </body></html>

### Erläuterung:

Das Beispiel enthält einen Klick-Button. Sobald der Anwender die Maustaste drückt, während sich der Mauszeiger über dem Button befindet, tritt der Event-Handler `onmousedown` in Aktion, der im `input`-Tag notiert ist. Im Beispiel wird dabei der Text des Buttons geändert. Beim Loslassen der Maustaste tritt der Event-Handler onmouseup in Aktion, der den Text des Buttons ebenfalls abändert.

## 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>`

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

## 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 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/weblog/"
    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 `onmouseout` 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 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`.

## onmouseup (bei losgelassener Maustaste)

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>
    <input type="button" value="Klick mich!"
      onmouseup="this.value = 'Button wurde angeklickt, Maustaste wurde losgelassen!';">
    </body></html>

### Erläuterung:

Das Beispiel enthält einen Klick-Button. Sobald der Anwender auf den Button klickt, indem er die Maustaste herunterdrückt und wieder loslässt, tritt der Event-Handler `onmousedown` in Aktion, der im `input`-Tag notiert ist. Im Beispiel wird dabei der Text des Buttons geändert.

## onreset (beim Zurücksetzen des Formulars)

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.

## onselect (beim Selektieren von Text)

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="alert('Text wurde ausgewählt!');">
    Markieren 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 über `onselect` ein Dialogfenster geöffnetet. Darin kann z.B. stehen, was der Anwender nun tun kann.

### Beachten Sie:

Opera 5 und Netscape 4.x interpretieren diesen Event-Handler nicht.

## onsubmit (beim Absenden des Formulars)

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.

## onunload (beim Verlassen der Datei)

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.

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

| Hinweise zur JavaScript-Objektreferenz
| Reservierte Wörter

© 2007 Impressum