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: -

« zurück zu Seite 1 weiter zu Seite 3 4 »