File: event.htm

package info (click to toggle)
selfhtml 8.1.2-1
links: PTS
area: non-free
in suites: bullseye, buster, jessie, jessie-kfreebsd, squeeze, stretch, wheezy
size: 28,076 kB
ctags: 4,161
sloc: xml: 614; java: 375; makefile: 8
file content (700 lines) | stat: -rw-r--r-- 55,657 bytes
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>SELFHTML: JavaScript / Objektreferenz / event</title>
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
<meta name="description"    content="Welche Aufgaben, Eigenschaften und Methoden das event-Objekt in JavaScript hat.">
<meta name="keywords"       content="SELFHTML, JavaScript, Objekte, event, altKey, ctrlKey, shiftKey, clientX, clientY, keyCode, layerX, layerY, modifiers, offsetX, offsetY, pageX, pageY, screenX, screenY, which, type, x,y">
<meta name="author"         content="Redaktion SELFHTML, selfhtml81@selfhtml.org">
<meta name="robots"         content="noindex, nofollow">
<meta name="DC.Publisher"   content="SELFHTML e. V.">
<meta name="DC.Date"        content="2005-11-16T00:32:37+01:00">
<meta name="DC.Identifier"  content="http://de.selfhtml.org/javascript/objekte/event.htm">
<meta name="DC.Language"    content="de">
<meta name="DC.Rights"      content="../../editorial/copyright.htm">
<meta name="DC.Date.created" content="2001-10-27T08:00+01:00">
<meta name="SELF.Pagetype"  content="page">
<link rel="alternate" type="application/atom+xml" title="SELFHTML-Weblog (Atom, gesamt)" href="http://aktuell.de.selfhtml.org/weblog/atom-feed">
<link rel="alternate" type="application/rss+xml" title="SELFHTML-Weblog (RSS, Auszge)" href="http://aktuell.de.selfhtml.org/weblog/rss-feed">
<link rel="shortcut icon" type="image/x-icon" href="../../src/favicon.ico">
<link rel="author" title="Impressum" href="../../editorial/impressum.htm">
<link rel="contents" title="Inhaltsverzeichnis" href="../../navigation/inhalt.htm">
<link rel="index" title="Stichwortverzeichnis" href="../../navigation/stichwort.htm">
<link rel="search" title="Suche" href="../../navigation/suche/index.htm">
<link rel="help" title="Hilfe" href="../../editorial/index.htm">
<link rel="copyright" title="Urheberrecht" href="../../editorial/copyright.htm">
<link rel="top" title="SELFHTML" href="../../index.htm">
<link rel="up" title="Objektreferenz" href="index.htm">
<link rel="next" title="history" href="history.htm">
<link rel="prev" title="links" href="links.htm">
<link rel="first" title="Hinweise zur JavaScript-Objektreferenz" href="hinweise.htm">
<link rel="last" title="Objektunabhngige Funktionen" href="unabhaengig.htm">
</head>
<body>

<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr>
<td colspan="2" class="nav"><a class="an" name="top"><img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"></a> <a href="../../index.htm">SELFHTML</a>/<a href="../../navigation/index.htm" target="_parent" class="navh">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von">&nbsp;<a href="../index.htm">JavaScript/DOM</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von">&nbsp;<a href="index.htm">Objektreferenz</a></td>
</tr>
<tr>
<td class="doc" width="110"><a href="../../index.htm"><img src="../../src/logo.gif" width="106" height="109" border="0" alt="SELFHTML"></a></td>
<td class="docbot" width="100%"><h1 class="ph1">event</h1></td>
</tr>
<tr>
<td class="doctop">
<img src="../../src/dokx.gif" width="30" height="20" vspace="6" alt="Informationsseite">
</td>
<td valign="top" nowrap="nowrap">
<p><img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#allgemeines">event: Allgemeines zur Verwendung</a><br>
</p>

<h3>Eigenschaften:</h3>

<p>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#alt_ctrl_shift_key">altKey, ctrlKey, shiftKey</a> (Sondertasten, Microsoft)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#button">button</a> (Maustastencode, Microsoft)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#client_x_y">clientX, clientY</a> (Anzeigebereich-relative Mauszeiger-Position, Microsoft)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#key_code">keyCode</a> (Tastaturcode, Microsoft)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#layer_x_y">layerX, layerY</a> (Layer-relative Mauszeiger-Position, Netscape)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#modifiers">modifiers</a> (Sondertasten, Netscape)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#offset_x_y">offsetX, offsetY</a> (Objekt-relative Mauszeiger-Position, Microsoft)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#page_x_y">pageX, pageY</a> (Dokument-relative Koordinaten, Netscape)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#screen_x_y">screenX, screenY</a> (Bildschirm-relative Mauszeiger-Position, Netscape)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#which">which</a> (Tastatur-/Maustastencode, Netscape)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#type">type</a> (Art des Ereignisses, Netscape)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#x_y">x,y</a> (Elternelement-relative Mauszeiger-Position, Microsoft)<br>
</p>
</td>
</tr><tr><td colspan="2" class="doc">&nbsp;<a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a>&nbsp;</td></tr>
</table>



<h2><a class="an" name="allgemeines">event: Allgemeines zur Verwendung</a></h2>

<p>Mit dem Objekt <code>event</code> knnen Sie Einzelinformationen zu Anwenderereignissen wie Mausklicks oder Tasteneingaben ermitteln und weiterverarbeiten. So knnen Sie bei einem Mausklick beispielsweise die genaue Position ermitteln, wo der Mausklick erfolgte, oder bei einem Tastendruck die gedrckte Taste abfragen.</p>

<p>Anwenderereignisse knnen Sie entweder berwachen, indem Sie in einem erlaubten HTML-Tag einen <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="../sprache/eventhandler.htm">Event-Handler</a> notieren, oder, indem Sie direkt mit Hilfe von JavaScript eine Ereignisberwachung programmieren. Fr den Fall, dass das berwachte Ereignis eintritt, knnen Sie eine Handler-Funktion schreiben, die das Ereignis "behandelt", also verarbeitet. Die Handler-Funktion wird automatisch aufgerufen, wenn das Ereignis eintritt. Innerhalb einer Handler-Funktion besteht auch die Mglichkeit, Eigenschaften des eingetretenen Ereignisses abzufragen. Solche Eigenschaften werden auf dieser Seite hier beschrieben.</p>

