Events

Events sind eigentlich das Herzstück einer Clientside Scriptsprache. Erst mit einem Event wird JavaScript dynamisch, das heisst ein Event kann HTML und CSS dynamisch ändern und dem User Informationen liefern. Events entstehen auf einer Webseite mit dem Beginn des Ladeprozesses, das Laden selbst ist schon ein Event. Scrollen, Mausbewegung, Drücken einer Taste der Tastatur und Verlassen der Webseite sind Events. Solange eine Webseite im Browserfenster geladen ist, entstehen unzählige Events. Events werden normalerweise in Verbindung mit einer Funktion verwendet. Die Funktion wird nicht aufgerufen, bevor das Event eintritt. Diese Anweisungen werden in JavaScript auch als Event Handler bezeichnet. Zu beachten ist auch noch, dass einige HTML-Elemente Standardevents besitzen, wie z.B das a-Tag. Mit einem Klick aus das a-Element wird der Link des href-Attributs aufgerufen. Diese Standardevents sind deaktivierbar.

Event Handler schreiben

JavaScript und HTML bieten mehrere Möglichkeiten an, einen Event Handler zu schreiben.

  • Mir einem HTML-Attribut
  • Als HTML DOM-Events in einem Element-Object
  • Mit der addEventListener()-Methode

Events mit einem HTML-Attribut

Ereignisse findet man als HTML-Attribute und beginnen mit den Buchstaben on (z.B. onclick). 

<button onclick="myFunction()">Klick mich!</button>

<script>
function myFunction() {
alert("Hallo Welt!");	
}
</script>

HTML DOM-Events

HTML DOM-Events werden nicht im HTML-Attribut, sondern als Eigenschaft im Element Object geschrieben. Der Event Handler in HTML DOM-Events ist in der Regel immer eine Funktion. Achtung auf die Schreibweise, einmal mit und einmal ohne Parameter. 

<button id="myBtn">Klick mich!</button>

<script>
document.getElementById("myBtn").onclick = function() {myFunction()};
// Alternative Schreibweise
document.getElementById("myBtn").onclick = myFunction;

function myFunction() {
alert("Hallo Welt!");	
}
</script>

HTML DOM-addEventListener

HTML DOM-addEventListener werden als Methode im element.Object geschrieben. Die HTML DOM-addEventListener Methode braucht eine etwas andere Syntax:

  • Im ersten Argument steht das Event ohne dem Präfix "on"
  • Im zweiten Argument steht der Handler, bei einer Funktion wird das Klammernpaar weggelassen
  • Es gibt noch ein drittes, optionales Argument useCapture (true oder false)
<button id="myBtn">Klick mich!</button>

<script>
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
alert("Hallo Welt!");	
}
</script>

Events mit einem HTML-Attribut

Events mit HTML-Attributen habe ich schon behandelt. An dieser Stelle noch einige Zusatzinformationen. Die älteste und schwächste Methode platziert den Event Handler als HTML-Attribut in das HTML-Dolument. Event Handler wie onclick und onsubmit lauschen im HTML-Markup auf Ereignisse und rufen einen Javascript-Befehl oder eine Javascript-Funktion auf. Vor- und Nachteile sind:

Beispiele von Event Handler mit einem HTML-Attribut

Event Handler mit einem HTML-Attribut können Anweisungen oder Funktionen sein. Im Beispiel wird beim Klicken eine Funktion aufgerufen und ausgeführt. 

<button onclick="myFunction()">Klick mich!</button>
<p id="myID"></p>

<script>
function myFunction() {
var x = document.getElementById("myID");
x.innerHTML = "Hallo Welt!";
}
</script>

Der Event Handler könnte jedoch auch so geschrieben werden: 

<button onclick='getElementById("myID").innerHTML = "Hallo Welt!"'>Klick mich!</button>
<p id="myID"></p>

Das Schlüsselwort this repräsentiert das owner-Object, in diesm Fall das p-Element. 

<p onclick='this.innerHTML = "Hallo Welt!"'>Klick mich!</p>

Windows- und Objekt-Events

Events können auch eintreten ohne einer expliziten User-Aktion, z.B. das Laden des HTML-Dokuments. Wenn sie das onload-Attribut im body-Tag schreiben, wird der Event Handler aktiviert, sobald das HTML-Dokument geladen ist. Das folgende Beispiel prüft, ob der Client Cookies zuläßt: 

<body onload="checkCookies()">
<p id="myID"></p>

<script>
function checkCookies() {
var text = "";

if (navigator.cookieEnabled == true) {
text = "Cookies sind aktiviert.";
} else {
text = "Cookies sind deaktiviert.";
}

document.getElementById("myID").innerHTML = text;
}
</script>

Das onload-Event wird ausgeführt, sobald das Element geladen ist, im Beispiel wird eine Meldung ausgegeben, wenn das Bild geladen wurde. 

