Werbung einblenden Werbung ausblenden


Home / Tutorials / JavaScript Handbuch / event handler


Funktionen aufrufen über einen event handler
Tableau der event handler
Funktionen aufrufen über einen event handler
onClick in Verbindung mit dem radio button: der china song
Ändern der Farbe des Textes
Pop up Fenster wenn sich eine Seite lädt
Pop up Fenster, wenn der User die Seite schliesst

Funktionen aufrufen über einen event handler

JavaScript Code lässt sich nur über Funktionen aufrufen. Sieht man von wenigen Ausnahmen ab, Aufruf einer Funktion über href oder über eine Form, werden diese Funktionen immer über event handler aufgerufen. Man sollte zu den event handlern nun zwei Dinge wissen.
1) Welche gibt es
2) An welche html tags können sie gebunden werden
Bevor wir zu einer Detail Betrachtung übergehen, ein paar Beispiele.

<html><head><title>event handler</title>
<script language="JavaScript">
function reinschreiben()
{
document.banane.kirsche.value="Hallo mein Schatz";
}
</script>
</head>
<body>
<form name="banane">
<input type=text name="kirsche"><input type=button value="click mich !" onClick="reinschreiben()">
</form>
</body>
</html>

Am besten ist, man vergegenwärtigt sich erstmal, was dieser Skript macht, indem man hier drauf clickt. Alles klar? Man clickt auf den Knopf "click mich" und in der Text Box erscheint "Hallo mein Schatz". Unser Thema im Moment sind event handler. Wir erklären kurz diesen Skript und kommen dann auf unser Thema zurück. Die Details lassen wir aber erstmal unter den Tisch fallen. Mit document.banane.kirsche steuern wir die die Textbox an. Das ist eigentlich nicht schwer einzusehen. document ist das aktuelle Dokument, welches man vor der Nase hat. In diesem Dokument gibt es eine form, die hat den Namen banane, folglich kommen wir mit document.banane bis zu dieser Form. Innerhalb der Form gibt es eine Textbox, die hat den sinnreichen Namen kirsche, folglich wandert man mit document.banane.kirsche zu dieser Box. Diese Box wiederum hat viele Eigenschaften, aber unter anderem auch einen value, einen Wert, also etwas, was in der Box steht. Mit document.banane.kirsche.value="Hallo mein Schatz" weisen wir der Box einen Wert zu. Das alles macht die Funktion reinschreiben(), die wiederum von dem event handler onClick aufgerufen wird. Der event handler onClick ist hier an den tag button gebunden. Dieser tag hat eigentlich gar keine Funktion. Seine einzige Daseinsberechtigung ergibt sich aus der Tatsache, dass er aussieht wie der submit tag und dass ein JavaScript event handler an ihn gebunden werden kann. Machen wir uns das mit den event handlern noch an einem weiteren Beispiel klar, bevor wir anfangen, die ganze Angelegenheit etwas systematischer zu durchleuchten.
Betrachten wir diesen Skript.

<html><head><title>OnClick</title>
</head>
<script language="javaScript">
function wegblend()
{
document.images[0].src="beispiele/hallo.gif";
}
function reinblend()
{
document.images[0].src="beispiele/sonne.gif";
}
</script>
<body>
<br><br><br>
<center>
<img src=sonne.gif onMouseOver="wegblend()"; onMouseOut="reinblend()";><br>
<font color=blue face=arial size=5>
</font><br>
</center>
</body>
</html>

