JavaScript Aufruf wie in CSS Datei definieren?

[Colin]

Auf einer HTML Seite habe ich den folgenden Aufruf:

<TR onclick=HighLightTR(this)>

diese Funktion steht dann wie folgt in einem JS File:

function HighLightTR(row,textColor)  
{  
	.....  
}

Nun die grosse Frage ist da bei JEDEM TR Element auf einer Seite dies stehen muss würde ich dies gerne in CSS definieren, doch wie definiere ich dies in CSS??

[philz]

Hallo Colin.

<TR onclick=HighLightTR(this)>

Nun das sieht schonmal sehr veraltet aus.
Kopiere mal den Codeausschnitt etwas vergrößert und beschreibe was passieren soll!
Warum ist das tr groß geschrieben und warum fehlen da die Quotes?

function HighLightTR(row,textColor)

{
.....
}

  
Die Parameter in Javascript sind zwar optional, aber warum hast du oben nur einen angegeben?  
  

> Nun die grosse Frage ist da bei JEDEM TR Element auf einer Seite dies stehen muss würde ich dies gerne in CSS definieren, doch wie definiere ich dies in CSS??  
  
  
Laut des Funktionsnamens willst du den Inhalt des tr-elements hervorheben. Wozu also Javascript wenn es auch CSS gibt. Zeige uns bitte deine Funktion!  
  