<img src="dom.png" onload="loadImage()" width="180" height="120">
<p id="myID"></p>

<script>
function loadImage() {
document.getElementById("myID").innerHTML = "Bild wurde geladen";
}
</script>

Mehrere Events in einem Element

Es können auch mehrere Events geschrieben werden. Im Beispiel wird bei Mouseover das Bild geändert, bei Mouseout zum Ursprungsbild zurückgekehrt. 

<img src="dom.png" onmouseover="this.src='dom1.png'"
onmouseout="this.src='dom.png'" width="180" height="120">

HTML DOM-Events

Alle Events, die in HTML-Attributen zur Verfügung stehen, gibt es auch als DOM-Events. Zuerst wird das richtige HTML DOM-Object gefunden, anschließend das Event als Eigenschaft geschrieben und dann der Event Handler als Zuweisung. Vor- und Nachteile sind:

DOM-Object finden und Event Zuweisung

Im Beispiel wird mit einem Klick auf den zweiten Button die body-Hintregrundfarbe auf Blau geändert. Das Ereignis wird als HTML DOM-Event geschrieben. 

<body id="myID">
<button onclick="this.innerHTML='Falscher Button'">Klick mich!</button>
<button id="myBtn">Klick mich!</button>
<button onclick="this.innerHTML='Falscher Button'">Klick mich!</button>


<script>
document.getElementById("myBtn").onclick = myFunction;

function myFunction() {
  document.getElementById("myID").style.backgroundColor = "blue";
}
</script>
</body>

Das nächste Beipiel verwendet Funktionen mit Parameter, achten sie auf die alternative Schreibweise: 

<body id="myID">
<button class="color">Klick mich!</button>
<button class="color">Klick mich!</button>
<button class="color">Klick mich!</button>

<script>
var blue = "blue";
var red = "red";
var yellow = "yellow";

var x = document.getElementsByClassName("color");
x[0].onclick = function() {myFunction(blue)};
x[1].onclick = function() {myFunction(red)};
x[2].onclick = function() {myFunction(yellow)};
 
function myFunction(col) {
  document.getElementById("myID").style.backgroundColor = col;
}
</script>
</body>

DOM-Events deaktivieren

Im Gegensatz zu HTML Attribut-Events können DOM-Events deaktiviert werden. Die Syntax dafür lautet: 

element.event = null;

Im Beispiel wird der globalen Variable x ein Event Objekt zugewiesen. Die Funktion myFunction1 ändert den Wert der Variablen x insofern, sodass für den ersten Button, nach nur einen Aufruf, der Event Handler nicht mehr existiert (onclick = null). 

<body id="myID">
<button id="a">Klick mich!</button>
<button id="b">Klick mich!</button>
<button id="c">Klick mich!</button>

<script>
var x;
var y;
var z;

x = document.getElementById("a").onclick = myFunction1;
y = document.getElementById("b").onclick = myFunction2;
z = document.getElementById("c").onclick = myFunction3;

function myFunction1() {
  document.getElementById("myID").style.backgroundColor = "blue";
  x = document.getElementById("a").onclick = null;
}

function myFunction2() {
  document.getElementById("myID").style.backgroundColor = "red";
}

function myFunction3() {
  document.getElementById("myID").style.backgroundColor = "yellow";
}
</script>
</body>

AddEventListener

Event Handler mit der AddEventListener-Methode ist die modernste Art der Ereignissteuerung. AddEventListener fügt Event Handlers an ein Element dazu. ohen vorherige Event Handlers zu überschreiben. Nicht nur DOM-Objekte, auch Windows-Objekte können AddEventListener besitzen, jeder EventListener kann mit der RemoveEventListener-Methode wieder entfernt werden. Vor- und Nachteile sind:

Wenn Internet Explorer kleiner IE9 unterstützt werden muss, ist jQuery eine gute Alternative 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.

Die Syntax derAddEventListener-Methode

Natürlich braucht auch der EventListener ein Objekt, weiters müssen zwei Argumente notiert werden. Es gibt auch noch ein drittes, optionales Argument useCapture (true oder false). 

element.addEventListener(event, function, useCapture);

Der erste Parameter ist das Event selber. Es stehen alle HTML-Events zur Verfügung ohne dem Präfix "on". Zusätzlich gibt es noch Events vom Windows-Objekt. Der zweite Parameter ist der Event Handler (Funktion). Der dritte Parameter ist ein booleanischer Wert (true oder false) und definiert event-Bubbling (true) bzw. event Capturing (false). Der Parameter ist optional, der Standardwert ist false.

event-Bubbling und -Capturing

event-Bubbling und -Capturing definiert die Reihenfolge der Events bei verschachtelten HTML-Tags. Wenn z,B, ein div-Element aussen und ein p-Element innen liegt und beide Elemente haben ein click-Event, dann hat das innere Element obere Priorität und wird zuerst ausgeführt, das ist der Standard. 

