JavaScript Event Beispiel 1: Event-Handler für ein Event auf Ebene eines HTML-Elements

Im folgenden Beispiel wird zunächst ein Link definiert, der auf das aktuelle Dokument verweist. Direkt im HTML-Code wird auch das Event "onclick" mit einer Aktion belegt. In diesem Fall wird beim Auftreten des Events lediglich ein Dialogfenster mit Hilfe der Funktion window.alert() – diese Methode ist Bestandteil des JavaScript-Objekts Window – geöffnet. Diese Anweisung – hier könnte auch ein Anweisungsblock stehen – ist quasi der für das Event definierte Event-Handler.

Darauf folgt die Definition von drei HTML-Elementen, einem Eingabefeld und zwei SPAN-Tags. Das Eingabefeld wird später im Code mit einem Event-Handler belegt, während die beiden SPAN-Felder zur Ausgabe von Informationen verwendet werden sollen. Im JavaScript Code-Block dahinter werden dann die Funktionen definiert, die als Event-Handler fungieren sollen.

Die Funktion updateLength zeichnet sich, wie alle Event-Handler, durch den Parameter event aus, die eine Instanz des Event-Objekts enthält, in dem die Informationen des aufgetretenen Events gespeichert sind. Ermittelt werden zum Einen die maximale Länge des Eingabefeldes über die Eigenschaft maxLength des Input-Elements, und zum Anderen – über die Eigenschaft value – die Anzahl der Zeichen, die bereits im Eingabefeld stehen (mit Hilfe der Eigenschaft length aus String). Am Ende des Event-Handlers wird die Existenz des Ausgabeelements ("kommentar_free") per Methode document.getElementById() abgefragt. Existiert das Element, so wird die Anzahl der verbleibenden Zeichen und die maximale Anzahl der Zeichen, die im Eingabefeld Platz finden, ausgegeben.

Durch den Event-Handler showEventInfo sollen Informationen zum aufgetretenen Event ausgegeben werden. In dieser Funktion wird ein Info-String zusammengestellt, das wiederum im HTML-Element "event_info" ausgegeben wird.

Der letzte Abschnitt des Code-Beispiels verbindet die Events, die über die HTML-Elemente ausgelöst werden, mit den entsprechenden Event-Handlern. Ausgewählt wird das Element, für das die Events überwacht werden sollen, hier mit der Methode document.getElementsByName(), welche zum JavaScript-Objekt Document gehört – Eingabefelder müssen einen Namen tragen. Die Events, die für dieses Element überwacht werden sollen sind die Events "keyup" und "keydown". Auf der rechten Seite der Zuweisungen steht dabei der Name der Funktion, die künftig als Event-Handler aufgerufen werden soll. Nachdem die Zuweisungen der Event-Handler an die entsprechenden Events erfolgt sind, werden die ausgewählten Events überwacht und die Event-Handler automatisch bei Auslösen des jeweiligen Events aufgerufen.

<!-- Event "onclick" im HTML-Code direkt mit einer Aktion verbinden -->
<a onclick="alert ('Sie sollen doch nicht auf den Link Klicken!\nAber Sie werden schon sehen, was Sie davon haben...')" href="#" title="">Hier nicht Klicken!</a><br><br>

Eingabefeld: <input type="text" name="kommentar" maxlength="25" size="25" /><br>
Zeichen verf&uuml;gbar: <span id="kommentar_free">25/25</span><br>
Event-Informationen: <span id="event_info">-</span>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Event-Handler für Eingabe im Kommentarfeld
// Die Funktion wird beim Eintreten des entsprechenden Events
// automatisch ausgeführt, wenn sie als Event-Handler für das
// entsprechende Event definiert wurde.
function updateLength (event) {
  // Maximale Länge des Eingabefeldes ermitteln
  max = document.getElementsByName ('kommentar')[0].maxLength;
  // Anzahl der bisher eingegebenen Zeichen ermitteln
  len = document.getElementsByName ('kommentar')[0].value.length;
  // Wenn ein entsprechendes Ausgabefeld existiert
  if (document.getElementById ('kommentar_free')) {
    // Ausgabe der noch verfügbaren Zeichen und der maximalen
    // Anzahl der Zeichen für das Eingabefeld im SPAN-Tag ausgeben
    document.getElementById ('kommentar_free').firstChild.data = max - len + '/' + max;
  }
}

