Javascript Event Handling – Ereignisse erkennen und verarbeiten

Ein Event nach dem anderen

Wenn die Seite geladen wird, das Browserfenster verkleinert oder vergrößert wird, beim Scrollen und wenn der Benutzer in ein Eingabefeld oder auf einen Link klickt, sein Tablett dreht – das sind Events. Die Bewegung der Maus und Scrollen erzeugen Events in großen Mengen, jedes Drücken einer Taste auf der Tastatur ist eine Serie von Events. Damit eine Anweisung oder Funktionen bei einem Ereignis – z.B. beim Absenden eines Formulars – aufgerufen wird, meldet das Script ein Element (z.B. button type="submit"-Element eines Formulars) für das Ereignis (submit – Absenden der Formulardaten) an.

Selbst die einfachste Webseite stößt Events an: Laden der Seite, Scrollen, Klicken, Schließen der Seite.

Events entstehen nicht »irgendwie« und »irgendwo«, sondern immer an einem bestimmten Objekt. In Javascript gibt es drei Haupt-Ebenen:

1. window – der Browser, der ViewPort
2. document – das HTML-Dokument
3. HTML-Elemente – Buttons, Eingabefelder, Bilder, …

Der Browser reagiert auf diese Events und ändert die Darstellung, baut Teile der Seite neu auf, ändert Farben, öffnet eine neue Seite oder kommuniziert mit einer Anwendung auf dem Server.

Wenn eine Seite geladen wird, baut der Browser die Seite auf, setzt die Pixel und ihre Farben (Rendern), wartet auf ein Event und führt ein Script aus, wenn das Event eintritt. Unsere eigenen Scripts erweitern den Browser und bringen ihm neue Verhalten bei.

Events erkennen

Die Event-Erkennung ist in Javascript schon eingebaut. Die Reaktion auf ein Event wird in Event Handlern programmiert, das sind spezielle Funktionen oder Methoden. Wir müssen festlegen, auf welchem Element wir ein Event erwarten und sagen, welche Funktion das Event behandeln soll.

Eine Event-behandelnde Funktion könnte z.B. einen Button bei einem Klick oder Touch blau färben:

function paintItBlue () {
	document.querySelector("#myButton").classList.add ("blueButton");
}

Normale Funktionen werden ausgeführt, wenn sie aufgerufen werden. paintItBlue darf aber erst ausgeführt werden, wenn der Benutzer auf ein bestimmtes Element klickt. Das auslösenden Element, das auslösende Ereignis und die Funktion müssen angemeldet werden.

Ein Event für ein Element anmelden

Javascript stellt drei Techniken bereit, um ein Event für ein Element zu anzumelden oder zu registrieren. Obwohl diese drei Techniken substanziell verschieden sind, können sie friedlich nebeneinander koexistieren.

<button onclick="paintIt()">
	Klick!
</button>

elem.onclick = handleEvent();

elem.addEventListener('click',
                       handleEvent()
);

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 onsubmit="handleForm(); return false;">
</form>

Was ist der Nachteil dieser 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. HTML und Logik sind jetzt getrennt.

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 übersichtlich.

window.onload = function () {
    document.getElementById('myId').onsubmit = function () {
        …
        …
    }
}

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

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

addEventListener

Das Konzept element.onEvent ist altgedient und funktioniert immer noch in allen modernen Browsern. addEventListener des W3C ist flexibler und tatkräftiger.

Genauso wie zuvor muss sicher gestellt sein, dass das Script erst nach dem Laden des Elements ausgeführt wird (z.B. mit dem Attribut defer im Script-Tag).

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

function handleForm () {
    // Verarbeitung des Events
}