Websiteentwicklung: JavaScript: Event Handling
Was ist Event-Handling?
[Bearbeiten]HTML-Dokumente, die mit JavaScript dynamisiert sind, bieten dem Benutzer eine Vielzahl von Handlungsmöglichkeiten. Er kann z.B. Schalter anklicken, den Mauszeiger über eine Grafik führen oder ein Formular abschicken. Solche Handlungen des Benutzers werden im JavaScript-Jargon als „Events“ (von engl. event = „Ereignis“) bezeichnet. Events haben immer einen Zweck, sie sollen bestimmte Konsequenzen herbeiführen. Technisch ausgedrückt: sie sollen dazu führen, dass eine bestimmte Portion JavaScript-Code ausgeführt wird. Das Anklicken des Schalters könnte z.B. eine mathematische Berechnung starten, beim Berühren der Grafik mit dem Mauszeiger könnte diese Grafik gegen eine andere ausgetauscht werden, und das Abschicken des Formulars könnte zum Aufruf einer neuen Seite führen, die den Text „Danke für Ihre Bestellung“ enthält.
Um ein Event mit einer bestimmten Portion JavaScript-Code zu verknüpfen, braucht man ein kleines Bindeglied, das im JavaScript-Jargon als „Event-Handler“ (engl. für „Ereignis-Steuerungsprogramm“) bezeichnet wird. In diesem Kapitel können Sie lernen, wie Event-Handler geschrieben werden.
Was für Event-Handler gibt es?
[Bearbeiten]Für jedes Event ist in JavaScript ein spezieller Event-Handler vorgesehen. Hier eine Übersicht:[1]
Event-Handler für Maus-Aktionen
[Bearbeiten]- onclick ‒ Mausklick (auf ein Element)
- ondblclick ‒ doppelter Mausklick
- onmousedown ‒ Mausschalter wird gedrückt
- onmousemove ‒ Maus wird bewegt
- onmouseout ‒ Mauszeiger wird aus einem Element herausbewegt
- onmouseover ‒ Mauszeiger berührt ein Element
- onmouseup ‒ (der zunächst gedrückte) Mausschalter wird losgelassen
Event-Handler für Tastatur-Aktionen
[Bearbeiten]- onkeydown ‒ eine Taste wird gedrückt
- onkeypress ‒ eine Taste wird gedrückt und festgehalten
- onkeyup ‒ eine (zunächst gedrückte) Taste wird losgelassen
Event-Handler für Formulare und Formular-Elemente
[Bearbeiten]- onblur ‒ ein Element verliert den Fokus
- onchange ‒ der Inhalt eines Formularelements wird verändert
- onfocus ‒ ein Element gelangt in den Fokus
- onreset ‒ Formular wird mit reset in den Ausgangszustand zurückgesetzt
- onselect ‒ ein Element wird ausgewählt/markiert
- onsubmit ‒ Formular wird mit submit abgeschickt
Siehe auch: Dynamisierung von Formularen
Event-Handler für Dokument- und Bild-Aktionen
[Bearbeiten]- onabort ‒ Laden eines Bildes wird abgebrochen
- onerror ‒ Fehler beim Laden eines Dokuments oder eines Bildes
- onload ‒ Dokument wird geladen
- onunload ‒ Dokument wird geschlossen
Event-Handler für Fenster- und Frame-Aktionen
[Bearbeiten]- onresize ‒ Fenster oder Frame wird in der Größe verändert
Wie schreibt man Event-Handler und wo gehören sie hin?
[Bearbeiten]Wo man einen Event-Handler am besten platziert, hängt u.a. davon ab, wie umfangreich und kompliziert das Skript ist, das mit dem Event verknüpft werden soll. Oft ist es am bequemsten, den Event-Handler als Attribut in den Tags des HTML-Elements unterzubringen, dem es zugeordnet werden soll. Das Skript selbst platziert man, wenn es sehr klein ist, an Ort und Stelle; wenn es etwas größer ist, formuliert man es als Funktion, die (natürlich in script-Tags) innerhalb der head-Tags des HTML definiert wird.
Die einfachste Möglichkeit ist, die gewünschte Aktion direkt als Attribut des HTML-Tags zu definieren:
<input type="button" value="Drück mich nicht" onclick="alert('Du solltest mich doch nicht drücken!');" />
Wenn man mit Funktionen arbeiten möchte, muss der Funktionsname angegeben werden und die Funktion im HEAD definiert werden, damit diese schon geladen ist, wenn sie aufgerufen werden soll:
<html>
<head>
<nowiki><!-- ... --></nowiki>
<script type="text/javascript">
function meineFunktion() { alert("Du hast ein neues Dokument geladen."); }
</script>
</head>
<body onload="meineFunktion()">
<nowiki><!-- ... --></nowiki>
</body>
</html>
Je größer und anspruchsvoller die Skripts werden, umso zweckmäßiger wird es, das JavaScript möglichst scharf vom HTML zu trennen und in einer eigenen JS-Datei unterzubringen. In diesem Fall werden Event-Handler nicht als HTML-Attribute gefasst, sondern ins Skript aufgenommen, und die Portion JavaScript-Code, die mit dem Event verknüpft werden soll, muss als Funktion definiert werden:
document.getElementById("meinElement").onclick = meineFunktion;
Wichtig: Im Event-Handler wird der Name der Funktion grundsätzlich ohne Klammern geschrieben; die Funktion wird an dieser Stelle ja nicht aufgerufen, sondern zugewiesen. (In der Definition der Funktion dagegen müssen die Klammern selbstverständlich verwendet werden.)
Exkurs: Event-Handler mit Parameter-Übergabe
[Bearbeiten]Das Folgende ist nur für Fortgeschrittene von Interesse. Wenn in einem Programm eine Vielzahl von Event-Handlern benötigt wird (z.B. für eine umfangreiche Kollektion von Schaltern), die alle jedoch fast denselben Code aufrufen sollen, kann man diese Event-Handler bei Bedarf alle auf dieselbe Funktion verweisen, aber einen Parameter übergeben. In diesem Fall wird der Event-Handler nach folgendem Muster aufgebaut:
document.getElementById('meinObjekt').onEreignis = function() {meineFunktion(meinParameter);};
Die Methode „addEventListener()“
[Bearbeiten]Ab DOM 2 ist es möglich Ereignisse auch mit der Methode „addEventListener()“ zu überwachen. Die hat den Vorteil, dass mehrere Aktionen für ein Ereignis definieren kann. Außerdem können bei diesem Verfahren Ereignisse nicht nur HTML-Elementen, sondern allen DOM-Elementen zugeordnet werden. Die Syntax für die Methode lautet:
document.getElementById('meinObjekt').addEventListener("event", meineFunktion, capturing);
Der Parameter "event" ist hierbei das Ereignis, welches die Aktion auslöst (allerdings ohne "on"!). Für "capturing" (Eventvererbung) sollte im Normalfall false (für Target- oder Bubbling-Phase) angegeben werden. Alternativ wäre auch true für die Capture-Phase möglich. Dies ist jedoch nur in Spezialfällen relevant. Weitere Informationen zur Vererbung von Events finden sich bei Selfhtml.
Zusammenfassung: alle 3 Methoden in einem Skript
[Bearbeiten]Die folgende Webseite soll die verschiedenen Möglichkeiten des Event-Handlings verdeutlichen:
<html>
<head>
<title>Event Handling</title>
<script type="text/javascript">
function initialisieren() {
var infodiv = document.getElementById("info");
infodiv.onmouseover = ButtonMouseOver;
if(infodiv != null && infodiv.addEventListener) {
infodiv.addEventListener("click", ButtonClicked, false);
infodiv.addEventListener('mouseout',
function(){
infodiv.innerHTML = "Mouseout!";
}, false);
}else{
alert("Fehler!");
}
}
function ButtonMouseOver(){ document.getElementById("info").innerHTML = "Mouseover!"; }
function ButtonClicked(){ document.getElementById("info").innerHTML = "Es wurde geklickt!";}
</script>
</head>
<body onload="initialisieren()">
<div id="info" style="width:300px; height:200px; background-color:#EEEEEE;">Noch kein Event ausgelöst...</div>
</body>
</html>
Aufgaben + Lösungen
[Bearbeiten]
- ↑ www.w3schools.com Standard Event Attributes