Newsletter

  • Immer informiert über die neusten Trends, Webseiten und Tutorials! Einfach hier für den monatlichen Newsletter anmelden.
  •  Eintragen
  •  Austragen

Login

Umfrage

  • Bloggt Ihr?
  •  
  • ja
  • nein
  • bloggen?
  •  

BlackBeats

BlackBeats.fm Stream
- ONAIR -
Hip Hop Musik vom feinsten

Blackbeats FM

Linktipps

» Startseite » HTML, CSS und JavaScript Tutorials

JavaScript: EventHandler und das event-Objekt

 
Eventhandler, was man damit machen kann und wie die Syntax aussieht, das erfahrt ihr hier.



Events (Ereignisse) sind etwas sehr wichtiges. Z.B. wird ein Ereignis ausgelöst, wenn man einen Schalter anklickt oder auch nur den Mauszeiger bewegt. Dieses Ereignis wird von dem Betriebssystem an den Browser weitergegeben. In JavaScript kann man solche Ereignisse abfangen und verarbeiten. Nur so kann eine Aktion ausgelöst werden, wenn z.B. ein Button gedrückt wird.
Event-Handler (also die Sprachelemente JavaScripts, die solche Events abfangen) beginnen in JavaScript immer mit "on" Beispiele:

onClick
onBlur


Da solche Ereignisse mittlerweile sehr oft in reinem HTML gebraucht werden, wurden sie auch in den Sprachumfang von demselben aufgenommen und das W3C hat festgelegt, welche Tags solche Event-Handler als Attribute aufnehmen dürfen. Beispiele:

  1.  <textarea rows="Zeilenanzahl" cols="Spaltenanzahl" onchange="Code, der ausgelöst werden soll, wenn <textarea> einen anderen Wert erhält">


Im folgenden eine Tabelle mit allen (uns bekannten) Event-Handlern, ihrer Bedeutung und in welchen HTML-Tags sie genutzt werden dürfen.

Event: Bedeutung: HTML-Tags:
onAbort Ist dazu gedacht, dass etwas gemacht wird, wenn der Besucher einer Site vorzeitig deren Aufbau unterbricht und manche Bilder nicht geladen werden können <img> (Netscape)
onBlur Für den Fall, das der Anwender ein zuvor aktiviertes Element verlässt (es verliert den Fokus) <a>, <area>, <button>, <input>, <label>, <select>, <textarea>(HTML 4.0)
<body>, <frameset>, <input>, <layer>, <select>, <textarea>(Netscape)
onChange Für den Fall, das der Wert eines Elements geändert wurde <input>, <select>, <textarea> (Netscape und HTML 4.0)
onClick Für den Fall, das etwas einmal angeklickt wird <a> <area>, <input>, <textarea>(Netscape)
<a>, <abbr>, <acronym>, <address>, <area>, <b>, <big>, <blockquote>, <body>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hr>, <i>, <img>, <input>, <ins>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <menu>, <noframes>, <noscript>, <object>, <ol>, <optgroup>, <option>, <p>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <u>, <ul>, <var>(HTML 4.0)
onDblClick Für den Fall, dass etwas doppelt angeklickt wird s. onClick
onError Tut irgendetwas (natürlich vom Programmierer gewolltes), wenn ein Fehler beim Erzeugen eines Bildes aufgetreten ist <img>(Netscape)
onFocus Für den Fall, dass ein Element den Fokus erhält(das markierte Element hat den Fokus) <body>, <frame>, <input>, <layer>, <select>, <textarea> (Netscape)
<a>, <area>, <button>, <input>, <label>, <select>, <textarea>(HTML 4.0)
onKeydown Tritt auf, wenn ein Benutzer bei aktiviertem Element eine Taste drückt <input>, <textarea> (Netscape)
s. onClick (HTML 4.0)
onKeypress Tritt ein, wenn der User eine Taste drückt und gedrückt hält s. onKeydown
onKeyup Tritt auf, wenn eine Taste losgelassen wird s. onKeydown
onLoad Tritt auf, wenn eine HTML-Datei geladen wird <frameset>, <body> (Netscape und HTML 4.0)
onMousedown Tritt auf, wenn Maustaste gedrückt wird <input type="button">, <a> (Netscape)
s. onClick (HTML 4.0)
onMousemove Tritt auf, wenn Maustaste bewegt wird nur in Zusammenhang mit event-Objekt (Netscape)
s. onClick (HTML 4.0)
onMouseout Tritt auf, wenn beim Bewegen des Mauszeigers ein Element verlassen wird <a>, <area> (Netscape)
s. onClick (HTML 4.0)
onMouseover Tritt auf, wenn ein Element überfahren wird (mit der Maus, nicht mit dem Auto;-) ) s. onMousout
onMouseup Tritt auf, wenn die Maustaste losgelassen wird s. onMousedown
onReset Tritt auf, wenn der Anwender Eingaben in einem Formular verwirft <form> (Netscape)
onSelect Tritt auf, wenn Text selektiert wird <input>, <textarea> (Netscape)
onSubmit Tritt auf, wenn ein Formular abgesendet wird <form (Netscape)
onUnload Tritt auf, wenn ein HTML-Dokument verlassen wird <frameset>, <body> (Netscape)