<p>Die meisten Browser kennen das Event-Objekt, aber leider ist die Implementierung vllig unterschiedlich gelst. Die Eigenschaften des Event-Objekts, die auf dieser Seite beschrieben werden, bercksichtigen mehrere Browser. Nicht alle Browser kennen dieselben Eigenschaften und auch in der Syntax zur berwachung von Ereignissen unterscheiden sie sich. Das gilt sowohl bei der Ereignisberwachung per Event-Handler in HTML als auch fr die direkte Ereignisberwachung in JavaScript. Die Unterschiede bei den Event-Handlern werden im Abschnitt ber Event-Handler nher beschrieben. Im folgenden wird zur allgemeinen Verwendung des Event-Objekts beschrieben, wie Sie mit Hilfe von JavaScript eine direkte Ereignisberwachung programmieren. Das Beispiel zeigt auch, wie Sie eine solche Ereignisberwachung fr mehrere Browser getrennt programmieren knnen, ohne dass es zu Fehlermeldungen kommt.</p>

<h3 class="xmp"><img src="../../src/js12.gif" width="30" height="30" alt="JavaScript 1.2" title="JavaScript 1.2"><img src="../../src/netsc4.gif" width="30" height="30" alt="Netscape 4.0" title="Netscape 4.0"><img src="../../src/msie4.gif" width="30" height="30" alt="MS IE 4.0" title="MS IE 4.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf12.gif" width="30" height="30" alt="Safari 1.2" title="Safari 1.2">&nbsp;Beispiel (Ereignisberwachung direkt mit JavaScript programmieren):</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/event_allgemeines.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;html&gt;&lt;head&gt;&lt;title&gt;Test&lt;/title&gt;
&lt;script type="text/javascript"&gt;
function TasteGedrueckt (Ereignis) {
  if (!Ereignis)
    Ereignis = window.event;
  if (Ereignis.which) {
    Tastencode = Ereignis.which;
  } else if (Ereignis.keyCode) {
    Tastencode = Ereignis.keyCode;
  }
  document.formular.ausgabe.value = "Taste mit Dezimalwert " + Tastencode + " gedrckt";
}
function TasteLosgelassen (Ereignis) {
  if (!Ereignis)
    Ereignis = window.event;
  if (Ereignis.which) {
    Tastencode = Ereignis.which;
  } else if (Ereignis.keyCode) {
    Tastencode = Ereignis.keyCode;
  }
  document.formular.ausgabe.value = "Taste mit Dezimalwert " + Tastencode + " losgelassen";
}

document.onkeydown = TasteGedrueckt;
document.onkeyup = TasteLosgelassen;
&lt;/script&gt;
&lt;/head&gt;&lt;body&gt;

&lt;form action="" name="formular"&gt;
&lt;p&gt;&lt;input type="text" name="ausgabe" readonly="readonly" size="50"&gt;&lt;/p&gt;
&lt;/form&gt;

&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>

<p>Das Beispiel berwacht Tastaturereignisse auf Dokumentebene. Das heit, wenn der Anwender irgendeine Taste drckt, whrend der Anzeigebereich der HTML-Datei fokussiert ist, wird das Ereignis von der programmierten Ereignisberwachung abgefangen und verarbeitet. Im Beispiel wird bei jedem Tastendruck der dezimale Tastaturcode der gedrckten Taste in einem Formularfeld ausgegeben.</p>

<p>Es werden zwei Funktionen definiert: Die Funktion <code>TasteGedrueckt()</code> ist die so genannte Handler-Funktion fr den Fall, dass der Anwender eine Taste drckt. Die Funktion <code>TasteLosgelassen()</code> behandelt den Fall, dass der Anwender die gedrckte Taste wieder loslsst. Beide Funktionen erwarten einen Parameter namens <code>Ereignis</code>. ber diesen Parameter knnen die Funktionen auf Eigenschaften des Event-Objekts zugreifen. Im Internet Explorer hingegen muss ber <code>window.event</code> auf das Event-Objekt zugegriffen werden. Daher wird direkt am Anfang der beiden Funktionen mit einer <code>if</code>-Anweisung abgefragt, ob der Parameter <code>Ereignis</code> gesetzt wurde. Wenn dies nicht der Fall ist, wird das Event-Objekt aus <code>window.event</code> in der Variable <code>Ereignis</code> gespeichert. Dadurch steht das Event-Objekt auf jeden Fall in der Variable <code>Ereignis</code> zur Gebrauch.</p>

<p>In den beiden Funktionen wird im Beispiel wird der dezimalen Tastencode der gedrckten Taste ermittelt. Nach Netscape-Syntax ist dieser in der Event-Eigenschaft <code>which</code> gespeichert, nach Microsoft-Syntax in der Eigenschaft <code>keyCode</code>. Daher wird mit einer <code>if</code>-<code>else</code>-Anweisung geprft, welche der beiden Eigenschaften existiert (siehe <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="../sprache/objekte.htm#existenzabfrage">Abfragen ob ein Objekt existiert</a>). Der Tastencode wird auf diese Weise in der Variable <code>Tastencode</code> gespeichert und anschlieend in die Statuszeile geschrieben.</p>

<p>Das allein gengt jedoch noch nicht zur Ereignisberwachung. Damit die Handler-Funktionen bei Eintritt des Ereignisses automatisch aufgerufen werden, muss die Ereignisberwachung gestartet werden. Dazu dienen die beiden Anweisungen am Ende des JavaScript-Bereichs.<br>
Mit <code>document.onkeydown = TasteGedrueckt;</code> wird das Ereignis "Taste gedrckt" (<code>onkeydown</code>) dokumentweit berwacht. Hinter dem Gleichheitszeichen folgt der Name der Handler-Funktion, die dieses Ereignis verarbeiten soll (<code>TasteGedrueckt</code>). Beachten Sie, dass hier nur der Funktionsname stehen darf, kein Funktionsaufruf mit runden Klammern dahinter.<br>
Mit <code>document.onkeyup = TasteLosgelassen;</code> wird das Ereignis "Taste losgelassen" (<code>onkeyup</code>) dokumentweit berwacht, und zur Ereignisbehandlung wird die Handler-Funktion <code>TasteLosgelassen</code> angegeben. Nach dem gleichen Schema knnen Sie auch andere Ereignisse berwachen - die Handler-Funktionen definieren Sie selber, und anstelle von <code>onkeydown</code> und <code>onkeyup</code> knnen Sie alle anderen blichen <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="../sprache/eventhandler.htm">Event-Handler</a> notieren.</p>

<h3 class="inf">Beachten Sie:</h3>

<p>Die Ereignisberwachung des Beispiels funktioniert auch im Opera 5.12. Das Ausgeben in die Statuszeile wird jedoch erst ab Version 6 interpretiert.</p>