Was er macht, kann man sich hier klar machen, wenn man mit der Mause über das Bild fährt (dieser Skript funktionniert nicht mit Netscape 4.x, da müsste man es anders lösen).
Könnte nicht klarer sein oder ? Man fährt mit der Maus über das Bild und das Bild ändert sich. Rien à faire. Obwohl es nicht mit unserem Thema zu tun hat, den event handlern, müssen wir kurz erklären, was dieser Skript eigentlich treibt. Wir haben zwei neue even handler (wir haben jetzt also schon eine ganze Menge davon) nämlich onmouseout() und onmouseover(). Diese binden wir an den img tag. Fahren wir also mit der Maus in das Bild, rufen wir die Funktion reinblend auf und wenn die Maus das Bild verläßt, die Funktion wegblend(). Was die zwei Funktionen machen, ist dann im Prinzip das gleiche, wie im ersten Beispiel. document ist das Dokument, welches Sie im Moment vor der Nase haben. Der Zugriff auf die Bilder einer Seite hat man mit dem Array (piano, piano, kommt alles noch, wir sind aber im Moment bei den event handlern) images. Da es das erste Bild ist, ist es images[0]. Die Bilder wiederum haben eine Menge Eigenschaften, z.B. einen source code, src, also den Pfad zu dem Bild. Diesen wiederum tauschen wir aus, beispiele/hallo.gif, bzw. beispiele/sonne.gif. Das wars. Wir haben also jetzt an live Beispielen schon einige event handler kennen gelernt: onClick, onmouseover, onmouseout, onload. Das sind, soit dit en passant, wohl auch die wichtigsten. Hier haben wir das ganze Tableau. Die beschriebenen Verhältnisse gelten für den Explorer und Netscape ab 6.0.

Tableau der event handler

event handler kann gebunden werden an ... Bemerkungen
 
onClick <input type=button value="XXX" onClick=gehtlos()>
<input type=checkbox name=XXX value="XXX" onClick=gehtlos()>
<input type=radio name=XXX value="XXX" onClick=gehtlos()>
<input type=reset name=XXX value="XXX" onclick=gehtlos()>
<input type=submit name=XXX value="XXX" onClick=gehtlos()>
<input type=reset value="XXX" onClick=gehtlos()>
<A href=http://www.XXX.de onClick=gehtlos()>XXX</A>
Clickt der User auf eines dieser Elemente, wird die JavaScript Funktion gehtlos() ausgeführt. Ist das Element ein Hyperlink, dann führt der Browser zuerst onClick aus und dann den Hyperlink.
 
onLoad <frameset cols="XX %,XX%" onLoad=gehtlos()>
<body onLoad=gehtlos()>
<img src=http://www.xxx.de/xxx.jpg onLoad=gehtlos()>
Die Funktion gehtlos() wird nach dem Laden aller Frames eines Framesets, nach dem Laden des gesamten HTML Dokumentes oder nach dem Laden des Bildes ausgeführt.
 
onMouseOver <div onMouseOver=gehtlos()>XXX <span onMouseOver=gehtlos()>XXX <img src=http://www.XXX.de/xxx.jpg onMouseOver=gehtlos()>
<A href=http://www.XXX.de onMouseOver=gehtlos()>XXX</A>
<AREA SHAPE=CIRCLE COORDS="XX,XX,XX" OnMouseOver=gehtlos()>
Die Funktion gehtlos() wird ausgeführt, wenn der Mauszeiger die wie auch immer gestaltete, sensitive Fläche betritt
 
onMouseOut <div onMouseOver=gehtlos()>XXX <span onMouseOver=gehtlos()>XXX <img src=http://www.XXX.de/xxx.jpg onMouseOver=gehtlos()>
<A href=http://www.XXX.de onMouseOver=gehtlos()>XXX <AREA SHAPE=CIRCLE COORDS="XX,XX,XX" OnMouseOver=gehtlos()>
Die Funktion gehtlos() wird ausgeführt, wenn der Mauszeiger die wie auch immer gestaltete sensitive Fläche verlässt
 
onUnload <form action=http://www.XXX.de onSubmit=gehtlos()> Die Funktion gehtlos() wird ausgeführt, wenn der User auf den submit Knopf des Formulars schickt. Die Funktion wird dann tatsächlich ausgeführt, wenn gehtlos() der Wert 1 (true) zurückgibt.
 
