CSS, HTML und Javascript mit {stil}

Javascript: Event-Handler

Javascript Event Handler sind Anweisungen oder Funktionen, die Ereignisse wie einen onclick oder onsubmit eines Formulars erkennen und Aktionen als Antwort auf das Ereignis durchführen.

Wenn ein Script bei einem Ereignis – z.B. das onsubmit beim Absenden eines Formulars – aufgerufen wird, muss das Script das HTML-Element (das Formular) und das Ereignis (onsubmit) anmelden.

Event Handler lassen sich mit drei – Methoden registrieren. Obwohl die drei Modelle substanziell verschieden sind, können sie friedlich nebeneinander koexistieren.

Durch ein reguläres HTML-Attribut
<a href="" onclick="tuNix();">
  • unübersichtlichtes HTML-Markup
  • der Event Handler lässt sich nicht deaktivieren
  • das Script kann bereits beim Laden des HTML-Dokuments aufgerufen werden – sobald das HTML-Element geladen ist.
Implizit im Skript (Event Handlers als Eigenschaft des Objekts)
element.onclick = tuNix();
  • sauberes Markup
  • Der Event Handler kann durch element.onclick = null; entfernt werden
  • Jedem Ereignis kann nur eine Funktion zugeordnet 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.
Implizit im Skript mit element.addEventListener()
element.addEventListener ('click',tuNix, false);
  • sauberes Markup
  • Der Event Handler kann deaktiviert werden
  • Für ältere Versionen von IE muss attachEvent() anstelle von addEventListener() benutzt 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.

Obwohl beim Funktionsaufruf kein Paramter angegeben werden darf, kann die aufgerufene Funktion das Ereignis als Parameter notieren.
(IE: window.event)

function tuNix(evt) {
    evt = (evt) ? evt : ((window.event) ? window.event : "");
    // Verarbeitung des Events
}

Event Handler als HTML-Attribut

Die älteste und schwächste Methode platziert den Event Handler als reguläres HTML-Attribut in das HTML-Markup. Event Handler wie onclick und onsubmit lauschen im HTML-Markup auf Ereignisse und rufen einen Javascript-Befehl oder eine Javascript-Funktion auf.

Beispiel: Das Absenden eines Formulars entdecken und mit Javascript abfangen

<form id="myForm" onsubmit="handleForm(); return false;">
</form>

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 Garnknäuls.

Event Handler als anonyme Funktion

Wenn sicher gestellt ist, dass der Aufruf des Scripts erst nach dem Laden des Elements ausgeführt ist, hält eine anonyme Funktion das Script übersicht.

window.onload = function () {
    document.getElementById('myform').onsubmit = function () {
        evt = (evt) ? evt : ((window.event) ? window.event : "");
        // Verarbeitung des Events
    }
}

addEventListener

Genauso wie zuvor muss sicher gestellt sein, dass das Script erst nach dem Laden des Elements ausgeführt wird.

var myForm = document.getElementById('myForm');
myForm.addEventListener ('submit', handleForm , false);

function handleForm (evt) {
    // Verarbeitung des Events
}

IE unterstützt die Funktion addEventListener () erst ab IE9. Wenn ältere Version von IE unterstützt werden sollen, muss zusätzlich attachEvent () aufgerufen werden.

Während bei addEventListener das Event ohne das führende »on« notiert wird, muss das Ereignis für IE mit dem on-Präfix übergeben werden.

myForm.attachEvent( "onsubmit", handleForm );

Konsistentes Event-Handling für alte Browser

Solange IE8 und ältere Version von IE unterstützt werden müssen, ist die Javascript-Library jQuery eine solide Basis für das Event Handling in Javascript.

jQuery eliminiert den Unterschied zwischen den Browsern und gibt einen einfachen Zugriff auf die Elemente des HTML-Dokuments.