nicht angemeldet
Eventhandler für Klasse definieren
Hallo Forum,
Ich habe eine HTML-Datei mit einer groooßen Tabelle, wobei in jeder Zelle ein Input-Feld enthalten ist, z.B. so:
<td><input id="id_47_11" class="inp" onCange="Check(this.id)"></td>
Der Style für das Input-Feld wurde mittels CSS für die Klasse "inp" definiert. Jetzt ist mir aufgefallen, daß das Laden der Seite sehr lange dauert, wenn in den input-tags onCange="Check(this.id)" oder direkt onCange="Check('id_47_11')" drinsteht, wenn ich das onChange="..." aber weglasse, wird die Seite schnell geladen (mit IE 5.5). Gibt es vielleicht eine Möglichkeit, wie man einem Event eine Funktion zuweisen kann, die dann für die ganze Klasse gültig ist, so daß man sie nicht in jedem Tag einzeln definieren muß ? Im folgenden noch ein Code-Beispiel zum Testen.
Vielen Dank im Voraus,
Lutz
<HTML><HEAD>
<style type="text/css">
input.inp { background-color:#FFFF00 }
</style>
</HEAD><BODY>
<form>
<input class="inp" id="id_1" onChange="Check(this.id)">
<input class="inp" id="id_2" onChange="Check(this.id)">
</form>
<script language="JavaScript">
function Check(id){ alert(id); }
</script>
</BODY></HTML>
-
Hallo nochmal,
Jetzt ist mir aufgefallen, daß das Laden der Seite sehr lange dauert, wenn in den input-tags onCange="Check(this.id)" oder direkt onCange="Check('id_47_11')" drinsteht, wenn ich das onChange="..." aber weglasse, wird die Seite schnell geladen (mit IE 5.5).
Hab das noch mal mit einem anderen Rechner getestet und es zeigte sich, daß das Laden der betreffenden Datei mit und ohne onChange="..." in etwa gleich lang dauert. Wahrscheinlich war beim Test auf dem ersten Rechner gerade ein kritischer Speicherschwellwert überschritten worden. Die überproportionale Erhöhung der Ladezeit kam damit wahrscheinlich nur durch die erhöhte Dateigröße zustande und nicht durch das onChange="...".
Es wäre aber trotzdem gut zu wissen, ob es möglich ist, Eventhandler klassenweit zu definieren.Lutz.
-
Huhu Lutz
Es wäre aber trotzdem gut zu wissen, ob es möglich ist, Eventhandler klassenweit zu definieren.
Hier gibt es einen guten Artikel zu einem JavascriptPuzzle das so etwas benutzt.
http://www.heise.de/ix/artikel/2001/07/166/
Viele Grüße
lulu
-
Huhu Lutz
Hullo lulu
Es wäre aber trotzdem gut zu wissen, ob es möglich ist, Eventhandler klassenweit zu definieren.
Hier gibt es einen guten Artikel zu einem JavascriptPuzzle
stimmt, hab ich mir doch gleich mal downgeloaden ;-)
das so etwas benutzt.
stimmt leider nicht ganz, weil ich meinte mit Klasse nicht den im Zusammenhang mit objektorientierter Programmierung verwendeten Begriff, sondern den mit der Style-Formatierung von HTML-Tags verwendeten Begriff. (Ist aber auch ein Durcheinander!)
Viele Grüße
lulu
Trotzdem Danke, Lutz
-
Hallo Lutz
stimmt leider nicht ganz, weil ich meinte mit Klasse nicht den im Zusammenhang mit objektorientierter Programmierung verwendeten Begriff, sondern den mit der Style-Formatierung von HTML-Tags verwendeten Begriff. (Ist aber auch ein Durcheinander!)
im IE und im NN6 geht es so
<form action="">
<input class="abc" name="a1"></input>
<input class="abc" name="a2"></input>
<input name="a3"></input>
</form><script type="text/javascript">
<!--
function geht_es()
{alert('ja');}for (i =0;i< document.forms[0].length;i++)
{
if (document.forms[0][i].className=="abc") document.forms[0][i].onchange=geht_es;
}//-->
</script>Du fragst eben einfach nur die Elemente ab. Unter Opera 5.12 geht es nur wenn er sich als IE ausgibt (was für ein Schwachsinn).
Alternative:
du versteckst den Klassennamen im Elementenamen und fragst diesen ab.<form action="">
<input class="abc" name="abc1"></input>
<input class="abc" name="abc2"></input>
<input name="a3"></input>
</form><script type="text/javascript">
<!--
function geht_es()
{alert('ja');}for (i =0;i< document.forms[0].length;i++)
{
if (document.forms[0][i].name.indexOf("abc")>-1) document.forms[0][i].onchange=geht_es;
}// -->
</script>Dann machen auch Opera und Netscape 4 mit.
Viele Grüße
Antje
-
Hallo Antje,
vielen Dank, genau so etwas ähnliches hatte ich gesucht:
<script type="text/javascript">
<!--
function geht_es()
{alert('ja');}for (i =0;i< document.forms[0].length;i++)
{
if (document.forms[0][i].className=="abc") document.forms[0][i].onchange=geht_es;
}Das dumme ist nur, daß ja jedem einzelnen input-tag das onchange nachträglich zugewiesen wird, damit läßt sich aber leben. Noch eine Sache ist mir aufgefallen, nämlich daß man der Funktion bei der Zuweisung ...onchange=geht_es offenbar keine Parameter mitgeben kann, ich hab da schon alles mögliche probiert. In meinem Fall ist das nicht so schlimm, ich brauch ja eh nur die id vom aufrufenden input-tag, die hol ich mir dann eben erst in der Funktion mit
function geht_es()
{ alert(this.id);
}Gruß, Lutz.
-
-
-
-