onReset <input type=reset value="XXX"> Die Funktion gehtlos() wird ausgeführt, wenn der User auf den reset Knopf des Formulars drückt.
 
onSelect <textarea name=XXX rows=X cols=X onSelect=gehtlos()> Die Funktion onSelect wird ausgeführt, wenn der User einen Textbereich im textarea Feld markiert.
 
onAbort <img src=http://www.XXX.de/XXX.jpg onAbort=gehtlos()> Die Funktion gehtlos() wird ausgeführt, wenn der User das Laden eines Bildes abricht
 
onBlur <input type=button value="XXX" onBlur=gehtlos()>
<input type=checkbox name=XXX value="XXX" onBlur=gehtlos()>
<input type=radio name=XXX value="XXX" onBlur=gehtlos()>
<input type=reset name=XXX value="XXX" onBlur=gehtlos()>
<input type=submit name=XXX value="XXX" onBlur=gehtlos()>
<input type=reset value="XXX" onBlur=gehtlos()>
<input type=file name="XXX" onBlur=gehtlos()>
<input type=password name="XXX" onBlur=gehtlos()>
<select name=XXX onBlur=gehtlos()>
<frameset rows="XX,XX" onBlur=gehtlos()>
<textarea rows=XX cols=XX onBlur=gehtlos()>
Die Funktion gehtlos() wird ausgeführt, wenn eines der genannten Elemente verlassen wird, also der Fokus auf irgendein anderes Element gesetzt wird, bzw. irgendwo sonstwo geklickt wird.
 
onChange <input type=file name="XXX" onBlur=gehtlos()>
<select name=XXX onBlur=gehtlos()>
<input type=text name="XXX" onBlur=gehtlos()>
<textarea rows=XX cols=XX onBlur=gehtlos()>
Die Funktion gehtlos wird ausgeführt, nachdem in einem der genannten Elemente eine Änderung stattgefunden hat.
 
onFocus <input type=button value="XXX" onBlur=gehtlos()>
<input type=checkbox name=XXX value="XXX" onBlur=gehtlos()>
<input type=radio name=XXX value="XXX" onBlur=gehtlos()>
<input type=reset name=XXX value="XXX" onBlur=gehtlos()>
<input type=submit name=XXX value="XXX" onBlur=gehtlos()>
<input type=reset value="XXX" onBlur=gehtlos()>
<input type=file name="XXX" onBlur=gehtlos()>
<input type=password name="XXX" onBlur=gehtlos()>
<select name=XXX onBlur=gehtlos()>
<frameset rows="XX,XX" onBlur=gehtlos()>
<textarea rows=XX cols=XX onBlur=gehtlos()>
Die Funktion onFocus wird ausgeführt, wenn der man den Focus auf eines der genannten Elemente setzt, zu Deutsch, wenn man drauf clickt.

Bei manchen dieser event handler ist nicht so ohne weiteres ersichtlich, wie man sie einsetzt. Ein paar Beispiele sollen dies Erläutern.

Funktionen aufrufen über einen event handler

Beispiel 1: Aus einer select box den neu angewählten Menüpunkt rausfischen und an eine Funktion übergeben.

<html><head><title>JavaScript Beispiel 1</title>
<script language="JavaScript">
function zeigen()
{
alert("Sie haben "+document.banane.kirsche.options[document.banane.kirsche.options.selectedIndex].value+" angewählt");
}
</script>
</head>
<body>
<form name=banane>
Wähl mal was <select name=kirsche onChange=zeigen();>
<option value=Aprikose>Aprikose
<option value=Himbeere>Himbeere
<option value=Kirsche>Kirsche
</select>

</form>
</body></html>

