Sep 2008
Javascript Event Handler sind Anweisungen oder Funktionen, die Ereignisse wie einen Mausklick oder das Submit eines Formulars erkennen und Aktionen als Antwort auf das Ereignis durchführen.
Wenn ein Javascript bei einem Ereignis – z.B. beim Hovern mit der Maus über einem Bild – reagieren soll, muss das Script das HTML-Element (das Bild) und das Ereignis (mouseover) bei einem Registrar anmelden.
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 |
|
Die älteste und schwächste 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 einen Javascript-Befehl oder eine Javascript-Funktion auf. Auch Apps 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_changeImg('bild_L','','bild_XL.jpg',1);return false" />
</a>
Was ist schlecht an einer Technik, die mehr als ein Jahrzehnt in allen Browsern funktionierte und im HTML-Standard verankert ist?
Der Inline-Ansatz – mitten im HTML-Tag – macht das Markup unübersichtlich. 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.