Javascript Event Handling – Ereignisse erkennen

JS Events: Maus, Tastatur oder Keyboard Events

Javascript Event Handler sind Anweisungen oder Funktionen, die beim Eintreten eines Events wie click, touch oder beim submit eines Formulars Aktionen als Antwort auf das Ereignis durchführen.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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. das submit-Element des Formulars) für das Ereignis (onsubmit) an. Selbst die einfachste Webseite stößt Events an.

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 aufgerufen 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.

Schema Event Handler
Events und Event Handler-Funktionen
  1. <button id="ot" onclick="openTab">Öffnen</button>
  2. querySelector("#ot").onclick = openTab;
  3. querySelector("#ot") addEventListener ("click", openTab);
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
  • Die Funktion kann erst aufgerufen werden, wenn das Element im Browser geladen wurde. Wenn das Script im Kopf der Seite geladen wird, darf die Funktion erst aufgerufen werden, wenn das Dokument im Browser geladen wurde.
  • Unterstützt nur die Bubbling-Phase des Events, nicht aber die Capture-Phase.
Implizit im Skript mit element.addEventListener()
element.addEventListener ('click',tuNix);
  • sauberes Markup
  • Der Event Handler kann deaktiviert werden
  • Die Funktion kann erst aufgerufen werden, wenn das Element im Browser geladen wurde. Die Funktion muss am Ende der Seite oder innerhalb einer Funktion aufgerufen werden, die von einem onload-Event angestossen wurde.
  • Unterstützt Event Bubbling- und Capture-Phase.

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.

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 heute in jedem Browser. 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.

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

function handleForm () {
    // Verarbeitung des Events
}

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 );