Dynamische Webseiten

Virtueller Campus Projekt, PHBern

StartseiteJavaScriptCSSJSPPHPMySQLDrucken

Schriftgrösse: kleiner - zurücksetzen - grösser

Event-Handler

Ereignishandler (Event-Handler) sind ein wichtiges Bindeglied zwischen HTML und JavaScript. Durch ein Ereignis (klicken einer Maustaste, bewegen der Maus, Laden einer Seite) wird der dazugehörige Event-Handler aktiviert. Event-Handler werden meist in Form von Attributen in HTML-Tags notiert. Man erkennen sie daran, dass solche HTML-Attribute immer mit on beginnen, zum Beispiel onclick, onmouseover. Die JavaScript-Anweisungen, die durch den Event ausgelöst werden sollen, sind meist in Form einer Funktion definiert.


1. Durch den Anwender ausgelöste Events:

onclick beim Mausklick
onmouseover beim Überfahren mit Maus
onkeypress beim Drücken einer Taste


Beispiel 1: onclick() Beispiel zeigen (event1.html)

<HTML> <HEAD> <SCRIPT LANGUAGE = "JavaScript"> function a() { name = document.form1.tName.value; vorname = document.form1.tVorname.value; document.form1.antw.value = "Sie heissen " + vorname + " " + name; } </SCRIPT> </HEAD> <BODY> <FORM NAME = "form1"><BR> <P>Name:<INPUT TYPE = "text" NAME="tName" VALUE = "" SIZE = 20 > <P>Vorname:<INPUT TYPE = "text" NAME="tVorname" VALUE = "" SIZE = 20 > <INPUT TYPE = "BUTTON" VALUE = "Hier klicken" onclick="a()";</P><BR> <P>Antwort:<INPUT TYPE = "text" NAME = "antw" VALUE = "" SIZE = 30></P> </FORM> </BODY> </HTML>

Beispiel 2: onmouseover Beispiel zeigen (event2.html)

<HTML> <HEAD> <SCRIPT LANGUAGE = "JavaScript"> function gruen() { document.bgColor = "#00FF00"; } function rot() { document.bgColor = "FF3333"; } function gelb() { document.bgColor = "FFFF33"; } function pink() { document.bgColor = "FF33CC"; } function blau() { document.bgColor = "0000FF"; } </SCRIPT> </HEAD> <BODY BGCOLOR="#FFFFFF"> <FORM NAME="form1"> <BR>Fahren sie mit der Maus über die Farb-Buttons:<BR> <P> <INPUT TYPE = "BUTTON" VALUE = "grün" onmouseover = "gruen()"> <INPUT TYPE = "BUTTON" VALUE = "rot" onmouseover = "rot()"> <INPUT TYPE = "BUTTON" VALUE = "pink" onmouseover = "pink()"> <INPUT TYPE = "BUTTON" VALUE = "gelb" onmouseover = "gelb()"> <INPUT TYPE = "BUTTON" VALUE = "blau" onmouseover = "blau()"></P> </FORM> </BODY> </HTML>

Beispiel 3: onkeypress Beispiel zeigen (event3.html)
Der enutzer muss einen Titel in einem Eingabefeld abliefern. Der Text soll maximal 20 Zeichen lang sein. Damit der Benutzer nicht mitzählen muss, gibt es ein kleines Eingabefeld nebendran, in dem nach jedem Tastendruck ausgegeben wird, wie viele Zeichen bereits eingegeben wurden.

<HTML> <HEAD> <SCRIPT LANGUAGE = "JavaScript"> function aktualisieren () { document.form1.kontrolle.value = document.form1.eingabe.value.length + 1; return true; } </SCRIPT> </HEAD> <BODY> <FORM NAME="form1"> Titel (max 20 Zeichen):<br> <input type="text" name="eingabe" size="25" onkeypress="aktualisieren(this.value)"> <input type="text" value="0" readonly="readonly" size="3" name="kontrolle"><br> <input type="reset"> </FORM> </BODY> </HTML>

Die Funktion aktualisieren() berrechnet aus document.form1.eingabe.value.length + 1, wie viele Zeichen bereits eingegeben wurden und schreibt eine entsprechende Ausgabe in das dafür vorgesehene Textfeld. Mit dem Atributt readonly="readonly" kann ein Textfeld für eine Benutzer-Eingabe gesperrt werden.

 

2. Dokumentbasierte Events:

onload beim Starten der HTML-Datei
onunload beim Verlassen der HTML-Datei

 

Beispiel 4: onload/onunload Beispiel zeigen (event4.html)

<HTML> <HEAD> <SCRIPT LANGUAGE = "JavaScript"> function begruesse() { alert("Willkommen auf meiner HomePage!"); } function verabschieden() { alert("Auf Wiedersehen!"); } </SCRIPT> </HEAD> <BODY BGCOLOR = "#FFFF33" onload = 'begruesse()' onunload='verabschieden()'> <BR> <SCRIPT LANGUAGE = "JavaScript"> document.write("<H1>Meine Homepage</H1>"); </SCRIPT> </BODY> </HTML>

3. Formularbasierte Events:

onfocus Fokussieren zum bestimmten Element im Formular
onchange Ändert den Wert einer Formularfeldes
onselect Auswahl ändern
onsubmit Formular abschicken
onreset Formular zurücksetzen


Beispiel 5: onfocus() Beispiel zeigen (event5.html)
Mit Focus kann die Cursor-Position innerhalb von Formularen spezifiziert werden.

<HTML> <HEAD> <SCRIPT LANGUAGE = "JavaScript"> function a() { vname = document.form1.vn.value;
document.form1.antw.value = "Hallo "+vname; } </SCRIPT> </HEAD> <BODY bgColor="E1ECF5" onload="document.form1.vn.focus()">
<FORM NAME = "form1">
<BR>
<P>Vorname:<INPUT TYPE="text" NAME="vn" VALUE = "" SIZE = 20></p>
<p><INPUT TYPE = "BUTTON" VALUE = "Hier klicken" onclick="a()";></P>
<BR>
<P>Antwort:<INPUT TYPE="text" NAME = "antw" VALUE = "" SIZE = 30></P>
</FORM>
</BODY></BODY> </HTML>