Webdesign mit CSS, HTML und Javascript
Stil mit {stil}
 Praxistests aktueller Kameras, Bildbearbeitung und Bildgestaltung foto.5lux.de Online-Magazin für Fotografie und Bildbearbeitung |
Sep 2008
Javascript: Event-Handler
Event Handler sind Anweisungen oder Funktionen, die Ereignisse (Mausklicks, Submit, Fenster schliessen usw.) erkennen und Aktionen als Antwort auf das Ereignis durchführen. Bereits in den Ursprüngen von Javascript haben Event Handler beim Mausklick Bilder ausgetauscht.
Wenn bei einem Ereignis wie „Benutzer bewegt die Maus über ein Bild" z.B. das Bild durch ein Javascript ausgetauscht werden soll, muss das Script das Element (das Bild) und das Ereignis (mouseover) bei einem Registrar anmelden.
Scripte als Event Handler registrieren | Event Handler lassen sich mit drei – eigentlich dreieinhalb – Methoden registrieren. Obwohl die drei Modelle substanziell verschieden sind, können sie friedlich nebeneinander koexistieren.
| DOM Level 0 | DOM Level 2 | |
|---|---|---|
| Modell 1 | Modell 2 | Modell 3 und 3 ½ |
| Explizit durch ein reguläres HTML-Attribut | Implizit im Skript (Event Handlers als Eigenschaft des Objekts) | Implizit im Skript (DOM Level 2) |
| <a href="" onclick="tuNix();"> | element.onclick = tuNix; | DOM Level 2: element.addEventListener ('click',tuNix, false); MSIE: attachEvent ('onclick', tuNix); |
| - unübersichtliches Markup, fest verdrahtet - Der Event Handler lässt sich nicht entfernen |
+ sauberes Markup + Der Event Handler kann durch element.onclick = null; entfernt werden - Jedem Ereignis kann nur eine Funktion zugeordnet werden |
+ sauberes Markup + Der Event Handler kann deaktiviert werden |
| Der Handler kann erst ausgeführt werden, wenn das Tag des Elements im Browser geladen wurde. Die Funktion muss am Ende der Seite oder innerhalb einer Funktion aufgerufen werden, die von einem onload-Event Handler angestossen wurde. | ||
| Zugriff auf das Ereignis-Objekt | ||
| onclick="tuNix (evt)"; | DOM: tuNix; ... function tuNix (evt); Obwohl beim Funktionsaufruf kein Paramter angegeben werden darf, kann die aufgerufene Funktion das Ereignis als Parameter notieren. MSIE: window.event |
|
Modell 1: Event Handler per HTML-Attribut anmelden
Die älteste, meistgenutze und sicherste Methode injiziert den Event Handler durch ein reguläres HTML-Attribut im HTML-Code. Event Handler wie onclick und onsubmit lauschen im HTML-Markup auf Ereignisse und rufen ein Stück Skript oder eine Funktion auf. Auch Authoring Tools wie Dreamweaver verfolgen diesen Ansatz und betten den Event Handler durch das HTML-Attribut ein.
Das ist ein Klassiker aus den „Verhalten“ in Macromedia Dreamweaver: Beim Klick auf ein Thumbnail wird die große Version des Bildes angezeigt.
<a href="#"><img src="bild.jpg" id="bild1"
onClick="MM_swapImage('bild_gross','','bild1-XL.jpg',1);return false" />
</a>
Was ist schlecht an einer Technik, die seit fast einem Jahrzehnt in allen Browsern funktioniert und in der HTML-Spezifikation verankert ist?
Der Inline-Ansatz macht das Markup unübersichtlich und wenn unterschiedliche Events auf den Elementen abgefangen werden sollen, wird das Markup regelrecht von Event Handlern überschwemmt. Die feste Verdrahtung zwischen HTML-Code und Event Handler macht Erweiterungen und Änderungen so ineffizient wie das Entwirren eines Wollknäuls.
Modell 2: Event Handler implizit im Skript anmelden
Seit Netscape 3 und MSIE 4 können Event Handler durch Skript-Anweisungen eingebunden werden. 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.
document.getElementById('mydiv').onclick = tuNix;
Auch diese Methode ist sicher, stabil und funktioniert in jedem Browser, der Javascript implementiert. Genauso wie die Inline-Methode 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');
}
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.
Das Problem 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)
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