<p>Wenn Sie Ereignisse dokumentweit berwachen, mssen Sie bercksichtigen, dass die Ereignisberwachung zu unerwnschten Nebenwirkungen fhren kann. Einige Anzeigebeispiele auf dieser Seite zeigen bei einem Mausereignis im Dokument ein Meldungsfenster oder verschieben ein Element an die Mausposition. Dies kann unter Umstnden verhindern, dass Verweise auf der Seite angeklickt werden knnen. In der praktischen Anwendung sollten Sie daher auf eine solche dokumentweite Ereignisberwachung verbunden mit Meldungsfenstern verzichten. In den meisten Fllen reicht es aus, Ereignisse fr einzelne Elemente zu berwachen.</p>



<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>



<h2><img src="../../src/dom20.gif" width="30" height="30" alt="DOM 2.0" title="DOM 2.0"><img src="../../src/msjs.gif" width="30" height="30" alt="MS JScript" title="MS JScript"><img src="../../src/msie4.gif" width="30" height="30" alt="MS IE 4.0" title="MS IE 4.0"><img src="../../src/op6.gif" width="30" height="30" alt="Opera 6" title="Opera 6"><img src="../../src/saf12.gif" width="30" height="30" alt="Safari 1.2" title="Safari 1.2"><img src="../../src/jsread.gif" width="60" height="30" alt="Lesen">&nbsp;<a class="an" name="alt_ctrl_shift_key">altKey, ctrlKey, shiftKey</a></h2>

<p>Microsoft-Syntax. Speichert, ob die Alt-Taste, die Umschalt-Taste oder die Steuerung-Taste gemeinsam mit einer anderen Taste oder einem Mausklick gedrckt wurden.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/event_alt_ctrl_shift_key.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;html&gt;&lt;head&gt;&lt;title&gt;Test&lt;/title&gt;
&lt;script type="text/javascript"&gt;
function Tastendruck (Ereignis) {
  if (!Ereignis)
    Ereignis = window.event;
  if (Ereignis.altKey)
    alert("Eine Taste plus Alt-Taste wurde gedrckt!");
  if (Ereignis.ctrlKey)
    alert("Eine Taste plus Steuerung-Taste wurde gedrckt!");
  if (Ereignis.shiftKey)
    alert("Eine Taste plus Umschalt-Taste wurde gedrckt!");
}

document.onkeypress = Tastendruck;
&lt;/script&gt;
&lt;/head&gt;&lt;body&gt;
&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>

<p>Im Beispiel wird berwacht, ob der Anwender eine Taste drckt (<code>onkeypress</code>). Wenn ja, wird abgefragt, ob zustzlich die Alt-, Steuerung- oder Umschalt-Taste gedrckt wurde. In diesem Fall wird jeweils eine entsprechende Meldung ausgegeben.</p>

<h3 class="inf">Beachten Sie:</h3>

<p>Opera fhrt die Handler-Funktion nicht aus, wenn die Alt-Taste gedrckt wird. Bei einem Mausklick, bei dem die Alt-Taste gedrckt wurde, hat <code>altKey</code> trotzdem den Wert <code>false</code>. Bei einem Mausklick mit gedrckter Umschalt-Taste ist <code>shiftKey</code> im Opera 7 unzuverlssig. In Opera 5.12 existieren die Eigenschaften zwar, sie liefern jedoch offenbar unsinnige Werte.</p>

<p>Seien Sie vorsichtig beim Ausprobieren dieses Beispiels. Einige Browser (z.B. Konqueror) verfgen ber voreingestellte Shortcuts. So fhrt die Tastenkombination Steuerung plus "Q" in Konqueror unweigerlich zum Schlieen des Browserfensters, da die Shortcuts Vorrang vor eventuellen JavaScript-Anweisungen haben.</p>



<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>



<h2><img src="../../src/dom20.gif" width="30" height="30" alt="DOM 2.0" title="DOM 2.0"><img src="../../src/msjs.gif" width="30" height="30" alt="MS JScript" title="MS JScript"><img src="../../src/msie4.gif" width="30" height="30" alt="MS IE 4.0" title="MS IE 4.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0"><img src="../../src/jsread.gif" width="60" height="30" alt="Lesen">&nbsp;<a class="an" name="button">button</a></h2>

<p>Microsoft-Syntax. Speichert, welche Maustasten gedrckt wurden: <code>1</code> fr die linke Maustaste, <code>2</code> fr die rechte Maustaste und <code>4</code> fr die mittlere Maustaste. Die Werte knnen kombiniert werden, etwa <code>5</code> fr die mittlere und die linke Maustaste.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/event_button.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;html&gt;&lt;head&gt;&lt;title&gt;Test&lt;/title&gt;
&lt;script type="text/javascript"&gt;
function Tastendruck (Ereignis) {
  if (!Ereignis)
    Ereignis = window.event;
  if (Ereignis.button) {
    if (Ereignis.button == 1) {
      alert("Linke Maustaste gedrckt");
    } else {
      alert("Andere Maustaste gedrckt");
    }
  }
}

document.onmousedown = Tastendruck;
&lt;/script&gt;
&lt;/head&gt;&lt;body&gt;
&lt;p&gt;Klicken Sie auf das Dokument&lt;/p&gt;
&lt;/div&gt;
&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>

<p>Im Beispiel wird berwacht, ob der Anwender eine Maustaste drckt (<code>onmousedown</code>), wrend sich der Mauszeiger ber einem <code>div</code>-Element befindet. Wenn ja, wird abgefragt, ob es die linke Maustaste war und eine entsprechende Meldung ausgegeben.</p>

<h3 class="inf">Beachten Sie:</h3>

<p>Diese Eigenschaft stammt ursprnglich von Microsofts Internet Explorer und verhlt sich dort wie beschrieben. Sie ist aber auch im <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="../../dhtml/modelle/dom.htm#event_handling">Event-Handling beim DOM</a> definiert, hat dort jedoch eine andere Bedeutung: <code>0</code> fr die linke Maustaste, <code>1</code> fr die mittlere Maustaste und <code>2</code> fr die rechte Maustaste. Diese Bedeutung erwies sich jedoch nicht als praktikabel, es kann z.B. ber dieses Schema nicht abgefragt werden, ob mehrere Maustasten gleichzeitig gedrckt wurden. ltere Operas bis hin zu Version 7 haben darber hinaus ihre eigene Belegung: <code>1</code> fr die linke Maustaste, <code>2</code> fr die rechte Maustaste und <code>3</code> fr die mittlere Maustaste. Opera 8 benutzt die W3C-Definition. Mozilla Firefox 1.0 untersttzt <code>button</code> ebenfalls gem dem DOM-Standard. Konqueror verhlt sich dagegen wieder wie der Internet Explorer. Safari erkennt irrtmlich die linke und die mittlere Maustaste immer als linke Maustaste. Das Beispiel, das sich auf die linke Maustaste beschrnkt, liefert daher nur im Internet Explorer, in lteren Opera-Versionen und im Konqueror sinnvolle Ergebnisse. Die Benutzung von <code>button</code> in den verschiedenen Browsern wrde eine komplizierte Browserweiche erfordern, um die gedrckte Maustaste zuverlssig in Erfahrung zu bringen.</p>

