Homepapa-Logo

CSS Anwendung

Ergänzung

Wie wir das Element eines Events erfahren

function aufklappen(mev) {
  if(mev) var wodenn = mev.target ;                      // Browser-abhängig
  else    var wodenn = window.event.srcElement ;         // das Element ermitteln
  alert("Hallo! wir sollten das Untermenu zu " + wodenn.id + " aufklappen") ;
}

Dieses kurze Schnipsel JavaScript ist in höchstem Masse erklärungsbedürftig, wenn man wirklich wissen will, was hier abgeht. Genau so gut kann man sich aber darum foutieren und sich einfach mit dem Resultat zufrieden geben, welches dann etwa so lautet:

Einzelne Ereignisse (sogenannte Events) sind mit HTML-Elementen verknüpft. So kann zum Beispiel das "Betreten" eines Elements mit der Maus ein Event auslösen, und dieses Event ist natürlich mit dem betretenen Element verknüpft. Eine Event-Handler-Funktion erhält dieses Element auf unterschiedlichen Wegen, weil das die Browser nicht einheitlich verarbeiten. Aber mit den ersten drei Zeilen der oben gezeigten Funktion wird das erledigt und das Element ist als Variable greifbar.

Für die Praxis reicht das tatsächlich aus; du kannst ja die drei Zeilen jeweils kopieren.

Was aber steckt dahinter?

Nun, in einer Objekt-orientierten Welt ist alles, was man antrifft, erst mal ein Objekt. Ein Bildschirmfenster ist ein Objekt, ein Text-Absatz ist ein Objekt und ein Event ist ebenfalls ein Objekt. Objekte haben dann unter anderem genau definierte Eigenschaften, die manchmal ganz einfach zu verstehen sind, wie z.B. Höhe und Breite eines Fensters oder einer div, manchmal auch etwas abstrakter. Eine der noch verständlichen Eigenschaften des Event-Objekts heisst nun eben nicht "Höhe" oder "Breite", sondern srcElement und ist nicht einfach ein Zahlenwert, sondern ein HTML-Element, nämlich genau das, das mit dem Event verknüpft ist. Das erklärt die Anweisung

 var wodenn = window.event.srcElement ;

Nun ist es aber nicht immer so, dass das aktuelle Ereignis als window.event verfügbar ist. Der Internet-Explorer von Microsoft macht das zwar so, aber das W3C hat eine andere Spezifikation, die von den Mozilla-basierten Browsern (Netscape, Mozilla, Firefox, K-Meleon etc) befolgt wird. Gemäss dieser Spezifikation ist ein Event nicht einfach als window.event verfügbar, sondern wird automatisch dem Event-Handler als Argument übergeben. Damit der Event-Handler damit umgehen kann, haben wir die Übergabe eines Arguments vorgesehen:

 function aufklappen(mev)

Die Eigenschaft dieses Events, die auf das mit dem Event verknüpfte HTML-Element verweist, heisst hier aber nicht srcElement sondern target. Somit bedeutet die Zeile

 if(mev) var wodenn = mev.target ;
Wenn tatsächlich ein Event als Argument übergeben wurde, dann ist dessen Eigenschaft target das gesuchte Element.

Elegant ist die Abfrage if(mev) - wenn ein Argument übergeben wurde, ist das Resultat true und andernfalls false. Sie funktioniert natürlich nicht nur im Zusammenhang mit Events, sondern auf diese Art lässt sich immer das Vorhandensein eines Argumentes überprüfen.

Wenn du dich für JavaScript in dieser Tiefe interessierst, solltest du dich nach spezialisierten Quellen umsehen. SELFHTML ist im deutschsprachigen Raum die erste Wahl unter den Internet-Quellen. Bücher gibt es sicher sehr viele; ich persönlich habe sehr viel aus dem Java Script Workshop von Stefan Mintert und Christine Kühnel gelernt. Das Buch beginnt praktisch bei Null und führt sehr weit.

Damit ist das Rätsel um die Ermittlung des Event-Elementes gelüftet. Du kannst dieses Fenster wieder schliessen.