Achtung! Der Netscape Navigator 4.x erlaubt diese Event-Handler oft nur für weniger HTML-Tags und andere Browser fabrizieren Fehler bei manchen dieser Event-Handler. Für genauere Informationen kann man in SelfHTML o. Ä. unter Event-Handler nachgucken.

Zusätzlich gibt es noch einen Parameter, den man bei Verweisen angeben kann: javascript:. Es ist genau genommen gar kein Event-Handler, sondern eine Syntax, die eingeführt wurde, um auch Verweise auf JavaScript-Code fabrizieren zu können. Dazu muss man dem Parameter href in Anführungszeichen das oben gezeigte Gebilde übergeben. Hinter den Doppelpunkt kann man dann ganz normalen JavaScript-Code eingeben. Ein Beispiel, das das Datum der letzten Modifikation an dem HTML-Dokument ausgibt:

  1.  <html>
  2.  <head>
  3.  <title>Letzte Modifikation</title>
  4.  </head> 
  5.  <body> 
  6.  <a href="javascript:document.write(document.lastModified)">Letztes Update</a> 
  7.  </body>
  8.  </html>


Wenn man dabei mehrere Anweisungen ausführen will, sollte man diese in eine Funktion schreiben und dann diese aufrufen.

Das event-Objekt in JavaScript

Mit dem event-Objekt kann man genaue Werte z.B. über die Position des Mauszeigers ermittlen. Außerdem ist es möglich, auch auf bestimmte Tasten zu reagieren. Folgende Tabelle enthält die Methoden von event:

Methode: Bedeutung:
altKey, ctrlKey, shiftKey (Microsoft-Syntax) Speichert, ob Zusatztasten gemeinsam mit einer Anderen (auch Maus) gedrückt sind (Alt-Taste, Strg-Taste, Shift-Taste)
clientX, clientY (Microsoft-Syntax) Speichert horizontale (clientX) und vertikale (clientY) Cursorpositionen);linke obere Ecke Punkt 0|0
keyCode (Microsoft-Syntax) Speichert ASCII-Code der aktuellen Taste
layerX, layerY (Netscape-Syntax) Speichert aktuelle Breite (layerX) und Höhe (layerY) eines Objekts, wenn bei onResize überwacht wird, sonst die Cursorpositionen ,wobei linke obere Layer-Position 0|0 (Netscape 6.1 speichert in beiden Variablen nur 0!!)
modifiers (Netscape) Speichert, ob Zusatztasten zusammen mit anderer Taste (auch Maus) gedrückt wurden
offsetX, offsetY (Microsoft) Speichert die Cursorposition in einem Element, das ein Ereignis auszulösen hat
pageX, pageY (Netscape) aktuelle Cursorposition im Dokument
screenX, screenY (Netscape) Speichert Cursorposition, beginnt nicht links oben 0|0, sondern benutzt Bildschirmauflösung
which (Netscape) Speichert ASCII-Code bei Zeichen;Maustaste bei Maus
type (Netscape) Speichert, welches Ereignis aufgetreten ist, aber ohne Präfix (on)
x, y (Microsoft) Speichert Cursor-Koordinaten relativ zum Elternfenster (z.B. das Formular, auf dem ein Button angeordnet ist)