Falls es nicht anders geht.  
[Molily hilft dir bei der Registrierung von Eventhandlern.](http://molily.de/js/einbindung.html)  
  
Gruß,  
  
philz

[Colin]

Laut des Funktionsnamens willst du den Inhalt des tr-elements hervorheben. Wozu also Javascript wenn es auch CSS gibt. Zeige uns bitte deine Funktion!

Sorry das es solange gedauert hat, die Funktion sieht so aus:

function HighLightTR(row,textColor)  
{  
	mycolor=row.style.backgroundColor;  
	  
	if(hlcolor=='white')  
	{  
	 	textColor='lightgrey';  
	}  
	else  
	{  
		textColor=hlcolor;  
	}  
	  
	if(mycolor==textColor)  
	{  
		row.style.backgroundColor='#ffffff';  
	}  
	else  
	{  
		row.style.backgroundColor=textColor;  
	}  
}

Beim Start wird die statische HTML Tabelle Zebramäsig "eingefärbt" mit dem TR Tag ist es dann möglich jede Zeile anzuklicken und somit einzufärben oder eben nicht..... Das ganze funktioniert nur im IE, macht aber nichts da bei diesem Tool hier intern sowieso nichts anderes eingesetzt werden kann!

Würde das auch mit CSS funktioneren??

[Auge]

Hallo

Sorry das es solange gedauert hat, die Funktion sieht so aus:

function HighLightTR(row,textColor)

{
mycolor=row.style.backgroundColor;

if(hlcolor=='white')
{
textColor='lightgrey';
}
else
{
textColor=hlcolor;
}

if(mycolor==textColor)
{
row.style.backgroundColor='#ffffff';
}
else
{
row.style.backgroundColor=textColor;
}
}

>   
> Beim Start wird die statische HTML Tabelle Zebramäsig "eingefärbt" mit dem TR Tag ist es dann möglich jede Zeile anzuklicken und somit einzufärben oder eben nicht..... Das ganze funktioniert nur im IE, macht aber nichts da bei diesem Tool hier intern sowieso nichts anderes eingesetzt werden kann!  
>   
> Würde das auch mit CSS funktioneren?  
  
Ja, mit `tr:hover { }`{:.language-css} ginge das, allerdings nicht mit dem IE (zumindest nicht bis v6).  
  
Tschö, Auge  

-- 
Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.  
Terry Pratchett, "Wachen! Wachen!"  
  
[Veranstaltungsdatenbank Vdb 0.3](http://termindbase.auge8472.de/)

[Gunnar Bittersmann]

@@Auge:

nuqneH

»» Würde das auch mit CSS funktioneren?

Ja, mit tr:hover { } ginge das, allerdings nicht mit dem IE (zumindest nicht bis v6).

Und ja, mit  tr:nth-child(odd) { } und tr:nth-child(even) { } ginge das, allerdings nicht mit dem IE (zumindest nicht bis v6). [CSS3-SELECTORS §6.6.5]

Qapla'

[Gunnar Bittersmann]

@@Colin:

nuqneH

if(hlcolor=='white')
{
textColor='lightgrey';
}
else
{
textColor=hlcolor;
}

Dafür kannst du http://de.selfhtml.org/javascript/sprache/bedingt.htm#entweder_oder@title=einfach schreiben:

textcolor = (hlcolor == 'white' ? 'lightgrey' : hlcolor;

if(mycolor==textColor)
{
row.style.backgroundColor='#ffffff';
}
else
{
row.style.backgroundColor=textColor;
}

row.style.backgroundColor = (mycolor == textColor ? '#ffffff' : textColor);

BTW, warum schreibst du mal 'white', mal '#ffffff'?

Qapla'

[Colin]

Vielen Dank allen!

Danke, nur kürzer müsste es gar nicht sein, es geht nur um ein paar KBs zu sparen in grossen files kommt dieses TR Element 1000 mal und mehr vor und das kostet Platz und braucht seine Zeit zum rendern im IE6 der hier leider fix gegeben ist!!

Das JS ist nicht von mir sondern von einer externen Firma, das muss auch nicht angepasst werden, es wäre nur darum gegangen wenn es möglich wäre

<TR onclick=HighLightTR(this)>

möglichst kurz zu machen, aber in diesem Fall schlage ich vor schreibt man dies in

<TR onclick=H(this)>

so kann ich immerhin einige tausend Zeichen sparen und das macht in diesem Fall schon viel aus....leider ist es auch die einzige Möglichkeit hier an diesem Tool etwas zu verbessern....;(

[Gunnar Bittersmann]

@@Colin:

nuqneH

Danke, nur kürzer müsste es gar nicht sein

Es geht auch nicht (nur) um die Kürze, sondern (auch) um die Würze: die Lesbarkeit des Quellcodes.

Ich finde
foo = (bar ? baz : quz);
besser lesbar als

  if (bar) foo = baz;  
  else foo = quz;

in grossen files kommt dieses TR Element 1000 mal und mehr vor und das kostet Platz und braucht seine Zeit zum rendern

Eben deshalb solltest du NICHT jedem 'tr'-Element einen 'onclick'-Handler verpassen, sondern dich mit Event-Delegation beschäftigen. S.a. in dem von philz genannten Artikel von molily die Kapitel 14 und 15.

Qapla'

[Colin]

Ich finde
foo = (bar ? baz : quz);
besser lesbar als

if (bar) foo = baz;

else foo = quz;

  
Denke das ist es auch....wobei ich JS absolut nicht kenne...  
  

> »» in grossen files kommt dieses TR Element 1000 mal und mehr vor und das kostet Platz und braucht seine Zeit zum rendern  
>   
> Eben deshalb solltest du NICHT jedem 'tr'-Element einen 'onclick'-Handler verpassen, sondern dich mit [Event-Delegation](http://molily.de/js/einbindung.html#delegation) beschäftigen. S.a. in dem von philz [genannten](https://forum.selfhtml.org/?t=187745&m=1248520) Artikel von molily die Kapitel [14](http://molily.de/js/einbindung.html#bubbling) und [15](http://molily.de/js/einbindung.html#currenttarget-target).  
  
Ich habe mir das mal durchgelesen, verstehe aber ehrlich gesagt nur Bahnhof wie mir dies helfen könnte?!? Die Funktion welche es mit dem onclick gibt ist ja das im IE jede Zeile mit einem Klick blau, oder weiss wenn sie schon blau war eingefärbt wird und beim ersten Start der Seite ist es eben ein Zebramuster. Dies soll ja auch so bleiben nur würde ich gerne das TR Element in Sachen Zeichen kürzen und sowas wie TR Tag = Standard TR Hightligh... usw. schreiben.....aber wie ich dies machen soll geht für mich aus den Links überhaupt nicht hervor.... ;(

[Gunnar Bittersmann]

@@Colin:

nuqneH

Ich habe mir das mal durchgelesen, verstehe aber ehrlich gesagt nur Bahnhof wie mir dies helfen könnte?!?

Du überträgst das Beispiel auf deine Wünsche.

Im Beispiel wurde das 'onclick'-Event nicht für jedes einzelne 'li'-Element registriert, sondern für ein übergeordnetes Element, nämlich 'ul[@id="bilderliste"]'.

So machst du das auch. Als übergeordnetes Element bietet sich bei dir das 'table'-Element an, wenn alles in einer Tabelle ist, sonst 'body'.

Wichtig in der Funktion ist die Zeile
  var target = e.target || e.srcElement;

Dadurch ist in 'target' das Element, das das Event auslöste, also das, auf welches geclickt wurde.

Von diesem hangelst du dich im DOM per '[ref:self812;javascript/objekte/node.htm#parent_node@title=parentNode]' hoch, bis du zu dem Element mit '[ref:self812;javascript/objekte/node.htm#node_type@title=nodeType]' "TR" kommst. Mit diesem machst du, was du willst.

Qapla'

[Colin]

Wie gesagt ich kenne nur gerade HTML und noch ColdFusion in Sachen Web Programmierung. Ich habe nun meiner Tabelle die ID F2 gegeben und oben im HEADER folgendes eingefügt:

<SCRIPT language="text/javascript">  
  
funktion Klick (e) {  
   // Vereinheitlichung von Event-Objekt und Zielelement  
   var e = e || window.event;  
   var target = e.target || e.srcElement;  
  
   var elementName = target.nodeName,  
      aElement = false;  
  
  
   // Andernfalls mache nichts.  
}  
  
document.getElementById("F2").onclick = Klick;  
  
</SCRIPT>

Aber klar da fehlt noch was, doch wie dies aufschreiben kann muss um damit das

<TR onclick=HighLightTR(this)>

im HTML Code zu ersetzen ist mir leider nicht klar könntest Du mir hierbei bitte nochmals unter die Arme greifen?!

Grüsse, Colin

[Cybaer]

Hi,

im HTML Code zu ersetzen ist mir leider nicht klar könntest Du mir hierbei bitte nochmals unter die Arme greifen?!

Man geht hier davon aus, daß Du das selbst nachliest, verstehst, und dann für dich selbst umsetzt.

Die am kürzesten zu tippende "fix & fertig"-Variante, hatte ich bereits gepostet ...

Gruß, Cybaer

[Colin]

Man geht hier davon aus, daß Du das selbst nachliest, verstehst, und dann für dich selbst umsetzt.

Die am kürzesten zu tippende "fix & fertig"-Variante, hatte ich bereits gepostet ...

Diese

for(i=0;i<document.getElementsByTagName("tr");i++) { document.getElementsByTagName("tr")[i].onclick=function(){ HighLightTR(this); } }

Variante hatte ich dann genommen und in ein JavaScript Tag am Anfang jeder HTML Seite eingebunden und dann im BODY noch Onload function xy hinzugefügt damit diese ausgeführt wird....so dachte ich zumindest war dies gedacht, aber da hat nichts funktioniert...?!?

[Cybaer]

Hi,

aber da hat nichts funktioniert...?!?

Da habwe ich ein .length vergessen! Im Kopf der Schleife sollte es i<document.getElementsByTagName("tr").length heißen!

Gruß, Cybaer

[Colin]

Hi,

»» aber da hat nichts funktioniert...?!?

Da habwe ich ein .length vergessen! Im Kopf der Schleife sollte es i<document.getElementsByTagName("tr").length heißen!

Danke, leider keine Änderung nun steht in meinem HTML Header

<SCRIPT language="text/javascript">  
 function msel()  
 {  
 for(i=0;i<document.getElementsByTagName("tr").length ;i++)  
 {  
 document.getElementsByTagName("tr")[i].onclick=function()  
 { HighLightTR(this); }  
 }  
 }  
</SCRIPT>

im Body steht dann:

<BODY onload=msel()>

Doch beim Aufruf der Seite passiert nichts....sprich diese öffnet sich aber die TR-Elemente lssen sich nicht mehr updaten....?!?

[Gunnar Bittersmann]

@@Colin:

nuqneH

<SCRIPT language="text/javascript">

Du hast das Script falsch http://de.selfhtml.org/javascript/intro.htm#javascriptbereiche@title=eingebunden.

Doch beim Aufruf der Seite passiert nichts....

Wird das Script überhaupt ausgeführt?

Qapla'

[Colin]

@@Colin:

nuqneH

»» <SCRIPT language="text/javascript">

Du hast das Script falsch http://de.selfhtml.org/javascript/intro.htm#javascriptbereiche@title=eingebunden.

Aha, habe ich nun korrigiert....also type anstatt Language...komisch woher ich das hatte?!?

Wird das Script überhaupt ausgeführt?

Hmm, wenn ich wüsste wo man dies sieht?!? Es erscheint zumindest kein Fehler unten links im IE6!

[JürgenB]

Hallo Colin,

»» Wird das Script überhaupt ausgeführt?

Hmm, wenn ich wüsste wo man dies sieht?!? Es erscheint zumindest kein Fehler unten links im IE6!

indem du an den Anfang ein alert("Los gehts ..."); und ans Ende ein alert("Ich habe fertig!"); setzt.

Gruß, Jürgen

[Colin]

Hallo Colin,

»» »» Wird das Script überhaupt ausgeführt?
»»
»» Hmm, wenn ich wüsste wo man dies sieht?!? Es erscheint zumindest kein Fehler unten links im IE6!

indem du an den Anfang ein alert("Los gehts ..."); und ans Ende ein alert("Ich habe fertig!"); setzt.

Danke, das funtkioniert sprich beide Meldungen erscheinen also die Funktion wird ausgeführt....dennoch funktioniert es nicht?!?

[Colin]

Na super jetzt geht es vielen herzlichen Dank ich hatte nur noch einen Tippfehler!!!

[Cybaer]

Hi,

Danke, leider keine Änderung nun steht in meinem HTML Header

Das ist so korrekt, und wird definitiv funktionieren!

(D.h., die SCRIPT-Attrribute LANGUAGE und TYPE sollte man nicht verwechseln, aber das spielt praktisch keine Rolle.)

Doch beim Aufruf der Seite passiert nichts....sprich diese öffnet sich aber die TR-Elemente lssen sich nicht mehr updaten....?!?

Da obiger Code korrekt ist, liegt der Fehler woanders.

Dir ist schon klar, daß mit HighLightTR(this) der Funktion das geklickte TR-Objekt übergeben wird?

Die aufgerufene Funktion müßte also so aussehen:

function HighLightTR(rowObj) {  
 rowObj.style.backgroundColor="red";  
}  

Gruß, Cybaer

[Gunnar Bittersmann]

@@Cybaer:

nuqneH

»» Danke, leider keine Änderung nun steht in meinem HTML Header
Das ist so korrekt, und wird definitiv funktionieren!

2× daneben. Weder das eine noch das andere trifft zu.

(D.h., die SCRIPT-Attrribute LANGUAGE und TYPE sollte man nicht verwechseln,

Äh wie jetzt, du hast gesehen, dass @language und @type verwechselt wurden, und sagtest dennoch „[d]as ist so korrekt“?

aber das spielt praktisch keine Rolle.)

Na und ob es das tut! Im Firefox jedenfalls: bei 'script' mit falschen Wert für @language wird das Script nicht ausgeführt.

Nächstes Mal lieber selber testen, bevor du „wird definitiv funktionieren“ posaunst.

Qapla'

[Gunnar Bittersmann]

@@Colin:

nuqneH

<TR onclick=HighLightTR(this)>

Fehler: Anführungszeichen fehlen. [HTML401 §3.2.2]

doch wie definiere ich dies in CSS??

Gar nicht. CSS beschreibt die Darstellung, nicht das Verhalten von Elementen.

Qapla'

[Christoph]

Moin.

Nun die grosse Frage ist da bei JEDEM TR Element auf einer Seite dies stehen muss würde ich dies gerne in CSS definieren, doch wie definiere ich dies in CSS??

Mit CSS hat das nichts zu tun, aber mit JavaScript lässt sich das bewerstelligen.

Ich würde dir zur Nutzung von Event-Delegation raten: click ist ein bubbling event, d.h. du kannst den Event-Handler einem übergeorneten Element - wie z.B. document - zuweisen (per document.addEventListener() bzw. document.attachEvent() für IE). Dort überprüfst du dann, ob es sich bei der Event-Quelle (event.target bzw. event.srcElement im IE) um ein tr-Element handelt.

Möchtest du dich nicht mit den Browser-Inkompatibilitäten herumschlagen, nutze eines der JS-Frameqorks (jQuery, Prototype, Mootools,...).

Ich persönlich habe mir mal was eigenes gebastelt. Damit sähe der relevante Code dann wir folgt aus:

  
capture('click', 'tr', function() { HighLightTR(this); });  

Christoph

[Cybaer]

Hi,

<TR onclick=HighLightTR(this)>

Nun die grosse Frage ist da bei JEDEM TR Element auf einer Seite dies stehen muss würde ich dies gerne in CSS definieren, doch wie definiere ich dies in CSS??

Gar nicht. Aber in JS z.B. so:

for(i=0;i<document.getElementsByTagName("tr");i++) { document.getElementsByTagName("tr")[i].onclick=function(){ HighLightTR(this); } }  

Gruß, Cybaer

[Gunnar Bittersmann]

@@Cybaer:

nuqneH

Aber in JS z.B. so:

Das bessere Beispiel hatte philz schon gegeben.

Qapla'

[Cybaer]

Hi,

Das bessere Beispiel hatte philz schon gegeben.

? Vielleicht bin ich blind, aber soweit ich das sehe, hat er gar kein Beispiel angegeben.

Er hat, ohne Beispiel, eine CSS-Lösung empfohlen (wobei er IMHO noch gleich hätte zusagen können, daß die auf den (leider immer noch in hinreichender Stückzahl verbreiteten) IE 6 nicht funktionieren wird, und ansonsten auf eine allg. Text verwiesen.

Das mag *vielleicht* "beispielhaft" sein, bestimmt aber ist es ohne "Beispiel" ...

Gruß, Cybaer

[Gunnar Bittersmann]

@@Cybaer:

nuqneH

»» Das bessere Beispiel hatte philz schon gegeben.

[…] Er hat, ohne Beispiel, eine CSS-Lösung empfohlen […]

Du hast mich vermutlich missverstanden.

»» »» Aber in JS z.B. so:
»»
»» Das bessere Beispiel hatte philz schon gegeben.

Der Verweis auf philz bezog sich eindeutig nicht auf CSS, sondern auf JavaScript. Und „Beispiel“ bezog sich nicht auf Beispielcode, sondern auf dein „z.B.“.

Sollte heißen: Wenn hier überhaupt eine JavaScript-Lösung angesagt ist, dann nicht – wie du vorschlugst – jedem 'tr'-Element einen 'onclick'-Handler zu verpassen, sondern – wie in molilys Artikel behandelt – Event-Delegation einzusetzen.

Kam vielleicht nicht so deutlich rüber, deshalb nochmal.

Qapla'

[Cybaer]

Hi,

Du hast mich vermutlich missverstanden.

Dann drück dich zukünftig doch einfach mal besser aus.

Sollte heißen: Wenn hier überhaupt eine JavaScript-Lösung angesagt ist, dann nicht – wie du vorschlugst – jedem 'tr'-Element einen 'onclick'-Handler zu verpassen, sondern – wie in molilys Artikel behandelt – Event-Delegation einzusetzen.

Deine *Meinung*.

Das direkte Anbinden hat die Vorteile, einfach, übersichtlich und verständlich zu sein, auch ohne sich durch Textmassen durcharbeiten zu müssen, und es liefert auch gleich noch das benötigte Element (die jeweilige TR).

Dies ist also ein einfaches, gut postbares Beispiel.

Es gibt, wie so oft, mehrere Möglichkeiten. Eine weitere wäre, einen einzigen Eventhandler zu installieren, und dann dort das Ergebnis auszuwerten.

Hast Du also zukünftig vor, jeden Vorschlag zu bewerten? Natürlich nicht begründet und abwägend, sondern einfach "Gut - so muß man es machen!" und "Scheiße - so darf man es nicht machen!"? Und das in verbesserungsfähigem Deutsch?

Ich glaube mittlerweile, Du hast nicht die einzige funktionierende Glaskugel hier, die dir ja bekanntermaßen zu erlauben scheint, in andere Köpfe zu schauen und damit fremde Projekte und Probleme auf Distanz und ohne sonstigen Wissensaustausch weissagen zu können, sondern ich glaube, Du bist schlicht ein Idiot. :-)

Gruß, Cybaer

[Gunnar Bittersmann]

@@Cybaer:

nuqneH

Das direkte Anbinden hat die Vorteile, einfach, übersichtlich und verständlich zu sein,

Es ist nicht übersichtlich. Und das ist kein Vorteil.

Es gibt, wie so oft, mehrere Möglichkeiten. Eine weitere wäre, einen einzigen Eventhandler zu installieren, und dann dort das Ergebnis auszuwerten.

Du sagst es. Und das ist die bessere.

Hast Du also zukünftig vor, jeden Vorschlag zu bewerten? Natürlich nicht begründet und abwägend

Die Begründung steht in molilys Artikel; der wurde oft genug verlinkt. Dort nachlesen. Gilt auch für dich.

sondern ich glaube, Du bist schlicht ein Idiot. :-)

Ich glaube, dir gehen die sachlichen Argumente aus. Falls du je welche hattest.

Qapla'

[Cybaer]

Hi,

Ich glaube, dir gehen die sachlichen Argumente aus.

Ich befürchte, daß man mit dir und deiner Art noch weiter leben müssen wird ...
... was halt einfach unerfreulich ist. :-)

Gruß, Cybaer

[Gunnar Bittersmann]

@@Cybaer:

nuqneH

Ich befürchte, daß man mit dir und deiner Art noch weiter leben müssen wird ...
... was halt einfach unerfreulich ist. :-)

Du hast mein vollstes Verständnis, dass es unerfreulich für dich ist, wenn dein Gegenüber statt heißer Luft lieber Argumente von dir hören würde.

Ja, du wirst wohl weiter mit diesem Stachel in deiner Haut leben müssen.

So, genug gestichelt (für diesen Thread).

Qapla'

[Cybaer]

Hi,

dass es unerfreulich für dich ist, wenn dein Gegenüber statt heißer Luft lieber Argumente von dir hören würde.

Wenn's nur so wäre ...

... und daß Du dich selbst wohl so siehst, läßt weiter das Schlimmste befürchten. Lernbefreit, merkbefreit, Gunnar ...

Ja, du wirst wohl weiter mit diesem Stachel in deiner Haut leben müssen.

Und Du mit dem Balken vor (und vermutlich auch im) Kopf ...

Gruß, Cybaer

[Struppi]

Gar nicht. Aber in JS z.B. so:

for(i=0;i<document.getElementsByTagName("tr");i++) { document.getElementsByTagName("tr")[i].onclick=function(){ HighLightTR(this); } }

  
Naja. Mal abgesehen vom unschönen Stil, ist der Code auch so nicht lauffähig. Bin ich jetzt auch ein Idiot?  
  
Struppi.

[molily]

for(i=0;i<document.getElementsByTagName("tr");i++) { document.getElementsByTagName("tr")[i].onclick=function(){ HighLightTR(this); } }

Ich rall zwar nicht, wieso sich alle über den Code beschweren, ihn dann aber nicht verbessern... Na, was solls:

[code lang=javascript]window.onload = initHighLightTR;

function initHighLightTR () {
   var trs = document.getElementsByTagName("tr"),
      handler = function () {
         HighLightTR(this);
      },
      i;
   for (i = 0, tr; tr = trs[i]; i++) {
      tr.onclick = handler;
   }
}

  
Mathias

-- 
[JavaScript-Erweiterung für das SELFHTML-Forum](http://molily.de/selfhtml-forum-js/)

[molily]

Hier nochmal ein vollständiges Beispiel für Event-Delegation. Man definiert nur den einen zentralen Event-Handler, dafür ist die Handler-Funktion etwas komplizierter. Man sucht sich das TR-Element heraus und ändert dort die Klassen. Die ganze Formatierung habe ich in die Klassen ausgelagert. Das ist alles etwas komplizierter, als es müsste, weil du gesagt hast, dass IE 6 unterstützt werden muss.

<!doctype html>  
<html>  
<head>  
<script>  
[code lang=javascript]/* Phase 1 */  
window.onload = initTableRowHighlight;  
  
/* Phase 2 */  
function initTableRowHighlight () {  
	document.getElementById("tabelle").onclick = tableRowHighlight;  
}  
  
/* Phase 3 */  
function tableRowHighlight (e) {  
	/* Vereinheitliche den Zugriff auf das Event-Objekt und das Zielelement */  
	if (!e) {  
		e = window.event;  
	}  
	var target = e.target || e.srcElement;  
	  
	/* Steige im Elementbaum ausgehend vom Zielelement auf und suche das zugehörige TR-Element.  
	Wenn zuerst TABLE gefunden wird, dann breche ab. Dann werden wir nämlich kein TR mehr finden  
	(außer bei verschachtelten Tabellen). */  
	var el = target, tagName;  
	do {  
		tagName = el.nodeName.toLowerCase();  
		if (tagName == "tr") {  
			/* TR gefunden! */  
			break;  
		}  
		if (tagName == "table") {  
			return;  
		}  
	} while (el = el.parentNode); /* Steige über parentNode auf */  
	  
	/* IE 6 kann keine multiplen Klassen. Also machen wir es zu Fuß. */  
	var className = el.className;  
	if (className == "highlight" || className == "secondhighlight") {  
		/* Lösche »highlight« aus dem Klassennamen, wenn vorhanden */  
		el.className = className.replace("highlight", "");  
	} else {  
		/* Füge »highlight« zum Klassennamen hinzu */  
		el.className += "highlight";  
	}  
}

</script>
<style>

table {  
	border-spacing: 0;  
	border-collapse: collapse;  
}  
tr {  
	background-color: white;  
	margin: 10px; padding: 10px;  
}  
tr.second {  
	background-color: #ddd;  
}  
tr.highlight,  
tr.secondhighlight {  
	border: 1px solid black;  
}  
/* Highlight von geraden Zeilen */  
tr.highlight {  
	background-color: #eef;  
}  
/* Highlight von ungeraden Zeilen */  
tr.secondhighlight {  
	background-color: #bbf;  
}  
td {  
	border: 1px solid #ccc;  
	padding: 5px;  
}

</style>
</head><body>

<table id="tabelle">
<tr><td>bla<strong>bla</strong></td><td>bla<strong>bla</strong></td><td>bla<strong>bla</strong></td></tr>
<tr class="second"><td>bla<strong>bla</strong></td><td>bla<strong>bla</strong></td><td>bla<strong>bla</strong></td></tr>
<tr><td>bla<strong>bla</strong></td><td>bla<strong>bla</strong></td><td>bla<strong>bla</strong></td></tr>
<tr class="second"><td>bla<strong>bla</strong></td><td>bla<strong>bla</strong></td><td>bla<strong>bla</strong></td></tr>
<tr><td>bla<strong>bla</strong></td><td>bla<strong>bla</strong></td><td>bla<strong>bla</strong></td></tr>
<tr class="second"><td>bla<strong>bla</strong></td><td>bla<strong>bla</strong></td><td>bla<strong>bla</strong></td></tr>
<tr><td>bla<strong>bla</strong></td><td>bla<strong>bla</strong></td><td>bla<strong>bla</strong></td></tr>
<tr class="second"><td>bla<strong>bla</strong></td><td>bla<strong>bla</strong></td><td>bla<strong>bla</strong></td></tr>
</table>

</body></html>[/code]

Ich weiß nicht, in wie weit du deinen Code anpassen kannst, damit du dieses Modell verwenden kannst. Wie du konkret die Farben änderst, ist ja auch egal - du musst nicht mit Klassen arbeiten, auch wenn das viel übersichtlicher ist. Der Aufbau der Event-Handler-Funktion dürfte allerdings gleich sein: Zielelement ansprechen, TR-Element heraussuchen, dort die Formatierungen ändern abhängig vom gegenwärtigen Status.

Mathias

[Gunnar Bittersmann]

@@molily:

nuqneH

Hier nochmal ein vollständiges Beispiel für Event-Delegation.

molily der Edle hat sich wieder erbarmt, das Gesagte in Code zu fassen.

/* Füge »highlight« zum Klassennamen hinzu */
el.className += "highlight";

▲
Kleine Anmerkung: Hier wäre ein Leezeichen gut (falls das Element noch anderen Klassen angehört):

el.className += " highlight";

Qapla'

[molily]

el.className += "highlight";
                    ▲
Kleine Anmerkung: Hier wäre ein Leezeichen gut

Da war absichtlich keines und diese Veränderung alleine würde die Sache nicht verbessern, weil der gesamte Code auf nur einer Klasse basiert. Nochmal zum Verständnis der zuständige Code:

/* IE 6 kann keine multiplen Klassen. Also machen wir es zu Fuß. */  
var className = el.className;  
if (className == "highlight" || className == "secondhighlight") {  
   /* Lösche »highlight« aus dem Klassennamen, wenn vorhanden */  
   el.className = className.replace("highlight", "");  
} else {  
   /* Füge »highlight« zum Klassennamen hinzu */  
   el.className += "highlight";  
}

Folgendes leistet dieser Code (vorher > nachher):
class=""                > class="highlight"
class="second"          > class="secondhighlight"
class="highlight"       > class=""
class="secondhighlight" > class="second"

Ich habe mit den Klassen second, highlight und secondhighlight gearbeitet, um die Zebra-Formatierung beizubehalten (d.h. auch im Highlight-Modus unterschiedliche Formatierungen). In anderen Browsern ginge das durch *eine* highlight-Klasse und unterschiedliche Formatierungen für tr.highlight und tr.second.highlight - aber nicht im IE 6.

Eine bessere Umsetzung ist natürlich möglich, aber dann müsste man Helferfunktionen für hasClass, addClass und removeClass einbinden oder den Highlight-Status am Element speichern. Ich hatte es bewusst einfach und unflexibel gelöst, weil das wieder ein Thema für sich wäre.

Mathias

[JürgenB]

Hallo Mathias,

... Man definiert nur den einen zentralen Event-Handler, dafür ist die Handler-Funktion etwas komplizierter. Man sucht sich das TR-Element heraus ...

ich gebe zu, das ich mit der Eventbehandlung im DOM oft auf Kriegsfuß stehe. Ich würde daher gerne verstehen, warum es besser ist, einen zentralen Eventhandler zu nehmen, der das eventauslösende Element erst suchen muss, statt jedem gewünschten Element seinen eigenen Handler zu geben, vor allem wenn dieses doch so einfach in einer Schleife geschehen kann.

Gruß, Jürgen

[molily]

Ich würde daher gerne verstehen, warum es besser ist, einen zentralen Eventhandler zu nehmen, der das eventauslösende Element erst suchen muss, statt jedem gewünschten Element seinen eigenen Handler zu geben, vor allem wenn dieses doch so einfach in einer Schleife geschehen kann.

Es ist nicht per se besser. In diesem Fall wird das nötige DOM-Traversing bloß vom Zeitpunkt der Initialisierung zum Zeitpunkt der Event-Verarbeitung verlegt. Das bringt zum Zeitpunkt der Event-Verarbeitung eher (wenn auch nicht nennenswerte) Performance-Einbußen und für den Bubbling-unerfahrenen Programmierer eine erhöhte Komplexität im Vergleich zum Vergeben der Handler an jedes einzelne Element.

Event Delegation hat Vorteile, wenn:

• Das Set an überwachenden Elementen sehr groß ist, im Vergleich dazu die Handler-Funktion aber nur selten ausgeführt wird
• Das Set an überwachenden Elementen variabel ist, z.B. ständig welche hinzukommen
• Die Elemente schwer Top-Bottom zu greifen sind oder das viel auwändiger ist, als Bottom-Top gewisse Bedingungen zu prüfen
• kein oder kein nennenswertes DOM-Traversing zwischen Zielelement und dem Element nötig ist, an dem man Änderungen vornehmen will. Bei den Standardbeispielen für Event Delegation sind diese Elemente identisch oder direkte Nachfahren
• man zusammenhängende Einheiten wie Widgets hat, wo der Kontext ohnehin untersucht werden muss bzw. man auch oder nur eine zentrale Funktionalität braucht

Aus der Sicht der fortgeschrittenen JS-Programmierung relativiert sich das natürlich:

• Es gibt leistungsfähige Selector-Engines, mit denen man Elemente Top-Bottom sehr einfach greifen kann. Iteration über mittelgroße Knotenlisten ist richtig gemacht keine merkliche Performance-Bremse
• DOM-Traversal beim Event Delegation wiederum ist auch unglaublich einfach, weil Herumhangeln im DOM und Testen von Kriterien leicht von der Hand geht
• Tausende Elemente mit Event-Handler-Referenzen sind kein Speicherproblem mehr, wenn man von neueren JS-Engines ausgeht. Die Gefahr von Memory Leaks besteht nur bei älteren JS-Engines

Mathias

[JürgenB]

Hallo Mathias,

vielen Dank für deine ausführliche Antwort.

Gruß, Jürgen