CSS, HTML und Javascript mit {stil}

Javascript: Event-Handler

Javascript Events

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

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

Selbst die einfachste Webseite stößt Events an. Wenn die Seite geladen wird, wenn ein Formular abgesendet wird und schon wenn der Benutzer in ein Eingabefeld klickt, wenn der Benutzer auf einen Link klickt, sein Tablett dreht, das Browserfenster größer zieht – das sind Events. Die Bewegung der Maus erzeugt Events in großen Mengen, jedes Drücken einer Taste auf der Tastatur ist eine Serie von Events, Scrollen ist ein Event.

Events und Event Handler

Events sind in Javascript schon eingebaut, die Reaktion auf ein Event wird in Event Handlern programmiert. Wir müssen festlegen, auf welchem Element wir ein Event erwarten und sagen, welches Scriptcode das Event behandeln soll.

Events, Event Handler, Event Handler registrierenonloadonclickonresizeontouchstartonkeypressonmousemoveonblurfunction openTab() {}function validateField() {}EVENTSEvent Handler<button id="ot" onclick="openTab">Öffnen</button>Event Handler registrieren123querySelector("#ot").onclick = openTab();querySelector("#ot").addEventListener ("click", openTab);
Event Handler registrieren

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);
  • sauberes Markup
  • Der Event Handler kann deaktiviert werden
  • Für ältere Versionen von IE (bis einschl. IE8) 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 Funktion

Die Anweisungen, die beim Eintreten eines Events ausgeführt werden, sitzen i.d.R. in einer Javascript Funktion.

document.querySelector('#myId').onsubmit = handleForm;

function handleForm() {
	…
	…
}

Das kann man auch in eine anonyme Funktion setzen. 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('myId').onsubmit = function () {
        …
        …
    }
}

addEventListener

Das Konzept element.onEvent ist altgedient und funktioniert heute in jedem Browser. addEventListener ist flexibler und mächtiger, aber funktioniert erst ab IE 9 (und in allen modernen Browsern).

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 () {
    // 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 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.