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

Probleme mit iphone

Hallo, ich habe ein Problem bei der Darstellung einer Webseite. In allen Browsern hat das bisher bestens funktioniert außer beim iPhone und iPad, wo ... » mehr

von Finlay am Dienstag, 10. Juli 2012 19:45 in JavaScript - noch nicht beantwortet

Stream musik

Hallo, ich bin auf der Suche nach einem Script, mit dem ich einen Leser für Audio-Spuren in eine Html-Webseite einfügen kann. Ich brauche dabei ... » mehr

von Finlay am Sonntag, 22. Januar 2012 22:52 in JavaScript - bisher 2 Antworten
Letzter Beitrag: Dienstag, 8. Mai 2012 16:04 von maharadja

ich habe das mal mit jplayer probiert und bei mir gings ... » mehr

Byte Array PDF im Browser anzeigen

Hallo, ich bekomme von einem Webservice ein PDF als Byte Array. Mit einem JsonP Request habe ich das Byte Array so wie es ist (als Array von Bytes) ... » mehr

von TiloS am Mittwoch, 11. April 2012 17:37 in JavaScript - noch nicht beantwortet

Überbelnd effect in javascript gallerie

ich habe hier einie gallerie die funktioniert problem los aber hat noch kein über belnd effect jedoch würde ich diesen gerne einfügen aber ich habe ... » mehr

von faebe am Freitag, 20. Januar 2012 20:19 in JavaScript - noch nicht beantwortet

XML per JavaScript verarbeiten - IE

Hallo! Vielen Dank für das super kommentierte Script-Beispiel zur Weiterverarbeitung von XML-Dateien per JavaScript: ... » mehr

von gn0me am Freitag, 11. März 2011 19:03 in JavaScript - noch nicht beantwortet


¬ Insolvenzrecht