<p>Opera 5 und 6 lsen das dokumentweite <code>mousedown</code>-Ereignis nur bei einem Klick auf den Teil des Fensters aus, der vom Inhalt der Seite ausgefllt ist. Da das Anzeigebeispiel nur drftigen Inhalt enthlt, reagiert nur ein schmaler Bereich am Fensteroberrand auf die Mausklicks.</p>



<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>



<h2><img src="../../src/dom20.gif" width="30" height="30" alt="DOM 2.0" title="DOM 2.0"><img src="../../src/msjs.gif" width="30" height="30" alt="MS JScript" title="MS JScript"><img src="../../src/msie4.gif" width="30" height="30" alt="MS IE 4.0" title="MS IE 4.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0"><img src="../../src/jsread.gif" width="60" height="30" alt="Lesen">&nbsp;<a class="an" name="client_x_y">clientX, clientY</a></h2>

<p>Microsoft-Syntax. Speichert die horizontalen Pixel (<code>clientX</code>) und die vertikalen Pixel (<code>clientY</code>) der Mauszeiger-Position relativ zur oberen linken Ecke des Anzeigebereichs des Fensters, in dem das aktuellen Dokument dargestellt wird. Bezieht sich z.B. auf Mausereignisse.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/event_client_x_y.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;html&gt;&lt;head&gt;&lt;title&gt;Test&lt;/title&gt;
&lt;script type="text/javascript"&gt;
function Mausklick (Ereignis) {
  if (!Ereignis)
    Ereignis = window.event;
  if (document.getElementById) {
    document.getElementById("Springer").style.left  = Ereignis.clientX + "px";
    document.getElementById("Springer").style.top = Ereignis.clientY + "px";
  } else if (document.all) {
    document.all.Springer.style.left = Ereignis.clientX;
    document.all.Springer.style.top = Ereignis.clientY;
  }
}

document.onmousedown = Mausklick;
&lt;/script&gt;
&lt;/head&gt;&lt;body&gt;
&lt;div id="Springer" style="background-color:#FFE0FF; position:absolute;
top:100px; left:100px; width:100px; height:100px;"&gt;&lt;/div&gt;
&lt;p&gt;Klicken Sie irgendwo ins Dokument und der Springer bewegt sich zur Mausposition.&lt;/p&gt;
&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>

<p>Das Beispiel enthlt einen <code>div</code>-Bereich, der mit Hilfe von Stylesheet-Angaben absolut positioniert wird. Wenn der Anwender mit der Maus in das Fenster klickt, wird der Bereich an die Position verschoben, an der der Mausklick erfolgt. Der <code>div</code>-Bereich wird entweder ber <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="document.htm">document</a>.<a href="document.htm">getElementById()</a> oder <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="document.htm">document</a>.<a href="all.htm">all</a> angesprochen, je nachdem, welches Objekt zur Verfgung steht.</p>

<h3 class="inf">Beachten Sie:</h3>

<p>In Opera 5.12 funktioniert das Auslesen der Eigenschaften <code>clientX</code> und <code>clientY</code> problemlos. Das Beispiel funktioniert allerdings erst ab Version 6 korrekt, da Version 5.12 beim Setzen der CSS-Eigenschaft <code>top</code> ber JavaScript einen Pixelwert ohne Einheit (<code>px</code>) erwartet.</p>

<p>Gehen Sie mit dem dargestellten Beispiel vorsichtig um. Es kann Ihnen passieren, dass der "Layer" sich ber wichtige andere Seitenbestandteile schiebt und dadurch Verweise zu anderen Seiten eventuell berdeckt werden.</p>



<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>



<h2><img src="../../src/msjs.gif" width="30" height="30" alt="MS JScript" title="MS JScript"><img src="../../src/msie4.gif" width="30" height="30" alt="MS IE 4.0" title="MS IE 4.0"><img src="../../src/op7.gif" width="30" height="30" alt="Opera 7" title="Opera 7"><img src="../../src/konq33.gif" width="30" height="30" alt="Konqueror 3.3" title="Konqueror 3.3"><img src="../../src/saf12.gif" width="30" height="30" alt="Safari 1.2" title="Safari 1.2"><img src="../../src/jsread.gif" width="60" height="30" alt="Lesen">&nbsp;<a class="an" name="key_code">keyCode</a></h2>

<p>Microsoft-Syntax. Speichert bei Tastaturereignissen den Tastatur-Scancode der gedrckten Taste.</p>

<p>Der Tastaturscancode hat nicht direkt etwas mit dem Zeichencode des getippten Zeichens (z.B. ASCII, Unicode) zu tun. Viele Codes sind identisch (bei Buchstaben und Ziffern), aber es knnen auch Tasten abgefragt werden, die fr sich genommen gar kein echtes "Zeichen" sind, z.B. die Shift-Tasten, die Funktionstasten F1 bis F12 oder das numerische Tastenfeld.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/event_key_code.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;html&gt;&lt;head&gt;&lt;title&gt;Test&lt;/title&gt;
&lt;script type="text/javascript"&gt;
function Tastendruck (Ereignis) {
  if (!Ereignis)
    Ereignis = window.event;
  alert(Ereignis.keyCode);
}
document.onkeypress = Tastendruck;
&lt;/script&gt;
&lt;/head&gt;&lt;body&gt;
&lt;p&gt;Bitte drcken Sie irgendwelche Tasten!&lt;/p&gt;
&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>

<p>Das Beispiel berwacht, ob bei aktivem Dokument eine Taste gedrckt wurde. Wenn ja, wird deren Scancode in einem Meldungsfenster ausgegeben.</p>

<h3 class="inf">Beachten Sie:</h3>

<p>Unser Beispiel deaktiviert die Wirkung der gedrckten Tasten nicht. Drcken Sie z.B. die F1-Taste, wird der Scancode (112) angezeigt, danach ruft der Browser aber wahrscheinlich seine Hilfefunktion auf.</p>

