Ereignisgesteuerte Programmierung

Bei der ereignisgesteuerten Programmierung geht es darum, auf bestimmt Ereignisse im Programmverlauf zu regieren.

Dabei wird zum Beispiel durch die eingeben von Text oder klicken auf einer Schaltfläche ein Event ausgelöst, welches vom "Eventemitter" erfasst wird. Dieses Event wird dann im "Eventqueue" eingereiht, dabei stehen alle Events der Reihe nach an, so wie sie ausgelöst wurden. Im "Eventloop" wird fortlaufend überprüft, ob ein neues Event zum Eventqueue hinzugefügt wurde. Die Events, die im Eventqueue sind, werden nacheinander vom "Eventhandler" verarbeitet. In JavaScript sind "Eventhandler" einfache Funktionen. Also können wir als Entwickler sagen: Wenn jemand auf den Button klickt, dann wird Funktion "ABC" ausgeführt.

Auf Ereignisse reagieren

Um auf Internetseiten auf solche Interaktionen reagieren zu können, sind 3 Sachen notwendig.

Als Erstes muss ein Element bestimmt werden, bei dem ein Event ausgelöst werden soll. Wenn zum Beispiel bei dem Klick auf einem Text die Farbe des Textes geändert werden soll, dann muss das entsprechende Element ausgewählt werden. Als Zweites wird das Event angegeben, welches abgefangen werden soll. Ein Event kann sein, dass die Maus über ein bestimmtes Objekt schwebt, oder auch Tastatureingaben oder Mausklicks können Events sein, also wird als zweites ein Event an ein Element gebunden. Das dritte ist die Definition einer Funktion. Wenn nun zum Beispiel ein Klick auf einen Button getätigt wird, dann wird eine Funktion aufgerufen.

Das abfangen von Events und das binden an Elemente

Dazu gibt es 3 Möglichkeiten.

HTML-Event-Handler.

Bei dieser Möglichkeit wird ein HTML-Attribut definiert, welches eine bestimmte Funktion bei einem bestimmten Ereignis aufrufen soll. Diese Methode soll aber heutzutage nicht mehr verwendet werden, weil sich dabei HTML-Code und JavaScript-Code vermischen, das erschwert die Wartbarkeit und ist dahingehend kein guter Schreibstil. Allerdings gibt es noch recht viele HTML-Eventhandler in freier Wildbahn, weshalb man diesen auf jeden Fall kennen sollte, um ihn auch zu verstehen.

DOM-Event-Handler

Im Gegensatz zu den HTML-Eventhandler wird hier nicht der Code vermischt. Über DOM-Eventhandler können wir aber nur ein Ereignis für eine einzelne Funktion angeben.

DOM-Event-Listener

Er ist der empfohlene Weg, um auf Ereignisse zu reagieren. DOM-Eventlistener werden wie Dom-Eventhandler vom HTML-Code getrennt. Wir können aber mehrere Funktionen für ein einzelnes Ereignis definieren.

Event-Handler per HTML definieren

Im ersten Beispiel werden wir ein Eingabefeld erzeugen, in dem geprüft wird, ob wir eine positive Zahl eingegeben haben.

Die Funktion wird dann ausgelöst, wenn wir das Eingabefeld verlassen. Also in dem Moment, wo wir woanders hin klicken. Das Ergebnis wird uns direkt unter dem Eingabefeld ausgegeben. Als Erstes benötigen wir ein Eingabefeld, dieses erstellen wir in der HTML-Datei.

HTML Elemente erstellen


<!DOCTYPE html>
<html lang="de">
<head>
 ...
</head>
<body>
 ...
 <div>
  <label for="ganzzahl"></label>
  <input id="ganzzahl" type="number" value="0" onblur="zahlPruefen()">
  <div id="ausgabe"></div>
 </div>
 <script src="main.js"></script>
</body>
</html>

Das Input-Element verfügt über das Attribut "onblur" mit dem Wert "zahlPruefen()". Das HTML-Element bekommt als Attributwert den Name des Ereignisses, welches ausgelöst werden soll, dabei wird vor dem Namen ein "on" vorangestellt. Das bedeutet, unser Ereignis "blur" ist im HTML-Element das Attribut "onblur". So einfach haben wir in der HTML-Datei ein Eingabefeld und darunter ein Ausgabebereich definiert.

Eingabefeld mit vorgegebener 0 als Platzhalter

Als Nächstes bauen wir die Funktion in JavaScript.

Ereignisgesteuerte Funktion


function zahlPruefen() {
 let ausgabe = document.getElementById('ausgabe');
 let ganzzahl = document.getElementById('ganzzahl');
 let zahl = ganzzahl.value;
 if (zahl <= 0) {
  ausgabe.textContent = 'Zahl muss größer als 0 sein.'
 } else {
  ausgabe.textContent = '';
 }
}

Wenn die eingegebene Zahl kleiner oder gleich 0 ist und wir Ausserhalb des Eingabefeldes etwas anklicken, dann erscheint unter dem Eingabefeld die Meldung: "Zahl muss größer als 0 sein."

Durch negative Zahl wir eine entsprechende Meldung ausgegeben

Ist die Zahl größer als 0, dann wird durch den leeren String die Meldung gelöscht.

Durch positive Zahl wir eine entsprechende Meldung gelöscht