// Funktion soll als Event-Handler für das Event "keydown" dienen.
// Es werden Event-Informationen zum aufgetretenen Event ausgegeben.
function showEventInfo (event) {
  // Zeichenkette mit den entsprechenden Informationen
  // zusammenstellen
  info = // Typ des Events ausgeben (hier immer keydown, da der
         // Event-Handler nur für dieses Event zugewiesen wird
         'Typ=' + event.type +
         // Tastencode der gedrückten Taste
         '; Tastencode=' + (event.which ? event.which : event.keyCode);
  // Ausgabe des Infostrings im dafür vorgesehenen SPAN-Tag
  document.getElementById ('event_info').firstChild.data = info;
}

// Event "onkeyup" für das Element mit der ID "kommentar" überwachen
// Dazu wird dem Element ein Event-Handler in Form der Funktion
// updateLength zugewiesen.
// In diesem Fall wird der Event-Handler dem HTML-Element mit der
// ID "kommentar" zugewiesen. Er wird nur beim Loslassen einer
// zuvor gedrückten Taste in diesem Element ausgeführt.
document.getElementsByName ('kommentar')[0].onkeyup = updateLength;

// Event-Handler für das Event "keydown" zuweisen (ebenfalls für das
// HTML-Element mit der ID "kommentar")
document.getElementsByName ('kommentar')[0].onkeydown = showEventInfo;
// -->
</script>

Hier nicht Klicken!

Eingabefeld:
Zeichen verfügbar: 25/25
Event-Informationen: -

Letzte Posts aus unserem Forum

Script Schrift vergrößern

Hallo wollte gerade das Script für die Schriftvergrößerung testen, aber irgendwie bekomme ich das nicht hin. Habe eine Joomla Website und dort die ... » mehr

von Gast am Donnerstag, 22. April 2010 13:32 in JavaScript - bisher 1 Antwort
Letzter Beitrag: Donnerstag, 22. April 2010 18:05 von alm

Hallo, damit kann man nicht allzu viel anfangen. Soviel ich weiss kann es zuweilen Probleme mit Tabellen-Layouts geben. Dort werden die ... » mehr

Javascript Schriftengröße: Problem bei URL-Übergabe im IE8

Hallo, ich hab eben das Javascript zur Schriftengröße eingebaut, klappt auch wunderbar auf Firefox, aber der IE 8 hat folgendes Problem: - wenn ich ... » mehr

von horst1234 am Dienstag, 23. Februar 2010 13:06 in JavaScript - bisher 1 Antwort
Letzter Beitrag: Dienstag, 23. Februar 2010 14:07 von horst1234

Ich hab das charset im Header geändert (wie in der beispiel.html), und schon klappt es ... » mehr

Dynamisches einfügen von Zeilen in eine Spalte

Hallo, ich möchte gerne eine Zeile zwischen zwei andere Zeilen einfügen. Leider klappt folgender Versuch noch nicht so richtig. Vielleicht kann mir ... » mehr

von Bluecaspar am Mittwoch, 10. Februar 2010 18:09 in JavaScript - bisher 2 Antworten
Letzter Beitrag: Donnerstag, 11. Februar 2010 10:37 von Bluecaspar

Ja genau, das war der Fehler. Vielen Dank Alex. Hier der korrigierte Code: <html> <head> <title> Test ... » mehr

Fenster in Frame erzeugen

Hallo, ich würde gerne ein Fenster in einer Webseite erzeugen. Das Fenster sollte dabei auf ein Frame begrenzt sein, sich also nicht aus diesen ... » mehr

von Bluecaspar am Dienstag, 9. Februar 2010 13:57 in JavaScript - bisher 2 Antworten
Letzter Beitrag: Mittwoch, 10. Februar 2010 09:32 von Bluecaspar

Ja hervorragend, dass ist genau das was ich möchte. Danke ... » mehr

Problem: Kombination mit Lightbox 2

Hallo, ich bin gerade dabei die Galerie mit der Lightbox 2 zu verknüpfen, da ich die Bilder im Vollformat gerne in diesem schicken aufpoppenden ... » mehr

von GoPeter am Montag, 16. November 2009 23:38 in JavaScript - bisher 16 Antworten
Letzter Beitrag: Mittwoch, 18. November 2009 00:32 von GoPeter

Soo...hat lange gedauert...aber jetzt ist es endlich ... » mehr



¬ Insolvenzrecht