<p>Konqueror 3.1 kennt die Eigenschaft <code>keyCode</code> noch nicht. Mozilla Firefox 1.0 kennt die Eigenschaft <code>keyCode</code> zwar, sie enthlt jedoch nur bei den Ereignissen <code>keyup</code> und <code>keydown</code> sinnvolle Werte. Bei <code>keypress</code>-Ereignissen hat die Eigenschaft bei normalen Tasten, z.B. Buchstaben, immer den Wert <code>0</code>. Die Eigenschaft <img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#which">which</a> liefert immer den korrekten Tastencode, daher sollte Sie zunchst die Existenz jener Eigenschaft abfragen.</p>



<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>



<h2><img src="../../src/js12.gif" width="30" height="30" alt="JavaScript 1.2" title="JavaScript 1.2"><img src="../../src/netsc4.gif" width="30" height="30" alt="Netscape 4.0" title="Netscape 4.0"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq32.gif" width="30" height="30" alt="Konqueror 3.2" title="Konqueror 3.2"><img src="../../src/jsread.gif" width="60" height="30" alt="Lesen">&nbsp;<a class="an" name="layer_x_y">layerX, layerY</a></h2>

<p>Netscape-Syntax. Speichert die aktuelle Breite (layerX) und Hhe (layerY) eines Objekts, wenn das Ereignis <code>onresize</code> berwacht wird, oder die horizontalen Pixel (layerX) und die vertikalen Pixel (layerY) der Mauszeiger-Position relativ zur oberen linken Ecke eines Layer-Bereichs, wenn Mausereignisse berwacht werden.</p>

<p>Als Layer gilt unter Netscape 4 ein <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="../../html/layer/index.htm">layer-Element</a> oder ein <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="../../dhtml/modelle/netscape.htm#simulieren">durch absolute Positionierung simulierter Layer</a>. Netscape ab Version 6 sowie Mozilla Firefox untersttzen das alte Layer-Konzept nicht mehr. <code>layerX</code> und <code>layerY</code> beziehen sich in diesen Browsern auf die obere linke Ecke des nchsthheren Elements mit <code>position:absolute</code> oder <code>position:relative</code>, in dem das Element liegt, bei dem das Mausereignis passierte. Falls das Element in keinem solchen Layer liegt, beziehen sich <code>layerX</code> und <code>layerY</code> in allen genannten Browsern auf die linke obere Ecke des Dokuments.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/event_layer_x_y.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;html&gt;&lt;head&gt;&lt;title&gt;Test&lt;/title&gt;
&lt;script type="text/javascript"&gt;
function wResize (Ereignis) {
  window.status = Ereignis.layerX + "x" + Ereignis.layerY;
  return true;
}

window.onresize = wResize;
&lt;/script&gt;
&lt;/head&gt;&lt;body&gt;
&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>

<p>Das Beispiel berwacht, ob der Anwender das Anzeigefenster des Browsers verndert. Beim Verndern der Gre des Anzeigefensters wird so oft wie mglich die Handler-Funktion <code>wResize</code> aufgerufen. Diese schreibt in die Statuszeile des Browsers die aktuelle Fenstergre.</p>

<h3 class="inf">Beachten Sie:</h3>

<p>Netscape 6.0 und Mozilla Firefox 1.0 fhren zwar die Handler-Funktion aus, in den Eigenschaften <code>layerX</code> und <code>layerY</code> ist jedoch nur der Wert <code>0</code> gespeichert. Konqueror kennt <code>layerX</code>/<code>layerY</code> nur bei Mausereignissen.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/event_layer_x_y2.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;html&gt;&lt;head&gt;&lt;title&gt;Test&lt;/title&gt;
&lt;style type="text/css"&gt;
#karte { position:relative; }
&lt;/style&gt;
&lt;script type="text/javascript"&gt;
function bildklick (Ereignis) {
  if (!Ereignis)
    Ereignis = window.event;
  alert("x-Wert: " + Ereignis.layerX + " / y-Wert: " + Ereignis.layerY);
}
function starte_ueberwachung () {
  document.images["karte"].onclick = bildklick;
}
window.onload = starte_ueberwachung;
&lt;script&gt;
&lt;/head&gt;&lt;body&gt;

&lt;p&gt;&lt;img src="../../../html/grafiken/anzeige/karte.png" width="345" height="312"
        alt="Karte von S&amp;uuml;dwestdeutschland" name="karte" id="karte"&gt;&lt;/p&gt;

&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>

<p>Das Beispiel veranschaulicht die Verwendung der Eigenschaften <code>layerX</code> und <code>layerY</code> bei Mausereignissen. Im Dokumentkrper wird eine Grafik mit dem Namen und der ID <code>karte</code> notiert. Beim Laden des Dokuments wird ber den <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="../sprache/eventhandler.htm#onload">Event-Handler onload</a> die vorher notierte Funktion <code>starte_ueberwachung()</code> ausgefhrt. Diese spricht ber <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="images.htm">document.images</a> die Grafik an und weist ihr eine Handler-Funktion fr das Klick-Ereignis zu. Bei einem Mausklick auf die Grafik wird somit die Funktion <code>bildklick()</code> ausgefhrt. In dieser Funktion werden die Eigenschaften <code>layerX</code> und <code>layerY</code> des Event-Objekts in einem Meldungsfenster ausgegeben.</p>

<p>Im Dokumentkopf ist zustzlich eine Stylesheet-Angabe notiert, die der Grafik die CSS-Eigenschaft <code>position:relative</code> zuweist. Damit wird sie von Netscape ab Version 6 und Mozilla Firefox als "Layer" angesehen. Somit beziehen sich die ausgegebenen Koordinaten auf die linke obere Ecke der Grafik.</p>




<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>



<h2><img src="../../src/js12.gif" width="30" height="30" alt="JavaScript 1.2" title="JavaScript 1.2"><img src="../../src/netsc4.gif" width="30" height="30" alt="Netscape 4.0" title="Netscape 4.0"><img src="../../src/jsread.gif" width="60" height="30" alt="Lesen">&nbsp;<a class="an" name="modifiers">modifiers</a></h2>

<p>Netscape-Syntax. Speichert, ob Zusatztasten wie die Alt-Taste oder die Umschalt-Taste gemeinsam mit einer anderen Taste oder einem Mausklick gedrckt wurden.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/event_modifiers.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;html&gt;&lt;head&gt;&lt;title&gt;Test&lt;/title&gt;
&lt;script type="text/javascript"&gt;
function ALT_Wert (Ereignis) {
  if (Ereignis.modifiers &amp; Event.ALT_MASK)
    alert("Maus geklickt und Alt-Taste gedrueckt!");
}

document.onmouseup = ALT_Wert;
&lt;/script&gt;
&lt;/head&gt;&lt;body&gt;
&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>