Bevor wir uns klar machen, wie der Skript funktionniert, schauen wir hier erstmal, was er macht. Alles klar ? Wenn man den Wert in der select box verändert, popt ein alert Fenster auf in dem dann steht, was man gewählt hat. Man könne an dieser Stelle zum Beispiel auch eine Webadresse eingeben, und den User dann an diese Adresse weiterleiten um mal ein für die Praxis relevanteres Beispiel zu nennen. Zu dem onChange gibt es eigentlich nichts zu sagen, schwieriger ist hier wohl eher die Frage, wie der angeclickte Wert an die Funktion zeigen übergeben wird. Wir werden darauf im Kapitel Zugriffe auf Formularelemente zurückkommen.

onClick in Verbindung mit dem radio button: der china song

<html><head><title>Chinesensong</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body bgcolor=#CCCCCC>
<center>
<script language="JavaScript">

var chinesen="Drei Chinesen mit dem Kontrabaß, \nsaßen auf der Straße und erzählten sich was, \nda kam die Polizei ja was ist den das, \ndrei Chinesen mit dem Kontrabaß";

function aender1()
{
chinesa=chinesen.replace(/e/g, "a");
document.rein.rin.value=chinesa;
}
function aender2 ()
{
chinese=chinesen.replace(/e/g, "e");
document.rein.rin.value=chinese;
}
function aender3 ()
{
chinesi=chinesen.replace(/e/g, "i");
document.rein.rin.value=chinesi;
}
function aender4 ()
{
chineso=chinesen.replace(/e/g, "o");
document.rein.rin.value=chineso;
}
function aender5()
{
chinesu=chinesen.replace(/e/g, "u");
document.rein.rin.value=chinesu;
}

document.write("<font face=arial>Drei Chinesen mit dem Kontrabaß, <br>saßen auf der Straße und erzählten sich was, <br>da kam die Polizei ja was ist den das, <br>drei Chinesen mit dem Kontrabaß</font>");
</script></center>
<form>
<center><table border=1 width=80% bgcolor=c0c0c0>
<tr><td colspan=10 align=middle >Sie können in dem Kinderlied oben das e durch einen anderen Vokal ersetzen. Clicken Sie den Buchstaben an, durch den
Sie das e ersetzen möchten.</td></tr>
<tr><td align=middle >a</td><td align=middle><input type=radio name=vokal onClick=aender1(); ></td><td align=middle>e</td><td align=middle><input type=radio name=vokal onClick=aender2(); ></td>
<td align=middle>i</td><td align=middle><input type=radio name=vokal onClick=aender3(); ></td><td align=middle>o</td><td align=middle><input type=radio name=vokal onClick=aender4(); ></td>
<td align=middle>u</td><td align=middle><input type=radio name=vokal onClick=aender5(); ></td></tr>
</table></center></form>
<center><form name=rein>
<textarea name=rin rows=5 cols=50></textarea>
</form></center>
</body>
</html>

Bevor wir den Skript durchsprechen, machen wir uns klar, was er überhaupt macht, indem wir auf hier clicken.
Alles klar ? Das bekannte Kinderproblem wird eindeutig gelöst. Bekanntlich soll ja hier der Buchstabe e im Reim "Drei Chinesen mit dem ....." durch einen anderen Vokal ersetzt werden. Genau das macht dieser kleine JavaScript. Die Details des Programms werden wir im Kapitel Arbeiten mit Zeichenketten behandeln. Das einzige was uns hier interessiert, ist die Tatsache, dass wir den event handler onClick an das Formularelement radio binden können.

Ändern der Farbe des Textes

Besonders praktisch ist, dass sich bestimmte event handler auch an div binden lassen. der div tag hat eigentlich überhaupt keine Wirkung, ausser dass man eben cascading style sheets an ihn binden kann, die man dann wiederum mit JavaScript manipulieren kann. Weiter wird der div tag von dem document object model mit verwaltet, so dass er in diesem Zusammenhang auch genutzt werden kann. Davon später.

