| Weitere Artikel aus dem Webentwickler Blog |
| Teilen |  |
 |
 |
Für die richtige Arbeit mit Dynamic HTML (DHTML) ist der Umgang mit Ereignissen von entscheidender Bedeutung – insbesondere, da die aktuellen Browser bei der Ereignisbehandlung zum Teil starke Unterschiede aufweisen.
Ereignisse beim Internet ExplorerDer Internet Explorer macht es dem Programmierer relativ einfach: Alle Informationen, die ein Ereignis betreffen, werden global im Objekt window.event in den jeweiligen Eigenschaften gespeichert, auf das jederzeit und von überall aus zugegriffen werden kann. Interessant sind hier insbesondere die Eigenschaften srcElement (gibt das Element an, welches das Ereignis ausgelöst hat), offsetX und offsetY (Koordinaten, an denen das Ereignis ausgelöst wurde) oder keyCode (ASCII-Wert der gedrückten Taste). Beispiel: <div style="position:absolute;" id="lay1">Ich folge der Maus!</div> <script language="JavaScript"> <!-- document.onmousemove = verschiebe; function verschiebe() { a = document.getElementById('lay1'); a.style.left = (parseInt(window.event.offsetX)+20)+'px'; a.style.top = (parseInt(window.event.offsetY)+20)+'px'; } //--> </script> Ereignisse bei Firefox, Opera & Co.
Im Gegensatz zum Internet Explorer handhaben quasi alle anderen Browser die Behandlung von Ereignissen ohne ein window.event-Objekt. Hier wird stattdessen automatisch ein eigenes Ereignisobjekt an die Funktion übergeben, die das Ereignis behandelt. Nachteil des Ganzen: Es funktioniert nur bei Ereignissen, die innerhalb von JavaScript definiert wurden – bei HTML-Ereignissen klappt es nicht. Zudem heißen hier die Eigenschaften teils ein wenig anders. Statt srcElement schreibt man beispielsweise target, keyCode heißt hier which, und statt offsetX und offsetY verwendet man pageX und pageY. Das gleiche Beispiel wie oben müsste für alle anderen Browser also so aussehen: <div style="position:absolute;" id="lay1">Ich folge der Maus!</div> <script language="JavaScript"> <!-- document.onmousemove = verschiebe; function verschiebe(e) { a = document.getElementById('lay1'); a.style.left = (parseInt(e.pageX)+20)+'px'; a.style.top = (parseInt(e.pageY)+20)+'px'; } //--> </script> Einheitliche Ereignisbehandlung
Will man nicht jedes Mal erst prüfen, um welchen Browser es sich handelt, empfiehlt es sich, die Ereignisbehandlung zu vereinheitlichen. Hierzu werden einfach dem Ereignisobjekt diejenigen Eigenschaften hinzugefügt, die ihm aufgrund des verwendeten Browsers noch fehlen. Das folgende Beispiel entspricht wiederum den beiden Vorgängern, nur eben jetzt mit der Unterstützung für alle Browser: <div style="position:absolute;" id="lay1">Ich folge der Maus!</div> <script language="JavaScript"> <!-- function normalizeEvent(e) { if(window.event){e = window.event;} if(e.pageX) { e.offsetX = e.pageX; e.offsetY = e.pageY; } else if(e.offsetX) { e.pageX = e.offsetX; e.pageY = e.offsetY; } if(e.target){e.srcElement = e.target;} else if(e.srcElement){e.target = e.srcElement;} //usw. return e; } document.onmousemove = verschiebe; function verschiebe(e) { e = normalizeEvent(e); a = document.getElementById('lay1'); a.style.left = (parseInt(e.pageX)+20)+'px'; a.style.top = (parseInt(e.pageY)+20)+'px'; } //--> </script> Dieser Abschnitt ist dem Buch "JavaScript und Ajax" von Jan Winkler entnommen, das 2009 im Franzis Verlag erschienen ist.
Jan Winkler
Lernen Sie die ganze Vielfalt vom Franzis Buch- und Softwareverlag kennen