<p>Im Beispiel wird das Meldungsfenster dann angezeigt, wenn der Anwender mit der Maus in das Dokument geklickt hat und gleichzeitig die Alt-Taste gedrckt hlt. Die verwendete Syntax benutzt Bit-Operatoren. Fragen Sie einfach so ab wie in dem Beispiel. Folgende Ausdrcke sind erlaubt:<br>
<code>Ereignis.modifiers &amp; Event.ALT_MASK</code>, um die Alt-Taste abzufragen<br>
<code>Ereignis.modifiers &amp; Event.CONTROL_MASK</code>, um die Steuerung-Taste abzufragen<br>
<code>Ereignis.modifiers &amp; Event.SHIFT_MASK</code>, um die Umschalt-Taste abzufragen<br>
<code>Ereignis.modifiers &amp; Event.META_MASK</code>, um die AltGr-Taste abzufragen</p>

<p>Diese Angaben sind natrlich abhngig davon, ob die verwendete Tastatur eine solche Taste berhaupt enthlt.</p>

<h3 class="inf">Beachten Sie:</h3>

<p>Netscape 6.1 kennt die Eigenschaft <code>modifiers</code> nicht mehr.</p>



<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>



<h2><img src="../../src/msjs.gif" width="30" height="30" alt="MS JScript" title="MS JScript"><img src="../../src/msie4.gif" width="30" height="30" alt="MS IE 4.0" title="MS IE 4.0"><img src="../../src/op7.gif" width="30" height="30" alt="Opera 7" title="Opera 7"><img src="../../src/konq33.gif" width="30" height="30" alt="Konqueror 3.3" title="Konqueror 3.3"><img src="../../src/saf12.gif" width="30" height="30" alt="Safari 1.2" title="Safari 1.2"><img src="../../src/jsread.gif" width="60" height="30" alt="Lesen">&nbsp;<a class="an" name="offset_x_y">offsetX, offsetY</a></h2>

<p>Microsoft-Syntax. Speichert die horizontalen Pixel (offsetX) und die vertikalen Pixel (offsetY) der Mauszeiger-Position relativ zur oberen linken Ecke des Elements, das ein Ereignis ausgelst hat.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/event_offset_x_y.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;html&gt;&lt;head&gt;&lt;title&gt;Test&lt;/title&gt;
&lt;script type="text/javascript"&gt;
function Coords () {
  alert("Stelle im Button: " + window.event.offsetX + "/" + window.event.offsetY);
}
&lt;/script&gt;
&lt;/head&gt;&lt;body&gt;
&lt;form action=""&gt;
&lt;input type="button" value="Klick doch mal auf mich drauf" onclick="Coords()"&gt;
&lt;/form&gt;
&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>

<p>Das Beispiel enthlt ein Formular mit einem Button. Beim Anklicken des Buttons wird die Funktion <code>Coords()</code> aufgerufen. Diese gibt die Pixelkoordinaten des Mausklicks relativ zur oberen linken Ecke des Elements, also des Buttons, aus.</p>

<h3 class="inf">Beachten Sie:</h3>

<p>Konqueror 3.1 interpretiert diese Angaben noch nicht korrekt.</p>

<p>Der Internet Explorer 6, Opera 8.5 und Konqueror 3.4.2 interpretieren <code>offsetX</code>/<code>offsetY</code> unterschiedlich, wenn Sie dem betreffenden Element mit CSS einen <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="../../css/eigenschaften/rahmen.htm">Rahmen (border)</a> oder <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="../../css/eigenschaften/innenabstand.htm">Innenabstand (padding)</a> geben. Die Browser sind sich nicht einig, wo die obere linke Ecke eines Elements im <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="../../css/formate/box_modell.htm">CSS-Boxmodell</a> zu verorten ist. Konqueror und Safari gehen von der ueren Rahmen-Box als Koordinatenursprung aus. Dies erscheint am logischsten. Der Internet Explorer geht von der Innenabstands-Box aus, Opera von der Inhaltsbereichs-Box, also der innersten. Bei einem Klick in den Rahmen- oder Innenabstandsbereich liefert Opera also negative bzw. um die Gre des jeweiligen Rahmens und Innenabstands verminderte Werte. Der Internet Explorer liefert folglich bei einem Klick auf den Rahmen negative bzw. um die Gre des Rahmen verminderte Werte. Setzen Sie bei diesen Browsern     <code>offsetX</code> und <code>offsetY</code> daher am besten nur bei Elementen ohne <code>border</code> und <code>padding</code> ein.</p>

<p>Bei dem dargestellten Beispiel setzt Safari fr <code>offsetX</code> den Koordinatenursprung am linken Rand des Buttons, fr <code>offsetY</code> in der Mitte des Anzeigebereiches des Fensters. Die Darstellung der Buttons unterliegt bei Safari nicht dem Browser und CSS, sondern dem Betriebssystem - daher die unterschiedliche Interpretation der Koordinaten.</p>


<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>



<h2><img src="../../src/js12.gif" width="30" height="30" alt="JavaScript 1.2" title="JavaScript 1.2"><img src="../../src/netsc4.gif" width="30" height="30" alt="Netscape 4.0" title="Netscape 4.0"><img src="../../src/op7.gif" width="30" height="30" alt="Opera 7" title="Opera 7"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq33.gif" width="30" height="30" alt="Konqueror 3.3" title="Konqueror 3.3"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0"><img src="../../src/jsread.gif" width="60" height="30" alt="Lesen">&nbsp;<a class="an" name="page_x_y">pageX, pageY</a></h2>

<p>Netscape-Syntax. Speichert die horizontalen Pixel (pageX) und die vertikalen Pixel (pageY) der Mauszeiger-Position relativ zur oberen linken Ecke des Dokuments.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/event_page_x_y.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;html&gt;&lt;head&gt;&lt;title&gt;Test&lt;/title&gt;
&lt;script type="text/javascript"&gt;
function LayerPosition (Ereignis) {
  if (document.layers) {
    document.layers[0].left = Ereignis.pageX;
    document.layers[0].top = Ereignis.pageY;
  } else if (document.getElementById) {
    document.getElementById("layer").style.left = Ereignis.pageX + "px";
    document.getElementById("layer").style.top = Ereignis.pageY + "px";
  }
}
document.onmouseup = LayerPosition;
&lt;/script&gt;
&lt;style type="text/css"&gt;
#layer { position:absolute; top:100px; left:100px; width:100px; height:100px;
         background-color:#FFE0FF; border:solid 1px #000000; }