<html><head><title>Farbe des Textes verändern mit Cascading Style Sheets</title></head>
<body>.
<div id="hintergrund1" style="position:absolute; top:150;left:200;background-color:blue;font-family:arial;font-size:20px;color:yellow" onMouseOver=document.getElementById("hintergrund1").style.backgroundColor='red'; onMouseOut =document.getElementById("hintergrund1").style.backgroundColor='blue';>
Über allen Wipfeln ist Ruh<br>
über allen Gipfeln spürest du kaum einen Hauch<br>
Die Vöglein schweigen im Walde<br>
wart nur, bald ruhest du auch</div>
</body>
</html>

Bevor wir den Skript durchsprechen, machen wir uns hier klar, was er bewirkt.
Und? Was passiert? Deutlich oder? Wenn man mit der Maus in das Gedicht fährt, in jenes berühmte von Goethe, wird es rot. Wir sehen also, dass wir onMouseOver und onMouseOut auch an den div tag binden können. Manche Leute mögen sich jetzt eher für die CSS (cascading style sheets) interessieren. Die sind aber im Moment nicht unser Thema, sie werden das im Kapitel Cascading Style Sheets.

Pop up Fenster wenn sich eine Seite lädt

Sinnvoll eingesetzt, wäre dies eine gute Sache. Da es aber meistens nicht sinnvoll eingesetzt wird, ist es keine gute Sache mehr, sondern in der Regel nervig.

<html><head><title>PopUp Fenster nerven</title></head>
<script language="JavaScript">
function nerven()
{
window.open ("nervtoeter1.htm" , 'Nervtoet1', 'width=200,height=50');
window.open ("nervtoeter2.htm" , 'Nervtoet2', 'width=200,height=50');
window.open ("nervtoeter3.htm" , 'Nervtoet3', 'width=200,height=50');
}
</script>

<body bgcolor=blue onload="nerven()";>
<font color=red size=8>
Das ist ein Beispiel für diese nervigen PopUp Fenster.
Man geht auf eine Seite und hat dann auf einmal 100 von
diesen Viechern auf dem Schirm, die man dann alle wieder
zumachen muss.

</body></html>

Wer wissen will, was dieser Skript macht, der muss auf hier clicken. Wir erlben dann den Pop Up Unsinn in seiner ganzen Pracht. Es öffnet sich nicht nur ein Fenster, sondern drei. Die Sache ist aber noch steigerungsfähig.

Pop up Fenster, wenn der User die Seite schliesst

Wenn der User eine Seite schliesst, will er diese verlassen. Beim schliessen eines Fensters eine neue Seite aufzublenden, die dann unter Umständen wieder eine neue Seite aufblendet wenn man sie schliesst, die dann wieder .... ist fast schon strafrechtlich zu bewerten, als Nötigung. Genau dies macht das folgende Beispiel.

<html><head><title>PopUp Fenster nerven</title></head>
<script language="JavaScript">
function ciao()
{
window.open ("ciaobella.htm" , 'Nervtoet', 'width=200,height=250');
}
</script>

<body bgcolor=blue onUnload="ciao()";>
<font color=red size=8>
Das ist ein Beispiel für onUnload. Auch etwas im Prinzip
unverschämtes. Der user erhält eine Message wenn er
die Seite verläßt, also wenn er z.B. auf einen <A Href=Hyperlink.htm><font color=yellow>Hyperlink.htm</font></A>
klickt. Macht er den Browser einfach zu, funktionniert das Spiel nicht.
</font>
</body></html>

Und wieder kann man sich anschauen, was das Skript macht, indem man hier clickt. Wir sehen also, dass bei Verlassen der Seite ein Pop up Fenster erscheint.
Die Zusammefassung dieses Kapitel kann kurz ausfallen: JavaScript Funktionen können nur über event handler, Hyperlinks oder Formular aufgerufen werden. Am häufigsten werden sie über event handler aufgerufen. Wir haben gesehen, welche event handler es gibt, an welche tags sie gebunden werden können. Die Beispiele dürften dann die im Prinzip simplen Zusammenhänge deutlich gemacht haben.

vorhergehendes Kapitel