Hier gibt es mal wieder ein Beispiel, das direkt aus SelfHTML geklaut ist. Das Beispiel zeigt aber trotzdem schön, dass man beim event-Objekt für die beiden verschiedenen Browser ganz unterschiedliche Syntaxen braucht und deshalb zwei Teile dafür schreiben muss. Andere Browser sind dabei noch nicht einmal berücksichtigt.

  1.  <html>
  2.  <head>
  3.  <title>Test</title>
  4.  <script type="text/javascript">
  5.  <!--
  6.  var Netscape = new Boolean();
  7.  if(navigator.appName == "Netscape") Netscape = true;
  8.  function TasteGedrueckt(Ereignis)
  9.  {
  10.  if(Netscape)
  11.  { window.status = "Taste mit Dezimalwert " + Ereignis.which + " gedrueckt"; return true; }
  12.  }
  13.  function TasteLosgelassen(Ereignis)
  14.  {
  15.  if(Netscape)
  16.  { window.status = "Taste mit Dezimalwert " + Ereignis.which + " losgelassen"; return true; }
  17.  }
  18.  document.onkeydown = TasteGedrueckt;
  19.  document.onkeyup = TasteLosgelassen;
  20.  //-->
  21.  </script>
  22.  <!-- JScript-Bereiche für MS Internet Explorer -->
  23.  <script for="document" event="onkeydown()" type="text/jscript">
  24.  <!--
  25.  { window.status = "Taste mit Dezimalwert " + window.event.keyCode + " gedrueckt"; return true; }
  26.  //-->
  27.  </script>
  28.  <script for="document" event="onkeyup()" type="text/jscript">
  29.  <!--
  30.  { window.status = "Taste mit Dezimalwert " + window.event.keyCode + " losgelassen"; return true; }
  31.  //-->
  32.  </script>
  33.  </head>
  34.  </body>


Erläuterung des Quellcodes:

Der Quellcode reagiert auf einen Tastendruck in das leere HTML-Dokument und schreibt deren ASCII-Code und ob die Taste gedrückt oder ob sie losgelassen wurde in die Statuszeile des Browsers. Dazu muss das Dokument den Fokus haben (einfach anklicken). Der erste Bereich des Codes soll nur von Netscape-Browsern, die schon JavaScript 1.2 können, ausgeführt werden, weshalb immer nach dem Browser gefragt werden muss (der Internet Explorer würde das ja auch interpretieren, aber Fehler verursachen). Die beiden letzten Teile werden nur vom Internet Explorer ausgeführt, da nur er die Sprache JScript kann. In beiden Teilen werden die Funktionen TasteGedrückt und TasteLosgelassen deklariert, die ihrem Namen nach arbeiten. In der Funktion TasteGedrückt wird der ASCII-Code und dass die Taste gedrückt wurde ausgegeben, in TasteLosgelassen wird ebenfalls der ASCII-Code ausgegeben, und zusätzlich, dass die Taste losgelassen wurde.


Fragen? Probleme? Keine Antworten? Hilfe finden Sie im Webmaster Forum!
Diese Artikel könnten Sie auch interessieren:
XHTML - Textauszeichnungen
XHTML - HTML allgemein
monatlich wechselnder Link mit JavaScript
Wie baue ich CSS ein