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
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
|
<!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 / Sprachelemente / Event-Handler</title>
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
<meta name="description" content="Welche Event-Handler es in JavaScript gibt und welche Aufgaben sie haben.">
<meta name="keywords" content="SELFHTML, JavaScript, Event-Handler, onabort, onblur, onchange, onclick, ondblclick, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onselect, onsubmit, onunload, javascript:">
<meta name="author" content="Redaktion SELFHTML, selfhtml81@selfhtml.org">
<meta name="DC.Publisher" content="Stefan Mnz">
<meta name="DC.Date" content="2005-11-08T02:11:45+01:00">
<meta name="DC.Identifier" content="http://de.selfhtml.org/javascript/sprache/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="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="Sprachelemente" href="index.htm">
<link rel="next" title="Hinweise zur JavaScript-Objektreferenz" href="../objekte/hinweise.htm">
<link rel="prev" title="Reservierte Wrter" href="reserviert.htm">
<link rel="first" title="Allgemeine Regeln fr JavaScript" href="regeln.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">JavaScript/DOM</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="index.htm">Sprachelemente</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</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="#allgemeines">Allgemeines zu Event-Handlern</a><br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#onabort">onabort</a> (bei Abbruch)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#onblur">onblur</a> (beim Verlassen)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#onchange">onchange</a> (bei erfolgter nderung)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#onclick">onclick</a> (beim Anklicken)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#ondblclick">ondblclick</a> (bei doppeltem Anklicken)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#onerror">onerror</a> (im Fehlerfall)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#onfocus">onfocus</a> (beim Aktivieren)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#onkeydown">onkeydown</a> (bei gedrckter Taste)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#onkeypress">onkeypress</a> (bei gedrckt gehaltener Taste)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#onkeyup">onkeyup</a> (bei losgelassener Taste)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#onload">onload</a> (beim Laden einer Datei)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#onmousedown">onmousedown</a> (bei gedrckter Maustaste)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#onmousemove">onmousemove</a> (bei weiterbewegter Maus)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#onmouseout">onmouseout</a> (beim Verlassen des Elements mit der Maus)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#onmouseover">onmouseover</a> (beim berfahren des Elements mit der Maus)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#onmouseup">onmouseup</a> (bei losgelassener Maustaste)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#onreset">onreset</a> (beim Zurcksetzen des Formulars)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#onselect">onselect</a> (beim Selektieren von Text)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#onsubmit">onsubmit</a> (beim Absenden des Formulars)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#onunload">onunload</a> (beim Verlassen der Datei)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#javascript">javascript:</a> (bei Verweisen)<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><a class="an" name="allgemeines">Allgemeines zu Event-Handlern</a></h2>
<p>Event-Handler (<i>Ereignisbehandler</i>) sind ein wichtiges Bindeglied zwischen HTML und JavaScript. Event-Handler werden meist in Form von Attributen in HTML-Tags notiert. Da es sich um Bestandteile handelt, die innerhalb von HTML vorkommen, hat das W3-Konsortium die Event-Handler mittlerweile auch in den HTML-Sprachstandard mit aufgenommen (siehe auch <img src="../../src/kap.gif" width="15" height="13" alt="Kapitel"> <a href="../../html/attribute/index.htm">Universalattribute</a>: <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../html/attribute/eventhandler.htm">Event-Handler</a>). Dort wird auch festgelegt, in welchen HTML-Tags welcher Event-Handler vorkommen darf. Das Problem dabei ist jedoch, dass die Praxis derzeit noch stark davon abweicht - zumindest bei Netscape 4.x. Der Internet Explorer dagegen interpretiert Event-Handler seit seiner Version 4.x weitgehend so universell wie vom W3-Konsortium vorgesehen. Bei den Beschreibungen der Event-Handler auf dieser Seite wird jeweils versucht, auf die Problematik einzugehen. Letztendlich hilft aber nur: selber im Einzelfall mit mehreren verschiedenen Browsern testen und ausprobieren.</p>
<p>Event-Handler erkennen Sie daran, dass solche HTML-Attribute immer mit <code>on</code> beginnen, zum Beispiel <code>onclick</code>. Hinter dem Istgleichzeichen notieren Sie - in Anfhrungszeichen, eine JavaScript-Anweisung. Wenn Sie mehrere Anweisungen ausfhren wollen, dann definieren Sie sich dazu am besten in einem JavaScript-Bereich eine <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="funktionen.htm">Funktion</a> und rufen hinter dem Istgleichzeichen diese Funktion auf, also z.B. <code>onclick="Umrechnen()"</code>.</p>
<p>Jeder Event-Handler steht fr ein bestimmtes Anwenderereignis, <code>onclick</code> etwa fr das Ereignis "Anwender hat mit der Maus geklickt". Der Anzeigebereich des HTML-Elements, in dem der Event-Handler notiert ist, ist das auslsende Element. Wenn der Event-Handler <code>onclick</code> beispielsweise in einem Formular-Button notiert wird, wird der damit verknpfte JavaScript-Code nur dann ausgefhrt, wenn der Mausklick im Anzeigebereich dieses Elements erfolgt. Das mag Ihnen jetzt selbstverstndlich vorkommen. Ist es auch, solange es beispielsweise um Formular-Buttons geht. Aber nach dem erweiterten Modell von HTML 4.0 kann etwa auch ein HTML-Bereich, der mit <code><div></code>...<code></div></code> definiert wird, einen Event-Handler wie <code>onclick</code> enthalten.</p>
<p>Es wurden nur solche Event-Handler aufgenommen, die auch tatschlich in HTML-Tags vorkommen knnen und im HTML-4.0-Standard erwhnt sind (mit Ausnahme von <code>onabort</code> und <code>onerror</code>). Das sind weniger, als Netscape und der Internet Explorer kennen. Bei Netscape kommt verwirrenderweise hinzu, dass einige Event-Handler zwar so bezeichnet werden, aber eigentlich gar nicht innerhalb von HTML-Tags vorkommen knnen. Es ist zu hoffen, dass es hierbei in Zukunft mehr bereinstimmungen zwischen Sprachstandards und Browser-Implementierungen geben wird.</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/js10.gif" width="30" height="30" alt="JavaScript 1.0" title="JavaScript 1.0"><img src="../../src/netsc2.gif" width="30" height="30" alt="Netscape 2.0" title="Netscape 2.0"><img src="../../src/msie3.gif" width="30" height="30" alt="MS IE 3.0" title="MS IE 3.0"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"> <a class="an" name="onabort">onabort (bei Abbruch)</a></h2>
<p>Ist fr den Fall gedacht, dass ein Anwender im Browser den Stop-Button drckt, obwohl noch nicht alle Grafiken geladen wurden.</p>
<p>Nach JavaScript (Netscape) erlaubt in folgendem HTML-Tag:<br>
<code><img></code></p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/onabort.htm">Anzeigebeispiel: So sieht's aus</a> (<i>beim Aufruf sofort ESC drcken!</i>)</p>
<pre>
<html><head><title>Test</title>
</head><body>
<img src="onabort.jpg" width="400" height="600" alt="Grafik"
onabort="alert('Schade, dass Sie das Bild nicht sehen wollen')">
</body></html>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Im Beispiel wird eine Grafik in HTML referenziert. Fr den Fall, dass der Anwender den Stop-Button im Browser drckt, bevor die Grafik ganz geladen ist, wird mit <code>alert()</code> eine Meldung ausgegeben.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Dieser Event-Handler gehrt nicht zum HTML-Standard und wird von Netscape 6, Opera, Safari und Konqueror nicht interpretiert.</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/js10.gif" width="30" height="30" alt="JavaScript 1.0" title="JavaScript 1.0"><img src="../../src/netsc2.gif" width="30" height="30" alt="Netscape 2.0" title="Netscape 2.0"><img src="../../src/msie3.gif" width="30" height="30" alt="MS IE 3.0" title="MS IE 3.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="onblur">onblur (beim Verlassen)</a></h2>
<p>Fr den Fall, dass ein Element zuvor aktiviert war und der Anwender es jetzt verlsst.</p>
<p>Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags:<br>
<code><body> <frameset> <input> <layer> <select> <textarea></code></p>
<p>Nach HTML 4.0 erlaubt in folgenden HTML-Tags:<br>
<code><a> <area> <button> <input> <label> <select> <textarea></code></p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/onblur.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<html><head><title>Test</title>
</head><body>
<form name="Test" action="">
Name: <input type="text" name="Eingabe" onblur="CheckInhalt(this.value)"><br>
Name oder nichts eingeben und dann woanders hinklicken!
</form>
<script type="text/javascript">
document.Test.Eingabe.focus();
function CheckInhalt (Feld) {
if (Feld == "") {
alert("Namensfeld muss einen Inhalt haben!");
document.Test.Eingabe.focus();
return false;
}
}
</script>
</body></html>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Im Beispiel wird ein Formular definiert, das ein Eingabefeld enthlt. Unterhalb des Formulars ist ein JavaScript-Bereich notiert. Der Bereich wird deshalb unterhalb des Formulars definiert, weil zu Beginn des Bereichs gleich eine Anweisung ausgefhrt wird, die die Existenz des Formulars bereits voraussetzt. Diese Anweisung (<code>document.Test.Eingabe.focus();</code>) setzt den Cursor in das Eingabefeld. Dort soll der Anwender seinen Namen eingeben. Klickt er dann irgendwo anders hin, wird der Event-Handler <code>onblur</code> aktiv, der im HTML-Tag des Eingabefeldes notiert ist. Dabei wird die Funktion <code>CheckInhalt()</code> aufgerufen, die ebenfalls in dem JavaScript-Bereich notiert ist. Diese Funktion fragt ab, ob die ihr bergebene Zeichenkette, der Inhalt des Namensfeldes, leer ist. Wenn ja, wird ein Meldungsfenster ausgegeben, und der Cursor wird wieder in das Feld positioniert.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Unter Opera 5.02 erzeugt die Verwendung dieses Beispieles eine unendliche Schleife, da die Besttigung des Meldungsfensters ebenfalls den Event-Handler auslst. Mit Opera 5.12 wurde dieses Problem behoben.</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/js10.gif" width="30" height="30" alt="JavaScript 1.0" title="JavaScript 1.0"><img src="../../src/netsc2.gif" width="30" height="30" alt="Netscape 2.0" title="Netscape 2.0"><img src="../../src/msie3.gif" width="30" height="30" alt="MS IE 3.0" title="MS IE 3.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="onchange">onchange (bei erfolgter nderung)</a></h2>
<p>Fr den Fall, dass ein Element einen genderten Wert erhalten hat.</p>
<p>Nach HTML 4.0 und JavaScript 1.2 (Netscape) erlaubt in folgenden HTML-Tags:<br>
<code><input> <select> <textarea></code></p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/onchange.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<html><head><title>Test</title>
</head><body>
<form name="Test" action="">
<textarea rows="5" cols="40" onchange="alert(this.value)">Bearbeiten Sie diesen Text hier
und klicken Sie dann woanders hin! Oder lassen Sie ihn unbearbeitet und
klicken dann woanders hin!</textarea>
</body></html>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Im Beispiel wird ein Formular mit einem mehrzeiligen Eingabefeld definiert. Wenn der Anwender irgendetwas in das Feld eingibt und anschlieend woanders hin klickt, wird der Event-Handler <code>onchange</code> aktiv, der im HTML-Tag des mehrzeiligen Eingabefeldes notiert ist. Im Beispiel wird einfach der aktuelle genderte Inhalt des Feldes in einem Meldungsfenster ausgegeben.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Dieser Event-Handler wird nicht sofort bei der nderung eines Formularfeldes aufgerufen, sondern erst nachdem ein anderes Feld nach der nderung angewhlt wurde.</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/js10.gif" width="30" height="30" alt="JavaScript 1.0" title="JavaScript 1.0"><img src="../../src/netsc2.gif" width="30" height="30" alt="Netscape 2.0" title="Netscape 2.0"><img src="../../src/msie3.gif" width="30" height="30" alt="MS IE 3.0" title="MS IE 3.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="onclick">onclick (beim Anklicken)</a></h2>
<p>Fr den Fall, dass der Anwender ein Element anklickt.</p>
<p>Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags:<br>
<code><a> <area> <input> <textarea></code></p>
<p>Nach HTML 4.0 erlaubt in folgenden HTML-Tags:<br>
<code><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></code></p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/onclick.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<html><head><title>Test</title>
</head><body>
<form name="Test" action="">
<input type="text" size="30" name="Ausgabe" readonly="readonly"><br>
<input type="button" value="Letzter Update"
onclick="this.form.Ausgabe.value = document.lastModified">
</form>
</body></html>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Im Beispiel wird ein Formular mit einem Eingabefeld (das jedoch auf "readonly", also nur Lesen gesetzt wird) und einem Button definiert. Der Button hat die Aufschrift "Letzter Update". Beim Anklicken des Buttons wird der Event-Handler <code>onclick</code> aktiv, der im HTML-Tag des Buttons definiert ist. Im Beispiel wird daraufhin in das Eingabefeld der Zeitpunkt der letzten nderung am Dokument geschrieben.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Konqueror 3.1 interpretiert zwar diesen Event-Handler, kann aber das Anzeigebeispiel nicht darstellen, da <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../objekte/document.htm#last_modified">lastModified</a> nicht interpretiert werden kann.</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/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/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/saf12.gif" width="30" height="30" alt="Safari 1.2" title="Safari 1.2"> <a class="an" name="ondblclick">ondblclick (bei doppeltem Anklicken)</a></h2>
<p>Fr den Fall, dass der Anwender ein Element doppelt anklickt.</p>
<p>Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags:<br>
<code><a> <area> <input> <textarea></code></p>
<p>Nach HTML 4.0 erlaubt in folgenden HTML-Tags:<br>
<code><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></code></p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/ondblclick.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<html><head><title>Test</title>
</head><body>
<form name="Rechnen" action="">
Wert: <input type="text" size="10" name="Wert">
<input type="button" value="Doppelklick = hoch 2"
ondblclick="document.Rechnen.Wert.value = document.Rechnen.Wert.value * document.Rechnen.Wert.value">
</form>
</body></html>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Im Beispiel wird ein Formular mit einem Eingabefeld und einem Button definiert. Im Button ist der Event-Handler <code>ondblclick</code> notiert. Der Button reagiert daher nur auf Doppelklick. Wenn der Anwender doppelt auf den Button klickt, wird von dem Wert, den er in dem Eingabefeld eingegeben hat, das Quadrat errechnet, und das Ergebnis wird wiederum in das Eingabefeld geschrieben.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Bei Netscape-Browsern unter Macintosh ist dieser Event-Handler nicht verfgbar! Safari erkennt diesen Event-Handler nicht an Buttons.</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/js11.gif" width="30" height="30" alt="JavaScript 1.1" title="JavaScript 1.1"><img src="../../src/netsc3.gif" width="30" height="30" alt="Netscape 3.0" title="Netscape 3.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/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"> <a class="an" name="onerror">onerror (im Fehlerfall)</a></h2>
<p>Eignet sich zum Abfangen von Fehlermeldungen und zum Ersetzen solcher Meldungen durch eigene. Beachten Sie jedoch, dass dadurch nicht die Fehler selbst beseitigt werden! <code>onerror</code> ist vor allem zum Handling von Fehlern beim Laden von Grafiken gedacht.</p>
<p>Nach JavaScript erlaubt in folgendem HTML-Tag:<br>
<code><img></code></p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/onerror.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<html><head><title>Test</title>
</head><body>
<img src="gibtsnicht.gif" onerror="alert('an dieser Stelle
sollte eine Grafik stehen,\n doch leider kann sie nicht angezeigt werden!')">
</body></html>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Im Beispiel wird in einer Grafikreferenz der Event-Handler <code>onerror</code> notiert. Er wird dann aktiv, wenn die Grafikdatei nicht existiert oder nicht angezeigt werden kann. Im Beispiel wird dann ein entsprechendes Meldungsfenster ausgegeben.</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/js10.gif" width="30" height="30" alt="JavaScript 1.0" title="JavaScript 1.0"><img src="../../src/netsc2.gif" width="30" height="30" alt="Netscape 2.0" title="Netscape 2.0"><img src="../../src/msie3.gif" width="30" height="30" alt="MS IE 3.0" title="MS IE 3.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="onfocus">onfocus (beim Aktivieren)</a></h2>
<p>Tritt ein, wenn der Anwender ein Element aktiviert.</p>
<p>Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags:<br>
<code><body> <frame> <input> <layer> <select> <textarea></code></p>
<p>Nach HTML 4.0 erlaubt in folgenden HTML-Tags:<br>
<code><a> <area> <button> <input> <label> <select> <textarea></code></p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/onfocus.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<html><head><title>Test</title>
</head><body>
<form name="Test" action="">
<input type="text" size="30" onfocus="this.value = 'Hier Ihren Namen eingeben'"><br>
<input type="text" size="30" onfocus="this.value = 'Hier Ihren Wohnort eingeben'"><br>
<input type="text" size="30" onfocus="this.value = 'Hier Ihr Alter eingeben'"><br>
</form>
</body></html>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>In dem Beispiel wird ein Formular definiert, das drei Eingabefelder enthlt. Da die Felder unbeschriftet sind, hat der Anwender keine Ahnung, was in die einzelnen Felder eingeben kann. Bewegt er den Cursor aus Neugier doch in eines der Eingabefelder, wird der Event-Handler <code>onfocus</code> des jeweiligen Feldes aktiv. Dabei wird in das jeweilige Feld eine Aufforderung geschrieben, was in dem Feld einzugeben 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/js12.gif" width="30" height="30" alt="JavaScript 1.2" title="JavaScript 1.2"><img src="../../src/netsc4x.gif" width="30" height="30" alt="Netscape 4.x" title="Netscape 4.x"><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"> <a class="an" name="onkeydown">onkeydown (bei gedrckter Taste)</a></h2>
<p>Tritt ein, wenn der Anwender, whrend er ein Element aktiviert hat, eine Taste drckt.</p>
<p>Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags:<br>
<code><input> <textarea></code></p>
<p>Nach HTML 4.0 erlaubt in folgenden HTML-Tags:<br>
<code><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></code></p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/onkeydown.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<html><head><title>Test</title>
<script type="text/javascript">
function Aktualisieren () {
document.Test.Kontrolle.value = document.Test.Eingabe.value.length + 1;
return true;
}
</script>
</head><body>
<form name="Test" action="">
Kurzbeschreibung Ihrer Homepage (max 50 Zeichen):<br>
<input type="text" name="Eingabe" size="40" onkeydown="Aktualisieren(this.value)">
<input type="text" value="0" readonly="readonly" size="3" name="Kontrolle"><br>
<input type="reset">
</form>
</body></html>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Im Beispiel wird ein Formular definiert, in dem der Anwender eine Kurzbeschreibung seiner Homepage in einem Eingabefeld abliefern kann. Der Text soll maximal 50 Zeichen lang sein. Damit der Anwender nicht mitzhlen muss, gibt es ein kleines Eingabefeld nebendran, in dem nach jedem Tastendruck ausgegeben wird, wie viele Zeichen bereits eingegeben wurden. Dazu ist in dem Eingabefeld mit Namen <code>Eingabe</code> der Event-Handler <code>onkeydown</code> notiert. Er bewirkt, dass, solange der Anwender in dem Formularfeld etwas eingibt, bei jedem Tastendruck die Funktion <code>Aktualisieren()</code> aufgerufen wird, die im Dateikopf in einem Script-Bereich definiert ist. Diese Funktion errechnet aus <code>document.Test.Eingabe.value.length + 1</code>, wie viele Zeichen bereits eingegeben wurden, und schreibt eine entsprechende Ausgabe in das dafr vorgesehene "Eingabe"-Feld.</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/netsc4x.gif" width="30" height="30" alt="Netscape 4.x" title="Netscape 4.x"><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"> <a class="an" name="onkeypress">onkeypress (bei gedrckt gehaltener Taste)</a></h2>
<p>Tritt ein, wenn der Anwender eine Taste drckt und diese gedrckt hlt.</p>
<p>Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags:<br>
<code><input> <textarea></code></p>
<p>Nach HTML 4.0 erlaubt in folgenden HTML-Tags:<br>
<code><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></code></p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/onkeypress.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<html><head><title>Test</title>
</head><body>
<form name="Test" action="">
<input type="text" size="30" name="Eingabe"
onkeypress="alert(this.value)">
</form>
</body></html>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Im Beispiel ist ein Formular mit einem Eingabefeld definiert. Wenn der Anwender in dem Eingabefeld etwas eingibt, wird bei jedem Tastendruck in einem Meldungsfenster der aktuelle Wert des Formularfeldes ausgegeben. Dazu ist in dem Eingabefeld der Event-Handler <code>onkeypress</code> notiert. Er tritt in Aktion, wenn eine Taste gedrckt und gedrckt gehalten wird.<br>
In Netscape 4.x und Opera 5 wird dieser Event-Handler stets <b>nach</b> dem Event-Handler <code>onkeydown</code> ausgefhrt. Gibt der Event-Handler <code>onkeydown</code> den Wert <code>false</code> zurck, so wird unter Netscape die Ausfhrung des Event-Handlers <code>onkeypress</code> unterdrckt. Im Internet Explorer unterdrckt der Event-Handler <code>onkeypress</code> den Event-Handler <code>onkeydown</code>.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Im Internet Explorer knnen Sie zustzlich die Eigenschaften des <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../objekte/event.htm">event</a>-Objekts 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/netsc4x.gif" width="30" height="30" alt="Netscape 4.x" title="Netscape 4.x"><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"> <a class="an" name="onkeyup">onkeyup (bei losgelassener Taste)</a></h2>
<p>Tritt ein, wenn der Anwender eine Taste gedrckt hat und diese wieder loslsst.</p>
<p>Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags:<br>
<code><input> <textarea></code></p>
<p>Nach HTML 4.0 erlaubt in folgenden HTML-Tags:<br>
<code><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></code></p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/onkeyup.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<html><head><title>Test</title>
</head><body>
<form name="Test" action="">
<input type="text" size="30" name="Eingabe"
onkeyup="this.form.Ausgabe.value = this.value"><br>
<input type="text" readonly="readonly" size="30" name="Ausgabe"><br>
<input type="reset">
</form>
</body></html>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Im Beispiel wird ein Formular definiert, das zwei Eingabefelder mit den Namen <code>Eingabe</code> und <code>Ausgabe</code> enthlt. Wenn der Anwender in dem oberen Feld, also dem, das fr die Eingabe gedacht ist, etwas eingibt, wird der Wert automatisch Zeichen fr Zeichen in das untere, also das Ausgabefeld bernommen. Dazu ist im Eingabefeld der Event-Handler <code>onkeyup</code> notiert. Dieser Event-Handler tritt in Aktion, wenn der Anwender in dem Feld eine Taste gedrckt und wieder losgelassen hat, was ja bei jedem eingegebenen Zeichen der Fall ist. Mit <code>this.form.Ausgabe.value=this.value</code> wird dem Ausgabefeld der aktuelle Wert des Eingabefeldes zugewiesen.</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/js10.gif" width="30" height="30" alt="JavaScript 1.0" title="JavaScript 1.0"><img src="../../src/netsc2.gif" width="30" height="30" alt="Netscape 2.0" title="Netscape 2.0"><img src="../../src/msie3.gif" width="30" height="30" alt="MS IE 3.0" title="MS IE 3.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="onload">onload (beim Laden einer Datei)</a></h2>
<p>Tritt ein, wenn eine HTML-Datei geladen wird.</p>
<p>Nach JavaScript (Netscape) und HTML 4.0 erlaubt in folgenden HTML-Tags:<br>
<code><frameset> <body></code></p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/onload.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<html><head><title>Test</title>
<script type="text/javascript">
function NaviFenster () {
Navigation = window.open("navigat.htm", "Navigation", "height=200,width=300");
Navigation.focus();
}
</script>
</head>
<body onload="NaviFenster()">
<h1>Seite mit "Fernbedienung"</h1>
</body></html>
</pre>
<h3 class="xmp">Beispiel - Datei <var>navigat.htm</var>:</h3>
<pre>
<html><head><title>Test</title>
</head><body>
<a href="javascript:void(opener.location.href = '../../../index.htm');">SELFHTML</a><br>
<a href="javascript:void(opener.location.href = '../../index.htm');">JavaScript</a><br>
<a href="javascript:void(opener.location.href = '../index.htm');">Sprachelemente</a><br>
</body></html>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Im Beispiel wird beim Einlesen der HTML-Datei ein zweites Fenster geffnet, das zum Beispiel als "Fernbedienung" des Hauptfensters dienen knnte. Dazu ist im einleitenden <code><body></code>-Tag der Event-Handler <code>onload</code> notiert. Er ruft die Funktion <code>NaviFenster()</code> auf, die in einem JavaScript-Bereich im Dateikopf definiert ist. Innerhalb dieser Funktion steht der Befehl zum ffnen des Zweitfensters. Das Fenster erhlt auch gleich den Fokus (wird zum aktiven Fenster), so dass es im Vordergrund des Hauptfensters zu sehen ist. Ins Zweitfenster wird die Datei <var>navigat.htm</var> geladen. Diese enthlt Verweise mit dem "Event-Handler" <img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#javascript">javascript:</a>. Beim Ausfhren des Verweises wird im Elternfenster des Zweitfensters, markiert durch den reservierten Fensternamen <code>opener</code>, mit <code>document.location.href</code> eine Seite geladen. Die Anweisung <code>opener.location.href='../index.htm'</code> gibt den URI der zu ladenen Datei zurck. Mit Hilfe des Operators <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="operatoren.htm#void">void</a> wird dieser unterdrckt. Dadurch werden Anzeigefehler vermieden.</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/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"> <a class="an" name="onmousedown">onmousedown (bei gedrckter Maustaste)</a></h2>
<p>Tritt ein, wenn der Anwender die Maustaste gedrckt hlt.</p>
<p>Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags:<br>
<code><input type="button"> <a></code></p>
<p>Nach HTML 4.0 erlaubt in folgenden HTML-Tags:<br>
<code><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></code></p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/onmousedown.htm">Anzeigebeispiel: So sieht's aus</a> (<i>auf Verweis klicken, Maus gedrckt halten und auf Statuszeile achten!</i>)</p>
<pre>
<html><head><title>Test</title>
</head><body>
<a href="../../../index.htm"
onmousedown="window.status = 'Verweis zur Startseite'; return true;">Verweis</a>
</body></html>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Das Beispiel enthlt einen Verweis. Bei vollstndig erfolgtem Anklicken des Verweises wird ganz normal das Verweisziel, im Beispiel also <code>../../../index.htm</code>, aufgerufen. Vorher jedoch, sobald der Anwender die Maustaste gedrckt und bevor er sie wieder losgelassen hat, tritt der Event-Handler <code>onmousedown</code> in Aktion, der im Verweis-Tag notiert ist. Im Beispiel wird dabei in der Statuszeile des Browsers ausgegeben: <code>Verweis zur Homepage</code>.</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/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/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/saf12.gif" width="30" height="30" alt="Safari 1.2" title="Safari 1.2"> <a class="an" name="onmousemove">onmousemove (bei weiterbewegter Maus)</a></h2>
<p>Tritt ein, wenn der Anwender die Maus bewegt, unabhngig davon, ob die Maustaste gedrckt ist oder nicht.</p>
<p>Nach JavaScript (Netscape) bislang nicht in HTML-Tags mglich, sondern nur im Zusammenhang mit dem <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../objekte/event.htm">event</a>-Objekt.</p>
<p>Nach HTML 4.0 erlaubt in folgenden HTML-Tags:<br>
<code><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></code></p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/onmousemove.htm">Anzeigebeispiel: So sieht's aus</a> (<i>Maus ber den Text bewegen und auf Statuszeile achten!</i>)</p>
<pre>
<html><head><title>Test</title>
<script type="text/javascript">
function Mauskontrolle (Element) {
var Pos = Element.offsetLeft + "/" + Element.offsetTop;
window.status = Pos;
return true;
}
</script>
</head><body>
<p onmousemove="Mauskontrolle(this)">Hier ein kleiner Text</p>
</body></html>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Das Beispiel zeigt, wie Event-Handler auch in HTML-Tags funktionieren, bei denen das frher nicht mglich war. In dem Beispiel wird ein Textabsatz definiert. Innerhalb des Textabsatzes ist der Event-Handler <code>onmousemove</code> notiert. Der Event-Handler tritt in Aktion, solange der Anwender die Maus im Anzeigebereich des Textabsatzes bewegt. Dann wird so oft wie mglich die Funktion <code>Mauskontrolle()</code> aufgerufen, die in einem Script-Bereich im Dateikopf notiert ist. Dieser Funktion wird als Parameter mittels <code>this</code> das betroffene Element bergeben. Die Funktion bewirkt, dass in der Statuszeile des Browsers jeweils die Koordinaten der linken oberen Ecke des Elementes angezeigt werden.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Opera 5 kennt den Event-Handler <code>onmousemove</code> zwar, interpretiert das obige Beispiel aber nicht, weil Opera die Eigenschaft <code>window.status</code> erst ab Version 6 untersttzt.</p>
<p>Im Internet Explorer knnen Sie zustzlich die Eigenschaften des <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../objekte/event.htm">event</a>-Objekts 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/js11.gif" width="30" height="30" alt="JavaScript 1.1" title="JavaScript 1.1"><img src="../../src/netsc3.gif" width="30" height="30" alt="Netscape 3.0" title="Netscape 3.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"> <a class="an" name="onmouseout">onmouseout (beim Verlassen des Elements mit der Maus)</a></h2>
<p>Tritt ein, wenn der Anwender mit der Maus ber ein Element fhrt und dieses dabei verlsst.</p>
<p>Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags:<br>
<code><a> <area></code></p>
<p>Nach HTML 4.0 erlaubt in folgenden HTML-Tags:<br>
<code><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></code></p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/onmouseout.htm">Anzeigebeispiel: So sieht's aus</a> (<i>Maus ber den Link und wieder weg bewegen!</i>)</p>
<pre>
<html><head><title>Test</title>
</head><body>
<a href="http://aktuell.de.selfhtml.org/news.htm"
onmouseout="alert('Die News sollten Sie ruhig mal besuchen')"><b>News</b></a>
</body></html>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Im Beispiel ist ein Verweis definiert. Wenn der Anwender mit der Maus ber den Verweis fhrt, ihn dann aber nicht anklickt, sondern die Maus doch wieder von dem Verweis entfernt, tritt der Event-Handler <code>onMousout</code> in Aktion. Im Beispiel wird dann ein Meldungsfenster ausgegeben, dass den Anwender darauf hinweist, dass er die News-Seite ruhig mal aufrufen soll.</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/js10.gif" width="30" height="30" alt="JavaScript 1.0" title="JavaScript 1.0"><img src="../../src/netsc2.gif" width="30" height="30" alt="Netscape 2.0" title="Netscape 2.0"><img src="../../src/msie3.gif" width="30" height="30" alt="MS IE 3.0" title="MS IE 3.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="onmouseover">onmouseover (beim berfahren des Elements mit der Maus)</a></h2>
<p>Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags:<br>
<code><a> <area></code></p>
<p>Nach HTML 4.0 erlaubt in folgenden HTML-Tags:<br>
<code><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></code></p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/onmouseover.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<html><head><title>Test</title>
</head><body>
<h1 id="Test"
onmouseover="this.innerHTML = 'Sehen Sie?'"
onmouseout="this.innerHTML = 'Ich bin dynamisch'">Ich bin dynamisch</h1>
</body></html>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Das Beispiel zeigt, wie Event-Handler auch in HTML-Tags funktionieren, bei denen das bislang nicht mglich war. Das Beispiel funktioniert mit dem Internet Explorer ab Version 4.x und im Netscape Navigator ab Version 6, welche die Event-Handler nach HTML 4.0 weitgehend interpretieren. In dem Beispiel wird eine berschrift erster Ordnung definiert. Innerhalb der berschrift sind die Event-Handler <code>onmouseover</code> und <code>onmouseout</code> notiert. Der Event-Handler <code>onmouseover</code> tritt in Aktion, wenn der Anwender die Maus in den Anzeigebereich der berschrift bewegt, und <code>onmouseout</code> wird aktiv, wenn er die Maus wieder aus dem Anzeigebereich herausbewegt. Mit Hilfe von <code>this</code> nehmen Sie Bezug auf das <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="objekte.htm#this">aktuelle Objekt</a> und knnen mittels der Eigenschaft <code>innerHTML</code> mit jedem Aktivwerden eines der beiden Event-Handler den Text der berschrift dynamisch austauschen. Bei <code>onmouseover</code> wird ein anderer Text angezeigt, bei <code>onmouseout</code> wieder der ursprngliche Text.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Auch Opera ab Version 5 interpretiert den Event-Handler nach HTML 4.0. Er kennt jedoch nicht die Eigenschaft <code>innerHTML</code>.</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/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"> <a class="an" name="onmouseup">onmouseup (bei losgelassener Maustaste)</a></h2>
<p>Tritt ein, wenn der Anwender die Maustaste gedrckt hat und sie nun wieder loslsst.</p>
<p>Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags:<br>
<code><input type="button"> <a></code></p>
<p>Nach HTML 4.0 erlaubt in folgenden HTML-Tags:<br>
<code><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></code></p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/onmouseup.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<html><head><title>Test</title>
</head><body>
<a href="../../../index.htm"
onmouseup="alert('Die Show beginnt JETZT'); window.location.href = '../../../index.htm'; return false">Verweis</a>
</body></html>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Im Beispiel ist ein Verweis notiert. Wenn der Anwender den Verweis anklickt und die Maustaste loslsst, also unmittelbar vor dem Laden der Seite, auf die verwiesen wird, geht ein Meldungsfenster auf, das den Anwender in aller Dramatik noch mal darauf hinweist, dass jetzt die Show beginnt. Dazu ist im einleitenden Verweis-Tag der Event-Handler <code>onmouseup</code> notiert. Wenn der in Aktion tritt, wird zunchst das Meldungsfenster angezeigt. Anschlieend wird die Datei <code>../../../index.htm</code> geladen. Die Anweisung <code>return false</code> verhindert, dass Browser, die den Event-Handler
<code>onmouseup</code> interpretieren, den <code>location.href</code>-Verweis ausfhren und <b>nicht</b> den gewhnlichen Verweis, der beim <code>href</code>-Attribut notiert 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/js11.gif" width="30" height="30" alt="JavaScript 1.1" title="JavaScript 1.1"><img src="../../src/netsc3.gif" width="30" height="30" alt="Netscape 3.0" title="Netscape 3.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"> <a class="an" name="onreset">onreset (beim Zurcksetzen des Formulars)</a></h2>
<p>Tritt ein, wenn der Anwender Eingaben in einem Formular verwerfen will.</p>
<p>Nach JavaScript (Netscape) erlaubt in folgendem HTML-Tag:<br>
<code><form></code></p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/onreset.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<html><head><title>Test</title>
<script type="text/javascript">
function ResetCheck () {
var chk = window.confirm("Wollen Sie alle Eingaben loeschen?");
return (chk);
}
</script>
</head><body>
<form name="Test" onreset="return ResetCheck()" action=""><pre>
Name: <input type="text" size="30"><br>
Idee: <input type="text" size="30"><br>
<input type="reset">
</pre></form>
</body></html>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Das Beispiel enthlt ein Formular, das unter anderem einen Abbrechen-Button (Reset-Button) enthlt. Beim Anklicken dieses Buttons werden normalerweise alle Eingaben im Formular gelscht. Im Beispiel ist jedoch im einleitenden <code><form></code>-Tag der Event-Handler <code>onreset</code> notiert. Dieser tritt in Aktion, wenn der Reset-Button angeklickt wird. Im Beispiel wird dann die Funktion <code>ResetCheck()</code> aufgerufen, die in einem Script-Bereich im Dateikopf steht. Diese Funktion fragt den Anwender in einem Besttigungsfenster (<code>window.confirm()</code>), ob er wirklich alle Eingaben in dem Formular lschen will. Besttigt er den Lschwunsch, gibt das Besttigungsfenster den Wert <code>true</code> zurck. Verneint er den Lschwunsch, wird <code>false</code> zurckgegeben. Der Rckgabewert wird in der Variablen <code>chk</code> gespeichert und diese wird wiederum von der Funktion <code>ResetCheck()</code> an den aufrufenden Event-Handler zurckgegeben. Der Effekt ist, dass die Formulareingaben nur gelscht werden, wenn <code>true</code> zurckgegeben wird.</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/js10.gif" width="30" height="30" alt="JavaScript 1.0" title="JavaScript 1.0"><img src="../../src/netsc2.gif" width="30" height="30" alt="Netscape 2.0" title="Netscape 2.0"><img src="../../src/msie3.gif" width="30" height="30" alt="MS IE 3.0" title="MS IE 3.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"> <a class="an" name="onselect">onselect (beim Selektieren von Text)</a></h2>
<p>Tritt ein, wenn der Anwender Text selektiert.</p>
<p>Nach JavaScript (Netscape) und HTML 4.0 erlaubt in folgenden HTML-Tags:<br>
<code><input> <textarea></code></p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/onselect.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<html><head><title>Test</title>
</head><body>
<form name="Test" action="">
<textarea cols="40" rows="10" name="Eingabe"
onselect="window.status = 'Mit der rechten Maustaste ber dem selektierten Text klicken!'; return true;">
Selektieren Sie einfach irgendwelchen Text aus diesem Text hier!</textarea>
</form>
</body></html>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Im Beispiel wird ein Formular mit einem mehrzeiligen Eingabefeld definiert, das mit Text vorbelegt ist. Wenn der Anwender Text in diesem Feld selektiert, wird mit <code>onselect</code> erreicht, dass in der Statuszeile (<code>window.status</code>) ein Hinweis ausgegeben wird, was der Anwender nun tun kann.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Safari, Opera 5 und Netscape 4.x interpretieren diesen Event-Handler 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/js10.gif" width="30" height="30" alt="JavaScript 1.0" title="JavaScript 1.0"><img src="../../src/netsc2.gif" width="30" height="30" alt="Netscape 2.0" title="Netscape 2.0"><img src="../../src/msie3.gif" width="30" height="30" alt="MS IE 3.0" title="MS IE 3.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="onsubmit">onsubmit (beim Absenden des Formulars)</a></h2>
<p>Tritt ein, wenn der Anwender ein Formular absendet.</p>
<p>Nach JavaScript (Netscape) erlaubt in folgendem HTML-Tag:<br>
<code><form></code></p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/onsubmit.htm">Anzeigebeispiel: So sieht's aus</a> (<i>nicht alle Felder ausfllen und Formular dann absenden!</i>)</p>
<pre>
<html><head><title>Test</title>
<script type="text/javascript">
function CheckInput () {
for (i = 0; i < document.forms[0].elements.length; ++i)
if (document.forms[0].elements[i].value == "") {
alert("Es wurden nicht alle Felder ausgefuellt!");
document.forms[0].elements[i].focus();
return false;
}
return true;
}
</script>
</head><body>
<form action="onsubmit.htm" onsubmit="return CheckInput();">
Feld 1: <input type="text" size="30"><br>
Feld 2: <input type="text" size="30"><br>
Feld 3: <input type="text" size="30"><br>
<input type="submit" value="absenden">
</form>
</body></html>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Das Beispiel enthlt ein Formular mit mehreren Eingabefeldern. Beim Absenden des Formulars, also beim Klicken auf den Submit-Button, wird jedoch erst mal berprft, ob in allen Feldern etwas eingegeben wurde. Wenn eines der Felder leergelassen wurde, wird das Formular nicht abgesendet. Stattdessen wird eine Fehlermeldung ausgegeben, und der Cursor wird in das erste nicht ausgefllte Eingabefeld positioniert. Dazu ist im einleitenden <code><form></code>-Tag der Event-Handler <code>onsubmit</code> notiert. Beim Absenden des Formulars wird dadurch die Funktion <code>CheckInput()</code> aufgerufen, die in einem Script-Bereich im Dateikopf notiert ist. Diese Funktion prft in einer <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="schleifen.htm#for">for-Schleife</a> alle einzelnen Formularfelder, ob diese einen leeren Inhalt haben (leere Zeichenkette <code>""</code>). Ist das der Fall, wird die Fehlermeldung ausgegeben und auf das entsprechende Formularfeld positioniert. An den aufrufenden Event-Handler <code>onsubmit</code> wird der Wert <code>false</code> zurckgegeben. Nur wenn alle Formularfelder ausgefllt wurden, wird <code>true</code> zurckgegeben. Dadurch wird entschieden, ob das Formular abgeschickt wird oder 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/js10.gif" width="30" height="30" alt="JavaScript 1.0" title="JavaScript 1.0"><img src="../../src/netsc2.gif" width="30" height="30" alt="Netscape 2.0" title="Netscape 2.0"><img src="../../src/msie3.gif" width="30" height="30" alt="MS IE 3.0" title="MS IE 3.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="onunload">onunload (beim Verlassen der Datei)</a></h2>
<p>Tritt ein, wenn eine HTML-Datei verlassen wird.</p>
<p>Nach JavaScript (Netscape) und HTML 4.0 erlaubt in folgenden HTML-Tags:<br>
<code><frameset> <body></code></p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/onunload.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<html><head><title>Test</title>
<script type="text/javascript">
var Start = new Date();
var Startzeit = Start.getTime();
function Aufenthalt () {
var Ende = new Date();
var Endzeit = Ende.getTime();
var Aufenthalt = Math.floor((Endzeit - Startzeit) / 1000);
alert("Sie waren " + Aufenthalt + " Sekunden auf dieser Seite");
}
</script>
</head>
<body onunload="Aufenthalt()">
<h1>Einen langen Aufenthalt auf dieser Seite!</h1>
<p><a href="../../../index.htm">Und dann aber nix wie weg!</a></p>
</body></html>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Im Beispiel ist im Dateikopf ein JavaScript-Bereich definiert. Gleich beim Einlesen der Datei wird mit Hilfe des <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../objekte/date.htm">Date</a>-Objekts der aktuelle Zeitpunkt ermittelt und in der Variablen <code>Startzeit</code> gespeichert. Im einleitenden <code><body></code>-Tag der Datei ist der Event-Handler <code>onunload</code> notiert. Er tritt in Aktion, wenn die Datei - zum Beispiel durch Anklicken eines Verweises zu einer anderen Seite - verlassen wird. In diesem Fall wird im Beispiel die Funktion <code>Aufenthalt()</code> aufgerufen, die ebenfalls in dem Script-Bereich im Dateikopf steht. Diese Funktion ermittelt wieder den aktuellen Zeitpunkt, ermittelt dann aber noch die Differenz zwischen gespeicherter Startzeit und der jetzt ermittelten "Endzeit" und gibt das Ergebnis in einem Meldungsfenster aus.</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/js10.gif" width="30" height="30" alt="JavaScript 1.0" title="JavaScript 1.0"><img src="../../src/netsc2.gif" width="30" height="30" alt="Netscape 2.0" title="Netscape 2.0"><img src="../../src/msie3.gif" width="30" height="30" alt="MS IE 3.0" title="MS IE 3.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="javascript">javascript: (bei Verweisen)</a></h2>
<p>Dies ist kein Event-Handler im engeren Sinn. Es handelt sich um eine Syntax, die eingefhrt wurde, um JavaScript-Code als Verweisziel zu notieren.</p>
<p>Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags:<br>
<code><a> <area></code></p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/javascript.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<html><head><title>Test</title>
</head>
<body>
<a href="javascript:alert(document.lastModified)">Letzter Update</a>
</body></html>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Das Beispiel gibt bei Anklicken des Verweises ein Meldungsfenster mit dem Zeitpunkt des letzten Updates der Datei aus. Um einen Verweis dieser Art zu notieren, notieren Sie hinter im Attribut <code>href</code> in Anfhrungszeichen das Schlsselwort <code>javascript</code>, gefolgt von einem Doppelpunkt <code>:</code> und dahinter eine oder mehrere JavaScript-Anweisungen. Bei mehreren Anweisungen ist es jedoch besser, diese in einer Funktion zu notieren und beim Verweis dann diese Funktion aufzurufen.</p>
<h3>Beachten Sie:</h3>
<p>Diese Form des Aufrufes erfordert zwingend den Rckgabewert <code>undefined</code>. Ist dies nicht der Fall, wird der jeweilige Rckwert der JavaScript-Anweisung in das Dokument geschrieben und die aktuelle Seite gelscht.<br>
Sie knnen gegebenenfalls unter Verwendung des Operators <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="operatoren.htm#void">void</a> den Rckgabewert einer Anweisung unterdrcken und auf <code>undefined</code> setzen.</p>
<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="../objekte/hinweise.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="../objekte/hinweise.htm">Hinweise zur JavaScript-Objektreferenz</a>
</td></tr>
<tr>
<td class="doc"><a href="reserviert.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="reserviert.htm">Reservierte Wrter</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">JavaScript/DOM</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="index.htm">Sprachelemente</a></td>
</tr>
</table>
<p>© 2005 <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../editorial/impressum.htm">Impressum</a></p>
</body>
</html>
|
