Event

Einführung

Programme sollen auf Ereignisse reagieren können. Üblicherweise werden auf der Benutzeroberfläche des Programmes Teile bestimmt, wo Einfluss auf ein Programm genommen werden kann.

Beispiele

• Es wird ein Dokument mit einem Doppelklick geöffnet.
• Im Menü des Programmes wird das Drucken der Datei ausgewählt.
• Der Papierkorb wird entgültig geleert
• Eine Mail ist angekommen

Um das zu ermöglichen werden im Programm Teile bestimmt, die auf solche Ereignisse hinprogrammiert werden. Wird JavaScript in Html Seiten verwendet dann sind dafür die:

• Html Tags
• Klassenbezeichnungen
• IDs
• und anderes mehr ...

zuständig.

Um einen Event in JavaScript ordnungsgemäß abwickeln zu können sind 3 Punkte notwendig:

1. Wer soll auf einen Event reagieren?

Welcher Teil im HTML-Dokument ist für das Ereigniss zuständig das einen Event auslöst?

So wird derjenige, der die Verantwortung für das Empfangen des Ereignisses übertragen bekommt aus dem Html Code der Webseite gesucht und bestimmt:

Das verhält sich genauso nach der großen Frage: Wer meldet sich freiwillig für ...

document.querySelector (Parameter);

Zwischen den Klammern kann folgender Parameter stehen:

• Html Tag wie: "b" "div" "h1"
• Klassenbezeichnungen wie ".zitat"
• IDs wie "#kopfzeile"
• ...

Achtung diese Anfrage liefert immer nur das erste gefundene Element. Sie kann erst NACHDEM sich die Webseite bis zum betreffenden Element geladen hat aktiv werden!

Jener Teil des Html Dokuments, das auf das Ereignis warten soll, wird Listener genannt. Das gefundene Objekt wird durch den Aufruf der Methode addEventListener(), zum Verantwortlichen ernannt.

.addEventListener()

Um im Beispiel zu verdeutlichen was dabei passiert bestimme ich als Verantwortlichen den Portier. Das bedeutet es wird eine Variable mit dem Namen portier bestimmt, das die Rolle des Portiers - fachgesprochen des Listeners - erhält:

portier.addEventListener()

Diese Methode hat 2 Parameter:

• Welches Signal löst den Event aus?
• Wie soll auf diesen Event reagiert werden?

2. Wie wird das Signal gegeben?

Im Leben können Signale durch Handzeichen, Ampeln, Rauchzeichen mit Feuer usw. gegeben werden. Es ist wichtig zu wissen, auf welches Signal denn geachtet werden soll? In Programmiersprachen zählen zu den Signalen:

• Eingaben des Benutzers Beispiel: keydown
• Verwendung der Maus Beispiel: click
• Touchscreen
• Anfrage von einem anderen Programm
• usw.

Diese Signale sind vorgegeben und werden als erster Parameter übergeben. change, click, mouseover, mouseout, keydown, load Eine schöne Zusammenstellung möglicher Events und Methoden siehe: w3scools.com Alle Events immer ohne den vorangehenden on also statt onclick -> click

portier.addEventListener("click",)

In unserem Beispiel wird die Art des Signals jedoch in der Variablen art_des_signals gespeichert.

var art_des_signals = "click";

3. Letztendlich wird bestimmt, was zu tun ist, wenn das Signal erfolgt

Der zweite Parameter enthält nur die Referenz zu der Anweisung die auszuführen ist.

In unserem Beispiel lautet die Anweisung das Fenster zu öffnen um den Raum zu lüften.

 var anweisung = lueften;

 function lueften() {
     alert("ich habe das Fenster soeben geöffnet");
 }

Somit lautet der vollständige Satz für das betreffende Objekt in unserem Beispiel:

portier.addEventListener(art_des_signals, anweisung)

Somit weiß der Portier, auf was er reagieren muss und was zu tun ist, wenn dieses Ereignis bzw fachchinesisch Event eintrifft.

Das vollständige Beispiel:

Üblicherweise wird die var anweisung immer e genannt.

Das Script darf erst dann aktiv werden, wenn die Seite geladen ist! Deswegen steht das Script am Schluß im body-Tag.

 <div> 1. div-Tag zum Testen </div>
 <div> 2. div-Tag zum Testen </div>

 <script>
     var anweisung = lueften;
     var art_des_signals = "click";
     var portier = document.querySelector("div");

     function lueften() {
         alert("ich habe das Fenster soeben geöffnet");
     }

     portier.addEventListener(art_des_signals, anweisung);
</script>

Anwendung

Tipps

Der Event: input aktualisiert während der Änderung von Eingaben - siehe:Developer.mozilla.org

---

Der Inhalt eines Html Blocks wird mit der Eigenschaft

document.querySelector(Parameter).innerHTML;

gelesen oder geändert. Vorsicht, Suchmaschinen sind keine Hellseher