&lt;/style&gt;
&lt;/head&gt;&lt;body&gt;
&lt;div id="layer"&gt;Ein Layer&lt;/div&gt;
&lt;p&gt;Klicken Sie irgendwo ins Dokument und der Layer folgt der Maus dorthin.&lt;/p&gt;
&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>

<p>Das Beispiel enthlt einen simulierten Layer. Wenn der Anwender mit der Maus in das Fenster klickt und die Maustaste dann wieder loslsst, wird der Layer an die Position verschoben, an der die Maus losgelassen wurde.<br>
Da die Eigenschaften <code>pageX</code> und <code>pageY</code> auch von anderen Browsern interpretiert werden, wurde das Beispiel entsprechend kompatibel gestaltet. Statt eines Layers wird mit einem absolut positionierten <code>div</code>-Bereich ein <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="../../dhtml/modelle/netscape.htm#simulieren">Layer ohne layer-Element simuliert</a>. Wenn die Maustaste gedrckt und wieder losgelassen wird, wird die Funktion <code>LayerPos()</code> aufgerufen. Innerhalb dieser Funktion wird geprft, ob der Browser das Objekt <code>document.layers</code> kennt. Ist das der Fall, erfolgt die Zuweisung des Wertes ber das Layer-Objekt. Diesem Zweig der Anweisung folgt Netscape 4.x. Kennt der Browser das Objekt dagegen nicht, dann wird im <code>else</code>-Zweig geprft, ob er die Methode <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="document.htm">document</a>.<a href="document.htm#get_element_by_id">getElementById()</a> kennt. Anschlieend erfolgt die Zuweisung der Eigenschaft an das Element entsprechend der DOM-Syntax. Beide Zweige der <code>if</code>/<code>-else</code>-Anweisung verwenden jedoch die gleichen Event-Eigenschaften.</p>



<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>



<h2><img src="../../src/dom20.gif" width="30" height="30" alt="DOM 2.0" title="DOM 2.0"><img src="../../src/js12.gif" width="30" height="30" alt="JavaScript 1.2" title="JavaScript 1.2"><img src="../../src/netsc4.gif" width="30" height="30" alt="Netscape 4.0" title="Netscape 4.0"><img src="../../src/msie4.gif" width="30" height="30" alt="MS IE 4.0" title="MS IE 4.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0"><img src="../../src/jsread.gif" width="60" height="30" alt="Lesen">&nbsp;<a class="an" name="screen_x_y">screenX, screenY</a></h2>

<p>Speichert die horizontalen Pixel (screenX) und die vertikalen Pixel (screenY) der Mauszeiger-Position absolut gesehen zum Bildschirm.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/event_screen_x_y.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;html&gt;&lt;head&gt;&lt;title&gt;Test&lt;/title&gt;
&lt;script type="text/javascript"&gt;
function Mausklick (Ereignis) {
  if (!Ereignis)
    Ereignis = window.event;
  alert("x-Wert: " + Ereignis.screenX + " / y-Wert: " + Ereignis.screenY);
}

document.onclick = Mausklick;
&lt;/script&gt;
&lt;/head&gt;&lt;body&gt;
&lt;p&gt;Klicken Sie irgendwo ins Dokument, um die Position auszugeben.&lt;/p&gt;
&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>

<p>Das Beispiel berwacht, ob der Anwender in das Dokument klickt. Wenn ja, werden in einem Meldungsfenster die absoluten Bildschirmkoordinaten ausgegeben, an denen die Maustaste gedrckt wurde.</p>

<h3 class="inf">Beachten Sie:</h3>

<p>Opera unter Linux, getestet mit Version 9.02 und frher, liefert unter Umstnden falsche Werte fr <code>screenX</code> und <code>screenY</code>. Anstelle die absolute Mausposition in Bezug auf den gesamten Bildschirm wiederzugeben, werden Koordinaten relativ zur oberen linken Ecke des Dokuments angegeben - wie bei <img src="../../src/up.gif" width="14" height="10" alt="nach oben">&nbsp;<a href="#page_x_y">pageX und pageY</a>.</p>



<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>


<h2><img src="../../src/js12.gif" width="30" height="30" alt="JavaScript 1.2" title="JavaScript 1.2"><img src="../../src/netsc4.gif" width="30" height="30" alt="Netscape 4.0" title="Netscape 4.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq33.gif" width="30" height="30" alt="Konqueror 3.3" title="Konqueror 3.3"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0"><img src="../../src/jsread.gif" width="60" height="30" alt="Lesen">&nbsp;<a class="an" name="which">which</a></h2>

<p>Netscape-Syntax. Speichert bei Tastaturereignissen den dezimalen Code (ASCII-Wert) der gedrckten Taste und bei Mausereignissen, welche Maustaste gedrckt wurde.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/event_which.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;html&gt;&lt;head&gt;&lt;title&gt;Test&lt;/title&gt;
&lt;script type="text/javascript"&gt;
function Position (Ereignis) {
  alert("Maustaste: " + Ereignis.which);
}

document.onmousedown = Position;
&lt;/script&gt;
&lt;/head&gt;&lt;body&gt;
&lt;p&gt;Klicken Sie irgendwo ins Dokument.&lt;/p&gt;
&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>

<p>Das Beispiel berwacht, ob der Anwender die Maustaste drckt. Wenn ja, wird in einem Meldungsfenster ausgegeben, welche Maustaste gedrckt wurde.  Die linke Maustaste hat den Wert 1, die mittlere (sofern vorhanden) den Wert 2 und die rechte (sofern vorhanden) den Wert 3.</p>

<h3 class="inf">Beachten Sie:</h3>

<p>In verschiedenen Browsern ist es durch das aufspringende Meldungsfenster nicht mglich, Links auf der Seite anzuklicken. Im Praxisgebrauch sollten Sie daher das <code>onmousedown</code>-Ereignis nicht dokumentweit mit einem Meldungsfenster verknpfen.</p>

<p>Opera erlaubt das dokumentweite Verarbeiten von Rechtsklicks erst ab Version 8, in Versionen darunter wird die Handler-Funktion bei einem Rechtsklick nicht ausgefhrt.</p>

<p>Safari interpretiert linke und mittlere Maustaste gleich, die rechte gar nicht.</p>



<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>



<h2><img src="../../src/dom20.gif" width="30" height="30" alt="DOM 2.0" title="DOM 2.0"><img src="../../src/js12.gif" width="30" height="30" alt="JavaScript 1.2" title="JavaScript 1.2"><img src="../../src/netsc4.gif" width="30" height="30" alt="Netscape 4.0" title="Netscape 4.0"><img src="../../src/msie4.gif" width="30" height="30" alt="MS IE 4.0" title="MS IE 4.0"><img src="../../src/op6.gif" width="30" height="30" alt="Opera 6" title="Opera 6"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0"><img src="../../src/jsread.gif" width="60" height="30" alt="Lesen">&nbsp;<a class="an" name="type">type</a></h2>

