Stil mit {stil}

Sep 2008

Unobtrusive Javascript: Event Handler implizit im Skript anmelden

Seit Netscape 3 und MSIE 4 können Event Handler durch Skript-Anweisungen eingebunden werden statt inline über ein Attribut des HTML-Tags. Die externe Bindung hält das Markup sauber, den Code flexibel und portabel und folgt damit dem Trend, Inhalt, Stil und Verhalten eines Dokuments voneinander zu trennen.

Diese Technik der Programmierung mit Javascript wird als »unabtrusive« Javascript – auch stilles oder unaufdringliches Javascript – bezeichnet, da sie das HTML-Markup frei von Javascript-Einschlüssen hält.

Durch ein id-Attribut, Tag-Namen oder ein class-Attribut und die Methoden des DOM kann jedes Element eines HTML-Dokuments angesprochen und durch ein Javascript manipuliert werden.

var pageLinks = document.getElementsByTagName("a");

pageLinks sammelt alle a-Elemente einer HTML-Seite und ist nach erfolgreicher Zuweisung ein Array.

imgs = document.getElementsByTagName ('img');
for (i=0; i<imgs.length; i++) {     
  if (/aroll/.test(imgs[i].className)) { 
  …
}

sammelt alle img-Elemente des HTML-Dokument und die folgende for-Schleife filtert die img-Tags mit class="aroll" für die weitere Verarbeitung heraus.

document.getElementById('mydiv').onclick = tuNix;

Auch diese Methode ist sicher, stabil und funktioniert in jedem Browser, der Javascript implementiert. Genauso wie bei der veralterten Inline-Methode der Einbindung von Javascript über ein Attribut des HTML-Tags gilt auch hier natürlich: Wenn der Browser das Ereignis für das jeweilige HTML-Element unterstützt. Das Ereignis muss in Kleinbuchstaben notiert werden und darf keine Klammern aufweisen. Die Funktion selber darf aber Parameter aufweisen, nämlich das Event.

function tuNix(evt) {
	this.setAttribute('style','background: red');
}

Javascript Events in anonymen Funktionen behandeln

Wenn die Funktion tuNix sehr einfach ist, kann anstelle einer Funktion auch eine anonyme Funktion eingesetzt werden.

element.onclick = function(evt) { 
   this.setAttribute('style','background: red'); 
}

Jetzt könnten wir die Event Handler aus dem HTML-Markup entfernen, aber eine Hürde bleibt noch zu nehmen.

Probleme mit dem Event Handler »onload«

Im konventionellen Ansatz des Modell 2 können wir einem Ereignis nur eine einzige Funktion zuordnen. Nehmen wir z.B. den Event Handler onload, der typischerweise das Skript aufruft, wenn eine Seite vollständig (Skripte, Grafiken, Plugins und Stylesheets) geladen wurde.

Der Aufruf window.onload = myScript; ist in Ordnung, solange es bei einem Skript bleibt. Wenn mehr als ein onload-Event Handler gebraucht wird, können wir die Event Handler nicht einfach nacheinander laden

window.onload = function1;
window.onload = function2;
window.onload = function3; 

Dabei würde nur der dritte Event Handler registriert, da jede Zeile die vorangegangene ersetzt. Wenn mehr als ein onload-Event Handler gefeuert werden soll, müssen wir die Event Handler in einer Funktion aufrufen.

function start () 
{
   function1();
   function2();
   function3();
}

window.onload = start;

Das widerum wird problematisch, wenn wir die drei Funktionen nicht auf jeder Seite benutzen wollen und führt zu Fehlermeldungen, dass Funktionen nicht definiert sind.

Ereignisse registrieren: eventListener (DOM 2)

Document Object Model (DOM) Level 2 Events Specification, Version 1.0, W3C Recommendation 13 November, 2000

Peter-Paul Koch The web professional's online magazine of choice. Separating behavior and structure

Supporting Three Event Models at Once

Using the Document Object Model From JavaScript