1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
|
<!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: HTML/XHTML / Universalattribute / Event-Handler fr Scripts</title>
<meta name="description" content="Welche Attribute es in HTML gibt, um ereignisorientiertes Programmieren mit Hilfe einer Script-Sprache wie JavaScript zu ermglichen">
<meta name="keywords" content="SELFHTML, HTML, Universalattribute, Attribute, Event-Handler, Programmierung, JavaScript, ereignisorientierte Programmierung, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup">
<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-10-31T12:25:34+01:00">
<meta name="DC.Identifier" content="http://de.selfhtml.org/html/attribute/eventhandler.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="stylesheet" type="text/css" href="../../src/selfhtml.css">
<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="Universalattribute" href="index.htm">
<link rel="next" title="Unterschiede zwischen XHTML und HTML" href="../xhtml/unterschiede.htm">
<link rel="prev" title="Allgemeine Universalattribute" href="allgemeine.htm">
<link rel="first" title="Allgemeine Universalattribute" href="allgemeine.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"> <a href="../index.htm">HTML/XHTML</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="index.htm">Universalattribute</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-Handler fr Scripts</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"> <a href="#notieren">Event-Handler notieren</a><br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#uebersicht">bersicht der universalen Event-Handler</a><br>
</p>
</td>
</tr>
<tr><td colspan="2" class="doc"> <a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a> </td></tr>
</table>
<h2><img src="../../src/html40.gif" width="30" height="30" alt="HTML 4.0" title="HTML 4.0"><img src="../../src/xhtml10.gif" width="30" height="30" alt="XHTML 1.0" title="XHTML 1.0"><img src="../../src/msie3.gif" width="30" height="30" alt="MS IE 3.0" title="MS IE 3.0"><img src="../../src/netsc2.gif" width="30" height="30" alt="Netscape 2.0" title="Netscape 2.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"> <a class="an" name="notieren">Event-Handler notieren</a></h2>
<p>Event-Handler (<i>Ereignisbehandler</i>) sind HTML-Attribute, die eine Verknpfung zu einer Script-Sprache herstellen. Ein Ereignis ist zum Beispiel ein Mausklick oder ein Tastendruck des Anwenders. Ein Element, das einen Event-Handler enthlt, kann auf ein solches Ereignis reagieren, wenn das Ereignis im Anzeigebereich des Elements stattfindet. Mit dem Event-Handler knnen Sie beispielsweise eine JavaScript-Funktion aufrufen, die das Ereignis verarbeitet und reagiert.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/eventhandler.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Event-Handler notieren</title>
<script type="text/javascript">
function Ergebnis () {
document.Formular.Eingabe.value = eval(document.Formular.Eingabe.value);
}
</script>
</head>
<body>
<form name="Formular" action="">
<p>Geben Sie eine Rechenoperation mit Grundrechenarten ein und klicken Sie dann
auf den Button neben dem Eingabefeld:</p>
<p>
<input type="text" name="Eingabe" size="30">
<input type="button" value=" = " onclick="Ergebnis()">
</p>
</form>
</body>
</html>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Das Beispiel enthlt ein <img src="../../src/kap.gif" width="15" height="13" alt="Kapitel"> <a href="../formulare/index.htm">Formular</a> mit einem Eingabefeld und einem Klick-Button. Beim Klick-Button ist der Event-Handler <code>onclick</code> notiert, der beim Anklicken des Buttons die JavaScript-Funktion <code>Ergebnis()</code> aufruft, die im Dateikopf in einem <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../transit/scripts.htm#definieren">Script-Bereich</a> notiert ist. Diese Funktion holt sich den Inhalt aus dem Eingabefeld, berechnet ihn und schreibt das Ergebnis wieder in das Eingabefeld.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Das obige Beispiel funktioniert auch mit lteren, JavaScript-fhigen Browsern. Solche Browser interpretieren Event-Handler nur in sehr eingeschrnkter Form, nmlich bei Formularelementen und einigen wenigen anderen Elementen. Das Konzept der Event-Handler geht jedoch viel weiter. So kann beispielsweise auch eine Tabellenzelle beim Anklicken ihre Hintergrundfarbe wechseln usw. Solche dynamischen nderungen am Dokument funktionieren aber erst mit neueren Browsern (Internet Explorer ab Version 4.x, Netscape ab Version 6.x).</p>
<p>In HTML ist nicht festgelegt, dass Event-Handler-Attribute standardmig JavaScript-Code enthalten. Andere Scriptsprachen wren genauso mglich, z.B. <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../dhtml/modelle/microsoft.htm#scriptsprachen">VBScript</a>. Deshalb erfordert es der HTML-Standard, dass beim Gebrauch von Event-Handler-Attributen die verwendete Scriptsprache zentral angegeben wird. Dies ist durch eine <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../kopfdaten/meta.htm#script_style">Angabe zur Default-Sprache fr Scripts</a> im Kopf der HTML-Datei mglich:</p>
<pre>
<meta http-equiv="Content-Script-Type" content="text/javascript">
</pre>
<p>Ohne diese Angabe soll ein Browser die Attributwerte nicht als Code einer bestimmten Scriptsprache behandeln. ber den Sinn oder Unsinn dieser Regelung lsst sich trefflich streiten. Da sich JavaScript als Standard-Scriptsprache in HTML-Dokumenten durchgesetzt hat, gibt es momentan keine praktische Notwendigkeit einer solchen Angabe. Es ist daher allgemein akzeptierte Praxis, diese Angabe wegzulassen - in SELFHTML wird konsequent darauf verzichtet. Seien Sie sich aber im Klaren darber, dass dies strenggenommen ein Versto gegen die W3C-Empfehlung ist.</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/html40.gif" width="30" height="30" alt="HTML 4.0" title="HTML 4.0"><img src="../../src/xhtml10.gif" width="30" height="30" alt="XHTML 1.0" title="XHTML 1.0"><img src="../../src/msie3.gif" width="30" height="30" alt="MS IE 3.0" title="MS IE 3.0"><img src="../../src/netsc2.gif" width="30" height="30" alt="Netscape 2.0" title="Netscape 2.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"> <a class="an" name="uebersicht">bersicht der universalen Event-Handler</a></h2>
<p>Die folgende Tabelle listet nur solche Event-Handler auf, die im HTML-Standard als weitgehend universell und fr die meisten HTML-Elemente einsetzbar festgehalten sind. Es gibt noch weitere Event-Handler, die jedoch nur fr bestimmte Elemente gltig sind. Lesen Sie dazu auch den Abschnitt im JavaScript-Kapitel ber <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../javascript/sprache/eventhandler.htm">Event-Handler</a>.</p>
<table class="reftable" cellpadding="3" cellspacing="0" border="1">
<tr>
<th>Attribut</th>
<th>Bedeutung</th>
<th>Beispiel</th>
<th>Erlaubt bei HTML-Elementen</th>
</tr>
<tr>
<td class="code" nowrap="nowrap"><code>onclick</code></td>
<td class="tabxpl">Fr den Fall, dass der Anwender ein Element anklickt.</td>
<td class="code" nowrap="nowrap">siehe JavaScript-Kapitel:<br>
<img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../javascript/sprache/eventhandler.htm#onclick">onclick</a></td>
<td class="tabxpl">siehe HTML-Referenz:<br><img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../referenz/attribute.htm#universalattribute">Universalattribute</a></td>
</tr>
<tr>
<td class="code" nowrap="nowrap"><code>ondblclick</code></td>
<td class="tabxpl">Fr den Fall, dass der Anwender ein Element doppelt anklickt.</td>
<td class="code" nowrap="nowrap">siehe JavaScript-Kapitel:<br>
<img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../javascript/sprache/eventhandler.htm#ondblclick">ondblclick</a></td>
<td class="tabxpl">siehe HTML-Referenz:<br><img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../referenz/attribute.htm#universalattribute">Universalattribute</a></td>
</tr>
<tr>
<td class="code" nowrap="nowrap"><code>onmousedown</code></td>
<td class="tabxpl">Tritt ein, wenn der Anwender die Maustaste gedrckt hlt.</td>
<td class="code" nowrap="nowrap">siehe JavaScript-Kapitel:<br>
<img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../javascript/sprache/eventhandler.htm#onmousedown">onmousedown</a></td>
<td class="tabxpl">siehe HTML-Referenz:<br><img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../referenz/attribute.htm#universalattribute">Universalattribute</a></td>
</tr>
<tr>
<td class="code" nowrap="nowrap"><code>onmouseup</code></td>
<td class="tabxpl">Tritt ein, wenn der Anwender die Maustaste gedrckt hat und sie nun wieder loslsst.</td>
<td class="code" nowrap="nowrap">siehe JavaScript-Kapitel:<br>
<img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../javascript/sprache/eventhandler.htm#onmouseup">onmouseup</a></td>
<td class="tabxpl">siehe HTML-Referenz:<br><img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../referenz/attribute.htm#universalattribute">Universalattribute</a></td>
</tr>
<tr>
<td class="code" nowrap="nowrap"><code>onmouseover</code></td>
<td class="tabxpl">Tritt ein, wenn der Anwender mit der Maus ber ein Element fhrt.</td>
<td class="code" nowrap="nowrap">siehe JavaScript-Kapitel:<br>
<img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../javascript/sprache/eventhandler.htm#onmouseover">onmouseover</a></td>
<td class="tabxpl">siehe HTML-Referenz:<br><img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../referenz/attribute.htm#universalattribute">Universalattribute</a></td>
</tr>
<tr>
<td class="code" nowrap="nowrap"><code>onmousemove</code></td>
<td class="tabxpl">Tritt ein, wenn der Anwender die Maus bewegt, unabhngig davon, ob die Maustaste gedrckt ist oder nicht.</td>
<td class="code" nowrap="nowrap">siehe JavaScript-Kapitel:<br>
<img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../javascript/sprache/eventhandler.htm#onmousemove">onmousemove</a></td>
<td class="tabxpl">siehe HTML-Referenz:<br><img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../referenz/attribute.htm#universalattribute">Universalattribute</a></td>
</tr>
<tr>
<td class="code" nowrap="nowrap"><code>onmouseout</code></td>
<td class="tabxpl">Tritt ein, wenn der Anwender mit der Maus ber ein Element fhrt und dieses dabei verlsst.</td>
<td class="code" nowrap="nowrap">siehe JavaScript-Kapitel:<br>
<img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../javascript/sprache/eventhandler.htm#onmouseout">onmouseout</a></td>
<td class="tabxpl">siehe HTML-Referenz:<br><img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../referenz/attribute.htm#universalattribute">Universalattribute</a></td>
</tr>
<tr>
<td class="code" nowrap="nowrap"><code>onkeypress</code></td>
<td class="tabxpl">Tritt ein, wenn der Anwender eine Taste drckt und diese gedrckt hlt.</td>
<td class="code" nowrap="nowrap">siehe JavaScript-Kapitel:<br>
<img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../javascript/sprache/eventhandler.htm#onkeypress">onkeypress</a></td>
<td class="tabxpl">siehe HTML-Referenz:<br><img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../referenz/attribute.htm#universalattribute">Universalattribute</a></td>
</tr>
<tr>
<td class="code" nowrap="nowrap"><code>onkeydown</code></td>
<td class="tabxpl">Tritt ein, wenn der Anwender, whrend er ein Element aktiviert hat, eine Taste drckt.</td>
<td class="code" nowrap="nowrap">siehe JavaScript-Kapitel:<br>
<img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../javascript/sprache/eventhandler.htm#onkeydown">onkeydown</a></td>
<td class="tabxpl">siehe HTML-Referenz:<br><img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../referenz/attribute.htm#universalattribute">Universalattribute</a></td>
</tr>
<tr>
<td class="code" nowrap="nowrap"><code>onkeyup</code></td>
<td class="tabxpl">Tritt ein, wenn der Anwender, eine Taste gedrckt hat und diese wieder loslsst.</td>
<td class="code" nowrap="nowrap">siehe JavaScript-Kapitel:<br>
<img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../javascript/sprache/eventhandler.htm#onkeyup">onkeyup</a></td>
<td class="tabxpl">siehe HTML-Referenz:<br><img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../referenz/attribute.htm#universalattribute">Universalattribute</a></td>
</tr>
</table><br>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td colspan="2" class="doc">
<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="../xhtml/unterschiede.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"> <a href="../xhtml/unterschiede.htm">Unterschiede zwischen XHTML und HTML</a>
</td></tr>
<tr>
<td class="doc"><a href="allgemeine.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"> <a href="allgemeine.htm">Allgemeine Universalattribute</a>
</td>
</tr>
<tr><td colspan="2" class="doc"> </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"> <a href="../index.htm">HTML/XHTML</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="index.htm">Universalattribute</a></td>
</tr></table>
<p>© 2007 <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../editorial/impressum.htm">Impressum</a></p>
</body>
</html>
|