<p>Speichert, welches Ereignis eingetreten ist. Der gespeicherte Wert ist der Name des Events ohne das Prfix <code>on</code>, also beispielsweise <code>mouseup</code> oder <code>keypress</code> oder <code>select</code>.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/event_type.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;html&gt;&lt;head&gt;&lt;title&gt;Test&lt;/title&gt;
&lt;script type="text/javascript"&gt;
function Auswertung (Ereignis) {
  if (!Ereignis)
    Ereignis = window.event;
  alert("Ereignis: " + Ereignis.type);
}

document.onmouseup = Auswertung;
document.onkeyup = Auswertung;
&lt;/script&gt;
&lt;/head&gt;&lt;body&gt;
&lt;p&gt;Drcken Sie eine Taste oder klicken Sie irgendwo ins Dokument.&lt;/p&gt;
&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>

<p>Das Beispiel berwacht zwei Ereignisse, nmlich, ob der Anwender die Maustaste drckt und ob er eine Taste drckt. In beiden Fllen wird die gleiche Handler-Funktion <code>Auswertung</code> aufgerufen. Sie gibt in einem Meldungsfenster aus, welches der Ereignisse eingetreten ist.</p>

<h3 class="inf">Beachten Sie:</h3>

<p>Im Mozilla Firefox (Linux) und Konqueror ist es durch das aufspringende Meldungsfenster nicht mglich, Links auf der Seite anzuklicken. Im Praxisgebrauch sollten Sie daher das <code>onmouseup</code>-Ereignis nicht dokumentweit mit einem Meldungsfenster verknpfen.</p>

<p>Safari 1.0 reagiert nicht auf Tastaturereignisse, wohl aber auf Mausklicks. Sptere Versionen von Safari reagieren korrekt.</p>



<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>



<h2><img src="../../src/msjs.gif" width="30" height="30" alt="MS JScript" title="MS JScript"><img src="../../src/msie4.gif" width="30" height="30" alt="MS IE 4.0" title="MS IE 4.0"><img src="../../src/op7.gif" width="30" height="30" alt="Opera 7" title="Opera 7"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0">&nbsp;<a class="an" name="x_y">x, y</a></h2>

<p>Speichert die horizontalen Pixel (x) und die vertikalen Pixel (y) der Mauszeiger-Position relativ zur oberen linken Ecke des <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="../../css/eigenschaften/positionierung.htm#position">relativ positionierten</a> Elternelements von dem Element, das ein Ereignis ausgelst hat. Wenn das auslsende Element kein relativ positioniertes Elternelement hat, gilt die linke obere Ecke des Dokuments als Bezug.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/event_x_y.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;html&gt;&lt;head&gt;&lt;title&gt;Test&lt;/title&gt;
&lt;script type="text/javascript">
function Coords () {
  if (window.event)
    alert("x = " + window.event.x + "/ y = " + window.event.y);
}
&lt;/script&gt;
&lt;style type="text/css"&gt;
div { position:relative; left:100px; width:200px; padding:30px; background-color:#FFFFE0; }
div p { margin:0; padding:10px; background-color:#FFFFB0; }
&lt;/style&gt;
&lt;/head&gt;&lt;body&gt;
&lt;div&gt;&lt;p onclick="Coords()"&gt;Klick mich&lt;/p&gt;&lt;/div&gt;
&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>

<p>Das Beispiel enthlt einen relativ positionierten <code>div</code>-Bereich und innerhalb davon einen gewhnlichen Textabsatz. Beim Anklicken des Absatzes wird die Funktion <code>Coords()</code> aufgerufen. Diese gibt die Pixelkoordinaten des Mausklicks aus. Die Werte beziehen sich dabei auf die linke obere Ecke des <code>div</code>-Bereichs.</p>

<h3 class="inf">Beachten Sie:</h3>

<p>Versionen des Internet Explorers vor der Version 5 speichern in diesen Eigenschaften die Position relativ zum Anzeigebereich des Fensters, genau wie <img src="../../src/up.gif" width="14" height="10" alt="nach oben">&nbsp;<a href="#client_x_y">clientX und clientY</a>. Ab der Version 5.0 wendet der Internet Explorer das beschriebene Verhalten an.</p>

<p>Die Eigenschaften <code>x</code> und <code>y</code> kennen neben dem Internet Explorer auch andere Browser, aber sie haben dort mitunter eine unterschiedliche Bedeutung. In Netscape 4 sind sie identisch mit <img src="../../src/up.gif" width="14" height="10" alt="nach oben">&nbsp;<a href="#layer_x_y">layerX und layerY</a>. Auch Opera, Safari und Konqueror kennen <code>x</code> und <code>y</code>. Im Safari und Konqueror sind <code>x</code> und <code>y</code> immer identisch mit <img src="../../src/up.gif" width="14" height="10" alt="nach oben">&nbsp;<a href="#client_x_y">clientX und clientY</a>, relativ positionierte Elternelemente werden ignoriert. Opera 7 folgt korrekt der Microsoft-Definition, ab Version 8 treten jedoch Unstimmigkeiten auf, wenn das fragliche Element einen Rahmen ( <code>border</code>) oder Innenabstand (<code>padding</code>) besitzt. Dieser Fehler ist in Version 8.5 noch nicht behoben. Das Beispiel funktioniert daher in diesem Browser nicht zuverlssig.</p>



<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td colspan="2" class="doc">
&nbsp;<a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a>
</td></tr>
<tr><td class="doc"><a href="history.htm"><img src="../../src/next.gif" width="10" height="10" border="0" hspace="10" alt="weiter"></a></td>
<td width="100%"><img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="history.htm">history</a>
</td></tr>
<tr>
<td class="doc"><a href="links.htm"><img src="../../src/prev.gif" width="10" height="10" border="0" hspace="10" alt="zurck"></a></td>
<td><img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="links.htm">links</a>
</td>
</tr>
<tr><td colspan="2" class="doc">&nbsp;</td>
</tr>
<tr>
<td colspan="2" class="nav"><a class="an" name="bottom"><img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"></a> <a href="../../index.htm">SELFHTML</a>/<a href="../../navigation/index.htm" target="_parent" class="navh">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von">&nbsp;<a href="../index.htm">JavaScript/DOM</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von">&nbsp;<a href="index.htm">Objektreferenz</a></td>
</tr>
</table>

<p>&copy; 2007 <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="../../editorial/impressum.htm">Impressum</a></p>

</body>
</html>