Wer allerdings lieber einen Button haben möchte und die eingegebenen Werte beim Klick auf den Button auswerten möchte, der erstellt ganz einfach einen Button in HTML und gibt diesem Button das Attribut "onclick" mit.

HTML Elemente erstellen


<!DOCTYPE html>
<html lang="de">
<head>
 ...
</head>
<body>
 ...
 <div>
  <label for="ganzzahl"></label>
  <input id="ganzzahl" type="number" value="0">
  <input type="submit" value="pruefen" onclick="zahlPruefen()">
  <div id="ausgabe"></div>
 </div>
 <script src="main.js"></script>
</body>
</html>

Das onblur Attribut wird hierbei selbstverständlich vom Eingabefeld entfernt.

Eventhandler per JavaScript definieren

Bei DOM-Eventhandlern müssen wir nicht an die HTML-Datei ran. Also werden wir die HTML-Elemente etwas von dem Code aus dem vorigen Beispiel befreien.

HTML Elemente erstellen


<!DOCTYPE html>
<html lang="de">
<head>
 ...
</head>
<body>
 ...
 <div>
  <label for="ganzzahl"></label>
  <input id="ganzzahl" type="number" value="0">
  <div id="ausgabe"></div>
 </div>
 <script src="main.js"></script>
</body>
</html>

Dieses Mal arbeiten wir nur mit JavaScript, aber wie zuvor werden wir auch hier unser Element ermitteln, auf welches der Eventhandler definiert wird.

Eventhandler definieren


function event () {
 document.getElementById('ganzzahl').onblur = zahlPruefen;
}

Damit haben wir unser HTML-Element ermittelt und den Eventhandler darauf definiert. Wenn die Seite vollständig geladen ist, wird die Funktion "event" ausgeführt.

Event auslösen


window.onload = event;

Die Funktion "zahlPruefen" bleibt unverändert. Es ist zu beachten, dass wir hier nur den Funktionsnamen schreiben ohne den Funktionsaufruf also das Klammerpaar. Wenn wir das Klammerpaar mit angeben, dann wird der Rückgabewert des Funktionsaufrufes von "zahlPruefen" als Eventhandler definiert. Wie bereits erwähnt, können wir mit den DOM-Eventhandler immer nur ein Event an einem Element als Eventhandler definieren. Teilweise kann mit anonymen Funktionen gegengelenkt werden, aber es empfiehlt sich, die Arbeit mit den Eventlistener.

Event-Listener definieren

Definiert werden diese Event-Listener über die Methode "addEventListener()". Diese erwarten die Parameter "event", auf das regiert werden soll, sowie den Eventlistener, also die Funktionen, die aufgerufen werden sollen. Ein dritter Parameter kann den Ereignisfluss beeinflussen.

Eventhandler definieren und Event auslösen


function event () {
 document.getElementById('ganzzahl').addEventListener('blur', zahlPruefen, false);
}
window.onload = event;

Das Element bekommt das Event "blur" ohne "on" übergeben. Bei Eventlistener wird kein "on" mit übergeben, es reicht der Name des Events als Zeichenkette. Darauf folgt die Funktion, die aufgerufen werden soll wieder ohne das Klammerpaar. Wenn wir nun mehrere Events auf unser Element definieren möchten, dann erweitern wir einfach die Funktion "event", um ein paar Eventlistener.

Mehrere Events auf ein Element definieren


function event () {
 document.getElementById('ganzzahl').addEventListener('blur', zahlPruefen, false);
 document.getElementById('ganzzahl').addEventListener('mouseover', faerben);
 document.getElementById('ganzzahl').addEventListener('mouseout', entfaerben);
}
window.onload = event;

Natürlich sollten die Funktionen, die aufgerufen werden, schon vorher fertig geschrieben sein. Um einen Eventlistener zu entfernen, verwenden wir die Methode "removeEventListener" und übergeben ihr genau die Werte, die wir vorerst vergeben haben, um ein Event auf das Element zu definieren.

Mehrere Events auf ein Element definieren


document.getElementById('ganzzahl').removeEventListener('blur', zahlPruefen);

Auf Informationen eines Ereignisses zugreifen

Wir haben die Möglichkeit, innerhalb von Funktionen auf Informationen des ausgelösten Ereignisses zuzugreifen, die als Eventlistener registriert wurden. Jedes Ereignis wird durch einen Objekttypen repräsentiert.

Es gibt verschiedene Arten von Ereignissen, dabei unterscheiden wir zwischen Interaktionen mit der Maus oder mit der Tastatur auch bei arbeiten mit Formularen oder Fokussieren auf Elementen sowie das verwenden verschiedener Schnittstellen wie zum Beispiel die unterschiedlichen Sensoren von mobilen Geräten sind Ereignisse, auf die wir individuell reagieren können. Auch Formularfelder, Checkboxen oder Radiobuttons können auf Ereignisse reagieren. Mit JavaScript haben wir auch die Möglichkeit, auf Ereignisse zu reagieren, die über Toucheingabefelder oder Sensoren gemeldet werden. Selbst das "Drag and Drop" verfahren wird über Ereignisse gesteuert. In JavaScript durchläuft jedes Ereignis mehrere Event-Phasen während des Auslösens.

Weiter mit BOM (Browser Object Model)