Skripte richtig aufrufen

Eine der Haupttechniken von barrierefreiem JavaScript ist es, Skripte in einem eigenen Dokument zu verwahren, anstatt Sie mit dem HTML-Dokument zu mischen. Um die Funktionen in dem .js Dokument zu verwenden, müssen wir sie aufrufen, nachdem die Seite geladen ist. Dies kann über mehrere Wege geschehen, jeder mit seinen eigenen Vor- und Nachteilen.

Der althergebrachte Weg

Früher, als wir noch jung und unbedarft waren, haben wir dem BODY Element einen onload Aufruf hinzugefügt:

HTML:
<body onload="foo();">

Das ist eine der Techniken, von der wir zwar unseren Enkeln erzählen können, aber sie nicht mehr anwenden sollten!

Wenn wir die Funktionen weiterhin im body Element aufrufen, haben wir nichts erreicht - wir mischen immer noch HTML und JavaScript. Zugegebenermassen nicht so stark wie vorher, aber immer noch zu viel. Was wir erreichen müssen ist eine vollkommene Trennung von JavaScript und HTML indem wir den Aufruf der Funktionen ebenfalls in das .js Dokument packen.

Der getrennte Weg

Um das zu erreichen, verwenden wir die onload Methode des window Objekts. Wenn nur eine Funktion gestartet werden muss, brauchen wir keine Klammern nach dem Funktionsnamen, da wir ansonsten den Rückgabewert der Funktion erhalten würden anstatt die Funktion auszuführen.

Wenn mehr als eine Funktion ausgeführt werden soll, oder Parameter übergeben werden müssen, verwenden wir eine namenlose Funktion, die die anderen startet, diesmal mit Klammern.

Javascript:
window.onload=foo;

// oder

window.onload=function()
{
 foo();
 bar("one");
 baz();
}

Diese Art Funktionen aufzurufen ist nicht nur auf das window Objekt beschränkt, sondern kann, wie im vorherigen Kapitel gezeigt (die onclick Beispiele), auf alle Objekte im Dokument angewandt werden. Jeder Webbrowser, der JavaScript und das DOM beherrscht, kann damit umgehen.

Der Nachteil ist, dass wir nicht vollkommen unabhängig sind. Wenn wir Beispielsweise mehrere .js Dokumente einbinden, überschreiben diese die onload Aufrufe der Anderen.

Der wirklich unabhängige Weg

Es gibt eine Möglichkeit, Aufrufe anderen Aufrufen hinzuzufügen. Allerdings wird diese von verschiedenen Webbrowsern anders interpretiert, und MSIE auf Macintosh Rechnern versteht sie überhaupt nicht.

Scott Andrew schrieb eine schlaue wiederverwendbare Funktion[1] die genau das bewirkt. Man kann Sie anwenden, indem man ihr das Objekt, das den Aufruf erhalten soll, die Art des Aufrufs und den Namen der Funktion übergibt.

function addEvent(obj, evType, fn){ 
 if (obj.addEventListener){ 
   obj.addEventListener(evType, fn, false); 
   return true; 
 } else if (obj.attachEvent){ 
   var r = obj.attachEvent("on"+evType, fn); 
   return r; 
 } else { 
   return false; 
 } 
}
addEvent(window, 'load', foo);
addEvent(window, 'load', bar);

Der übelste Nachteil ist natürlich dass Apple-Benutzer im Regen stehen bleiben.

Eine Stimme aus der Oper

Ich habe eine Email von Opera erhalten, die erklärt, dass das vorangegangene Beispiel Fehler beinhaltete, daher ist es anders als das auf der Seite von Scott:

Die addEvent Funktion ist nicht Standardkonform. Sie funktioniert derzeit in FireFox, aber wenn dieser Fehler behoben wird, wird sie auch nicht mehr zuverlässig in FireFox funktionieren. Wahrscheinlich funktioniert sie auch in Opera nicht, da Opera die Standards unterstützt. Das Problem ist dass die Funktion den Aufruf anhängt, indem ein "true"- Parameter als das dritte Argument der addEventListener Funktion geschickt wird:
if (obj.addEventListener){ 
   obj.addEventListener(evType, fn, true);
Dieses Argument sollte false lauten. Wenn das Argument true ist, sollte der Aufruf nicht auf dem Element erfolgen, auf dem die Funktion angewandt wurde. Wenn man zum Beispiel die Funktion auf ein LI- Element anwendet, und dieses keine Kindknoten hat, passiert nichts. Nachzuprüfen in Opera.

Weitere Quellen

Aufrufe sind ein sehr komplexes, und zeitweise verwirrendes JavaScript Thema. Für Internetseiten sind die hier genannten Beispiele ausreichend, fuer Webprogrammierung sollten wir allerdings etwas weiter gehen. Im Kapitel Weitere Artikel zum Thema sind Verweise aufgelistet, die mehr und detailiertere Informationen enthalten.

Selbstversuche

Lade das das HTML Beispiel herunter und versuche Dich sich an einer der folgenden Aufgaben. Folge den Lösungsverweisen um eine mögliche Lösung zu sehen. Die Lösungsbeispiele beinhalten das notwendige JavaScript , was zwar nicht mit den Grundsätzen des barrierefreien JavaScripts übereinstimmt, aber einfacher zu lesen und verstehen ist.

Nimm diese Tabelle und verwende eine barrierefreie Funktion um jede zweite Reihe anders einzufärben. Füge eine andere Farbe hinzu wenn die Maus sich über der Reihe befindet. Lösung Tabelle.
Füge jedem Paragraph (P-Element) mit der Klasse "trigger" eine Funktion hinzu die das folgende Element versteckt und anzeigt (indem das display Attribut des style Objekts auf "block" oder "none" gesetzt wird. Lösung Aufklappen.

Links

[1] Funktion um Aufrufe bereits bestehenden hinzuzufügen http://www.scottandrew.com/weblog/articles/cbs-events