<div id="myDiv">
<p id="myP">
Hallo Welt!
</p>
</div>

<script>
document.getElementById("myP").addEventListener("click", myFunction1, false);
// oder 
document.getElementById("myP").addEventListener("click", myFunction1);
document.getElementById("myDiv").addEventListener("click", myFunction2);
</script>

Bubbling steht für: Event Handler wird zuerst ausgeführt und anschließend der Vorfahre. Das wird mit dem Wert false definiert.

Capturing steht für: Zuerst wird der Event Handler von Vorfahren ausgeführt und anschließend der Event Handler des Elements. Das wird mit dem Wert true definiert. 

<div id="myDiv">
<p id="myP">
Hallo Welt!
</p>
</div>
document.getElementById("myP").addEventListener("click", myFunction1, true);
document.getElementById("myDiv").addEventListener("click", myFunction2);

addEventListener für ein Element

Für das aufrufen einer Funktion stehen zwei Optionen zur Verfügung´. Die Funktion kann im zweiten Parameter aufgerufen werden, oder direkt darin geschrieben werden. 

document.getElementById("myID").addEventListener("click", myFunction);

function myFunction() {
alert ("Hallo Welt!");
}

// oder

document.getElementById("myID").addEventListener("click", function(){ alert("Hallo Welt!"); });

addEventListener und Funktionen mit Parameter

Funktionen mit Parameter brauchen eine andere Syntax wie das Beispiel zeigt: 

document.getElementById("myID").addEventListener("click", function(){ myFunction(arg1, arg2); });

Mehhrere Event Handler für ein Element

Für jedes Element können viele Event Handlers geschrieben werden, sogar dasselbe Event kann mehrfach vorkommen. 

document.getElementById("myID")("click", myFunction1);
document.getElementById("myID")("click", myFunction2);

document.getElementById("a").addEventListener("mouseover", myFunction1);
document.getElementById("b").addEventListener("click", myFunction2);
document.getElementById("c").addEventListener("mouseout", myFunction3);

Einen EventListener entfernen

Wenn ein bestehender EventListener nicht mehr benötigt wird, kann er mit der removeEventListener-Methode entfernt werden. 

document.getElementById("myID").removeEventListener("click", myFunction);

Browser Support

Leider können ältere Internet Explorer mit AddEventListener nichts anfangen. Die alternative Methode dafür heisst attachEvent. 

var x = document.getElementById("MyID");
if (x.addEventListener) {                    // Für moderne Browser
x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // Für IE9 und älter
x.attachEvent("onclick", myFunction);
}

Event Handler für das windows-Object

Auch das windows-Object (das Browserfenster) kann Events abfangen. Windows-Events sind z.B. das Scrollen (scroll) oder das Vergrößern/ Verkleinern (resize) des Browserfenster. Mit dem Event windows.load wird ein Event Handler aufgerufen, wenn das Dokument vollständig mit allen Bildern und Plugins im Fenster geladen ist. 

window.addEventListener("load", myFunction1);
window.addEventListener("resize", myFunction2);
window.addEventListener("scroll", myFunction3);

Das DOM Event-Object

Nahezu alles in JavaSript ist auch ein Objekt. So auch jedes DOM-Event und wie alle Objekte, besitzt auch ein Event-Object Methoden und Eigenschaften. Im Beispiel wird mit der Eigenschaft target das auslösende Element des Events ermittelt, die Eigenschaft tagName gibt den HTML-Tag zurück. Die type-Eigenschaft liefert den Eventtype (click). Das Event wird standardmäßig mit dem Parameter e oder ev geschrieben. 

<button id="myBtn">Klick mich!</button>
<p id="myP"></p>


<script>
document.getElementById("myBtn").addEventListener("click", myFunction);

function myFunction(ev) { 
var x = ev.target.tagName;
var y = ev.type;
document.getElementById("myP").innerHTML = x + " und " + y;  // liefert BUTTON und click
}
</script>

Die PreventDefault-Methode

Einige HTML-Elemente können bei Ereignissen auch ohne Javascript Aktionen durchführen, wie z.B. Links mit dem a-Tag oder submit- und reset-Buttons. Mit der PreventDefault-Methode können solche Aktionen gestoppt werden, was bedeutet, dass die Standard-Aktion, die dem Ereignis gehört nicht auftritt. 

<a id="myA" href="http://www.adiprinz.at/">JavaScript mit Adi Prinz</a>
<p id="myP"></p>

<script>
document.getElementById("myA").addEventListener("click", myFunction);

function myFunction(ev) { 
ev.preventDefault()
document.getElementById("myP").innerHTML = "Der Link wird nicht ausgeführt!";
}
</script>

Referenzen

Die Liste des Event-Objects mit Event Handler, Methoden und Eigenschaften ist sehr umfangreich. Viele davon werden in den JavaScript-Tutorials vorkommen. An dieser Stelle noch einige Referenzen: