Ein Beispiel:
<html>
<head>
<title>Eventhandler</title>
<script type="text/javascript">
function welcome() {
<!--
alert("Willkommen");
//-->
}
window.onload = welcome;
</script>
</head>
<body>
</body>
</html>
Wir haben im oben abgebildeten Beispiel eine Funktion definiert, um die eher einfache Hinweismeldung zu erzeugen. Die Notation von Event-Handlern als Objekteigenschaft unterscheidet sich nämlich von der bereits vorgestellten Variante und anderen Konstrukten in JavaScript:
1. Zum einen akzeptiert diese Notation nur Funktionen und zum anderen werden diese nicht wie in HTML-Attributwerten üblich aufgerufen, sondern nur als Referenz angeben. Deshalb finden Sie hinter dem Funktionsnamen auch nicht die sonst üblichen Klammern.
2. Eine weitere Besonderheit in diesem Zusammenhang ist die Notation des Event-Handlers. In JavaScript selbst spielt ja die Groß-/Kleinschreibung von Namen durchaus eine Rolle – im Gegensatz zu den nicht case-sensitive ausgewerteten HTML-Attributnamen. Daher muss man den Namen des Event-Handlers in JavaScript grundsätzlich klein schreiben. Der Name der Funktion muss natürlich genau so geschrieben werden wie in der Funktionsdefinition.
3. Weiterhin müssen Sie die Ausführungsreihenfolge des Skriptes in Beziehung zum aktivierenden HTML-Element beachten:
Das HTML-Element muss definiert sein, bevor man dem Element einen Event-Handler zuweisen kann.
Das erste der folgenden zwei Beispiele ruft eine Fehlermeldung hervor, weil diese letzte Regel missachtet wurde. Das Formular gibt es noch nicht, wenn der Inhalt des script-Elements ausgeführt wird. Im zweiten Beispiel wird die richtige Reihenfolge eingehalten.
Beispielskript mit Fehler
<html>
<head>
<title>Eventhandler</title>
<script type="text/javascript">
function reminder() {
alert("Beachten Sie unsere Urheberhinweise");
}
document.formular.feld.onselect = reminder;
</script>
</head>
<body>
<form name="formular">
<textarea rows="4" cols="40" name="feld">
Das ist ein Text,
den Sie nicht markieren sollten!
</textarea>
</form>
</body>
</html>
Beispielskript
<html>
<head>
<title>Eventhandler</title>
<script type="text/javascript">
function reminder() {
alert("Beachten Sie unsere Urheberhinweise");
}
</script>
</head>
<body>
<form name="formular">
<textarea rows="4" cols="40" name="feld">
Das ist ein Text,
den Sie nicht markieren sollten!
</textarea>
</form>
<script type="text/javascript">
document.formular.feld.onselect = reminder;
//wird aufgerufen, wenn der Text im Textfeld markiert wird.
</script>
</body>
</html>
Im zweiten Beispiel haben wir die Deklaration der Funktion trotzdem im head-Bereich der Datei belassen. Wie Sie sich vielleicht erinnern können, wird der head-Bereich immer erst vollständig geladen, bevor die Darstellung der HTML-Elemente im body-Bereich beginnt. Es kann also nicht passieren, dass die Funktion bereits vom Event-Handler benötigt wird, ohne dass sie zuvor definiert wurde.
Diese Benutzung von Event-Handlern als Objekteigenschaften ist in mehrerlei Hinsicht vorteilhaft. Zum einen ist die Attribut-Notation nur lesbar, nicht jedoch veränderbar. Die Notation als Eigenschaft eines Objekts lässt sich beliebig im Programm neu zuweisen. Sie könnten also sogar dem Benutzer die Freiheit geben, zu bestimmen, wie ein Mausklick ausgewertet werden soll.
Die nachfolgende Tabelle führt auszugsweise auf, welchen Objekten Event-Handler zugewiesen werden können. In den verschiedenen Browsern gibt es darüber hinaus noch weitere Event-Handler, für die Microsoft und Netscape leider unterschiedliche Namen verwenden. Sie finden diese in den jeweiligen Dokumentationen von Microsoft bzw. Netscape.
http://www.teialehrbuch.de/Kostenlose-Kurse/JavaScript/12836-Event-Handler-als-Objekteigenschaften.html