Eventhandler

Event-Handler sind ein wichtiges Bindeglied zwischen HTML und JavaScript. Sie 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 in den HTML-Sprachstandard mit aufgenommen. Hier erfahren Sie mehr darüber. Event-Handler erkennt man pragmatisch daran, dass sie immer mit "on" beginnen.

Drei erste Beispiele sind:

- onclick: Beim Klick auf das Element (in der Regel ein Link) wird etwas (z.B. eine JavaScript-Funktion) ausgelöst.

- onload: Beim Öffnen der HTML-Datei wird etwas ausgelöst. Achtung: onload darf NUR im body-Element genutzt werden.

- onmouseover: Beim Überfahren des Elements mit der Maus wird etwas ausgeführt. Hinweise Abhängig von einem bestimmten Ereignis (Klick, Mausbewegung etc.) wird bei allen Event-Handlern eine Anweisung ausgeführt! Event-Handler gehören zu den so genannten Universal-Attributen und können in verschiedenen HTML-Elementen verwendet werden. Eine exakte Beschreibung dazu ist hier zu finden.

Beispiel 1

	<head>
		<title>Titel der Seite</title>
		<script type="text/javascript">
			function abfrage() {
				alert('Wollen Sie wirklich zur Wikipedia wechseln?');
			}
		</script>
	</head>

	<body>
		<a href="http://www.wikipedia.de" onclick="abfrage()">hier</a>
		klicken, gelangen Sie nach einem weiteren Dialog zur Wikipedia!</p>
	</body>
</html>

Beispiel 2

<!DOCTYPE html>
<html>
	<head>
		<title>Titel der Seite</title>
		<script type="text/javascript">
			function quadrat( zahl ){
			if(zahl<1000){
				var square=zahl*zahl;
				alert("Das Quadrat der von Ihnen gewaehlten Zahl ("+zahl+") ist "+square+"!");
				} else {
				alert("Die von Ihnen gewaehlte Zahl war zu gross!");
				}
			}

			function eingabe(){
				var meineZahl = prompt("Geben Sie eine Zahl ein!");
				quadrat(meineZahl);
			}
		</script>
	</head>

	<body>
		<form action="#">
			<input type="button" value="Click me!" onclick="eingabe()">
		</form>
	</body>
</html>

Von "onClick" zu "onclick"

In Zeiten von HTML4 wurde das "c" in onclick der Lesbarkeit halber groß geschrieben (onClick = CamelCase oder Höckerschreibweise). Seit XHTML dürfen Elementnamen wie auch Attributnamen allerdings keine Großbuchstaben mehr enthalten.

Wie in fast allen Programmiersprachen sollte bei JavaScript die korrekte Schachtelung von Annotationszeichen beachtet werden.

Würde man im obigen Beispiel folgendes schreiben: onclick="alert("Wollen Sie...?")"
könnte das vom Browser missverstanden werden: Ende des Attributs bereits nach alert(.