forked from w3c/uievents
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
10143 lines (10086 loc) · 902 KB
/
index.html
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
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html><html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>UI Events </title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="WD" name="w3c-status">
<link href="../default.css" rel="stylesheet" type="text/css">
<link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
<link href="styles.css" rel="stylesheet" type="text/css">
<link href="https://www.w3.org/StyleSheets/TR/2016/W3C-WD" rel="stylesheet" type="text/css">
<meta content="Bikeshed version 6465e1e635d337ce46d971a19374b9e5bbfa26b6" name="generator">
<style>/* style-md-lists */
/* This is a weird hack for me not yet following the commonmark spec
regarding paragraph and lists. */
[data-md] > :first-child {
margin-top: 0;
}
[data-md] > :last-child {
margin-bottom: 0;
}</style>
<style>/* style-selflinks */
.heading, .issue, .note, .example, li, dt {
position: relative;
}
a.self-link {
position: absolute;
top: 0;
left: calc(-1 * (3.5rem - 26px));
width: calc(3.5rem - 26px);
height: 2em;
text-align: center;
border: none;
transition: opacity .2s;
opacity: .5;
}
a.self-link:hover {
opacity: 1;
}
.heading > a.self-link {
font-size: 83%;
}
li > a.self-link {
left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
top: auto;
left: auto;
opacity: 0;
width: 1.5em;
height: 1.5em;
background: gray;
color: white;
font-style: normal;
transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
opacity: 1;
}
dfn > a.self-link:hover {
color: black;
}
a.self-link::before { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before { content: "#"; }</style>
<style>/* style-counters */
body {
counter-reset: example figure issue;
}
.issue {
counter-increment: issue;
}
.issue:not(.no-marker)::before {
content: "Issue " counter(issue);
}
.example {
counter-increment: example;
}
.example:not(.no-marker)::before {
content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
content: "Invalid Example" counter(example);
}
figcaption {
counter-increment: figure;
}
figcaption:not(.no-marker)::before {
content: "Figure " counter(figure) " ";
}</style>
<style>/* style-autolinks */
.css.css, .property.property, .descriptor.descriptor {
color: #005a9c;
font-size: inherit;
font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
content: "‘";
}
.css::after, .property::after, .descriptor::after {
content: "’";
}
.property, .descriptor {
/* Don't wrap property and descriptor names */
white-space: nowrap;
}
.type { /* CSS value <type> */
font-style: italic;
}
pre .property::before, pre .property::after {
content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
content: "’";
}
[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
content: "";
}
[data-link-type=element],
[data-link-type=element-attr] {
font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after { content: ">" }
[data-link-type=biblio] {
white-space: pre;
}</style>
<style>/* style-dfn-panel */
.dfn-panel {
position: absolute;
z-index: 35;
height: auto;
width: -webkit-fit-content;
width: fit-content;
max-width: 300px;
max-height: 500px;
overflow: auto;
padding: 0.5em 0.75em;
font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
background: #DDDDDD;
color: black;
border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
display: inline-block;
position: fixed;
left: .5em;
bottom: 2em;
margin: 0 auto;
max-width: calc(100vw - 1.5em - .4em - .5em);
max-height: 30vh;
}
.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */
pre.idl.highlight { color: #708090; }
.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
.highlight .c { color: #708090 } /* Comment */
.highlight .k { color: #990055 } /* Keyword */
.highlight .l { color: #000000 } /* Literal */
.highlight .n { color: #0077aa } /* Name */
.highlight .o { color: #999999 } /* Operator */
.highlight .p { color: #999999 } /* Punctuation */
.highlight .cm { color: #708090 } /* Comment.Multiline */
.highlight .cp { color: #708090 } /* Comment.Preproc */
.highlight .c1 { color: #708090 } /* Comment.Single */
.highlight .cs { color: #708090 } /* Comment.Special */
.highlight .kc { color: #990055 } /* Keyword.Constant */
.highlight .kd { color: #990055 } /* Keyword.Declaration */
.highlight .kn { color: #990055 } /* Keyword.Namespace */
.highlight .kp { color: #990055 } /* Keyword.Pseudo */
.highlight .kr { color: #990055 } /* Keyword.Reserved */
.highlight .kt { color: #990055 } /* Keyword.Type */
.highlight .ld { color: #000000 } /* Literal.Date */
.highlight .m { color: #000000 } /* Literal.Number */
.highlight .s { color: #a67f59 } /* Literal.String */
.highlight .na { color: #0077aa } /* Name.Attribute */
.highlight .nc { color: #0077aa } /* Name.Class */
.highlight .no { color: #0077aa } /* Name.Constant */
.highlight .nd { color: #0077aa } /* Name.Decorator */
.highlight .ni { color: #0077aa } /* Name.Entity */
.highlight .ne { color: #0077aa } /* Name.Exception */
.highlight .nf { color: #0077aa } /* Name.Function */
.highlight .nl { color: #0077aa } /* Name.Label */
.highlight .nn { color: #0077aa } /* Name.Namespace */
.highlight .py { color: #0077aa } /* Name.Property */
.highlight .nt { color: #669900 } /* Name.Tag */
.highlight .nv { color: #222222 } /* Name.Variable */
.highlight .ow { color: #999999 } /* Operator.Word */
.highlight .mb { color: #000000 } /* Literal.Number.Bin */
.highlight .mf { color: #000000 } /* Literal.Number.Float */
.highlight .mh { color: #000000 } /* Literal.Number.Hex */
.highlight .mi { color: #000000 } /* Literal.Number.Integer */
.highlight .mo { color: #000000 } /* Literal.Number.Oct */
.highlight .sb { color: #a67f59 } /* Literal.String.Backtick */
.highlight .sc { color: #a67f59 } /* Literal.String.Char */
.highlight .sd { color: #a67f59 } /* Literal.String.Doc */
.highlight .s2 { color: #a67f59 } /* Literal.String.Double */
.highlight .se { color: #a67f59 } /* Literal.String.Escape */
.highlight .sh { color: #a67f59 } /* Literal.String.Heredoc */
.highlight .si { color: #a67f59 } /* Literal.String.Interpol */
.highlight .sx { color: #a67f59 } /* Literal.String.Other */
.highlight .sr { color: #a67f59 } /* Literal.String.Regex */
.highlight .s1 { color: #a67f59 } /* Literal.String.Single */
.highlight .ss { color: #a67f59 } /* Literal.String.Symbol */
.highlight .vc { color: #0077aa } /* Name.Variable.Class */
.highlight .vg { color: #0077aa } /* Name.Variable.Global */
.highlight .vi { color: #0077aa } /* Name.Variable.Instance */
.highlight .il { color: #000000 } /* Literal.Number.Integer.Long */
</style>
<body class="h-entry">
<div class="head">
<header>
<p data-fill-with="logo"><a href="http://www.w3.org/"><img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"></a></p>
<h1>UI Events</h1>
<h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">W3C Working Draft, <time class="dt-updated" datetime="2017-09-15">15 September 2017</time></span></h2>
</header>
<div data-fill-with="spec-metadata">
<dl>
<dt>This version:
<dd><a class="u-url" href="https://www.w3.org/TR/2017/WD-uievents-20170915/">https://www.w3.org/TR/2017/WD-uievents-20170915/</a>
<dt>Latest published version:
<dd><a href="http://www.w3.org/TR/uievents/">http://www.w3.org/TR/uievents/</a>
<dt>Editor's Draft:
<dd><a href="https://w3c.github.io/uievents/">https://w3c.github.io/uievents/</a>
<dt>Previous Versions:
<dd><a href="" rel="previous"></a>
<dd><a href="https://www.w3.org/TR/2015/WD-uievents-20151215/" rel="previous">https://www.w3.org/TR/2015/WD-uievents-20151215/</a>
<dd><a href="http://www.w3.org/TR/2015/WD-uievents-20150428/" rel="previous">http://www.w3.org/TR/2015/WD-uievents-20150428/</a>
<dd><a href="http://www.w3.org/TR/2015/WD-uievents-20150319/" rel="previous">http://www.w3.org/TR/2015/WD-uievents-20150319/</a>
<dt>Issue Tracking:
<dd><a href="https://github.com/w3c/uievents/issues/">GitHub</a>
<dt class="editor">Editors:
<dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:[email protected]">Gary Kacmarcik</a> (<span class="p-org org">Google</span>)
<dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:[email protected]">Travis Leithead</a> (<span class="p-org org">Microsoft</span>)
<dd class="editor p-author h-card vcard"><span class="p-name fn">Doug Schepers</span> (<span class="p-org org">Mar 2008 - May 2011</span>)
<dt>Tests:
<dd><span><a href="https://github.com/w3c/web-platform-tests/tree/master/uievents">web-platform-tests uievents/</a> (<a href="https://github.com/w3c/web-platform-tests/labels/uievents">ongoing work</a>)</span>
</dl>
</div>
<div data-fill-with="warning"></div>
<p class="copyright" data-fill-with="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2017 <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply. </p>
<hr title="Separator for header">
</div>
<h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
<div class="p-summary" data-fill-with="abstract">
<p>This specification defines UI Events which extend the DOM Event objects
defined in <a data-link-type="biblio" href="#biblio-dom">[DOM]</a>. UI Events are those typically implemented by visual
user agents for handling user interaction such as mouse and keyboard input.</p>
</div>
<h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
<div data-fill-with="status">
<p> <em>This section describes the status of this document at the time of its publication. Other
documents may supersede this document. A list of current <abbr title="World Wide Web Consortium">W3C</abbr> publications and the latest revision of this
technical report can be found in the <a href="http://www.w3.org/TR/"><abbr title="World Wide Web Consortium">W3C</abbr> technical
reports index</a> at http://www.w3.org/TR/.</em> </p>
<p> The management and production of this document follows a relatively complex setup. Details are
provided as part of the introduction. </p>
<p> This document was published by the <a href="https://www.w3.org/WebPlatform/WG/">Web Platform Working Group</a> as a Working Draft.
Feedback and comments on this specification are welcome. Please use <a href="https://github.com/w3c/uievents/issues">Github issues</a> Historical discussions can be found in the <a href="http://lists.w3.org/Archives/Public/public-webapps/">[email protected] archives</a>. </p>
<p> Publication as a Working Draft does not imply endorsement by the <abbr title="World Wide Web Consortium">W3C</abbr> Membership. This is a draft document and may
be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite
this document as other than work in progress. </p>
<p> This document was produced by a group operating under the <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2004 <abbr title="World Wide Web Consortium">W3C</abbr> Patent Policy</a>. <abbr title="World Wide Web Consortium">W3C</abbr> maintains a <a href="http://www.w3.org/2004/01/pp-impl/40318/status" rel="disclosure">public list of any
patent disclosures</a> made in connection with the deliverables of the group; that page also
includes instructions for disclosing a patent. An individual who has actual knowledge of a
patent which the individual believes contains <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
Claim(s)</a> must disclose the information in accordance with <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the <abbr title="World Wide Web Consortium">W3C</abbr> Patent Policy</a>. </p>
<p> This document is governed by the <a href="http://www.w3.org/2015/Process-20150901/" id="w3c_process_revision">1 September 2015 <abbr title="World Wide Web Consortium">W3C</abbr> Process Document</a>. </p>
<p></p>
</div>
<div data-fill-with="at-risk"></div>
<nav data-fill-with="table-of-contents" id="toc">
<h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
<ol class="toc" role="directory">
<li>
<a href="#ui-events-intro"><span class="secno">1</span> <span class="content">Introduction</span></a>
<ol class="toc">
<li><a href="#ui-events-overview"><span class="secno">1.1</span> <span class="content">Overview</span></a>
<li>
<a href="#ui-events-conformance"><span class="secno">1.2</span> <span class="content">Conformance</span></a>
<ol class="toc">
<li><a href="#conf-interactive-ua"><span class="secno">1.2.1</span> <span class="content">Web browsers and other dynamic or interactive <span>user agents</span></span></a>
<li><a href="#conf-author-tools"><span class="secno">1.2.2</span> <span class="content">Authoring tools</span></a>
<li><a href="#conf-authors"><span class="secno">1.2.3</span> <span class="content">Content authors and content</span></a>
<li><a href="#conf-specs"><span class="secno">1.2.4</span> <span class="content">Specifications and host languages</span></a>
</ol>
</ol>
<li><a href="#style-conventions"><span class="secno">2</span> <span class="content">Stylistic Conventions</span></a>
<li>
<a href="#dom-event-architecture"><span class="secno">3</span> <span class="content">DOM Event Architecture</span></a>
<ol class="toc">
<li><a href="#event-flow"><span class="secno">3.1</span> <span class="content">Event dispatch and DOM event flow</span></a>
<li><a href="#event-flow-default-cancel"><span class="secno">3.2</span> <span class="content">Default actions and cancelable events</span></a>
<li><a href="#sync-async"><span class="secno">3.3</span> <span class="content">Synchronous and asynchronous events</span></a>
<li><a href="#trusted-events"><span class="secno">3.4</span> <span class="content">Trusted events</span></a>
<li><a href="#event-flow-activation"><span class="secno">3.5</span> <span class="content">Activation triggers and behavior</span></a>
<li><a href="#event-constructors"><span class="secno">3.6</span> <span class="content">Constructing Mouse and Keyboard Events</span></a>
</ol>
<li>
<a href="#event-types"><span class="secno">4</span> <span class="content">Event Types</span></a>
<ol class="toc">
<li>
<a href="#events-uievents"><span class="secno">4.1</span> <span class="content">User Interface Events</span></a>
<ol class="toc">
<li>
<a href="#interface-uievent"><span class="secno">4.1.1</span> <span class="content">Interface UIEvent</span></a>
<ol class="toc">
<li><a href="#idl-uievent"><span class="secno">4.1.1.1</span> <span class="content">UIEvent</span></a>
<li><a href="#idl-uieventinit"><span class="secno">4.1.1.2</span> <span class="content">UIEventInit</span></a>
</ol>
<li>
<a href="#events-uievent-types"><span class="secno">4.1.2</span> <span class="content">UI Event Types</span></a>
<ol class="toc">
<li><a href="#event-type-load"><span class="secno">4.1.2.1</span> <span class="content"><span>load</span></span></a>
<li><a href="#event-type-unload"><span class="secno">4.1.2.2</span> <span class="content"><span>unload</span></span></a>
<li><a href="#event-type-abort"><span class="secno">4.1.2.3</span> <span class="content"><span>abort</span></span></a>
<li><a href="#event-type-error"><span class="secno">4.1.2.4</span> <span class="content"><span>error</span></span></a>
<li><a href="#event-type-select"><span class="secno">4.1.2.5</span> <span class="content"><span>select</span></span></a>
</ol>
</ol>
<li>
<a href="#events-focusevent"><span class="secno">4.2</span> <span class="content">Focus Events</span></a>
<ol class="toc">
<li>
<a href="#interface-focusevent"><span class="secno">4.2.1</span> <span class="content">Interface FocusEvent</span></a>
<ol class="toc">
<li><a href="#idl-focusevent"><span class="secno">4.2.1.1</span> <span class="content">FocusEvent</span></a>
<li><a href="#idl-focuseventinit"><span class="secno">4.2.1.2</span> <span class="content">FocusEventInit</span></a>
</ol>
<li><a href="#events-focusevent-event-order"><span class="secno">4.2.2</span> <span class="content">Focus Event Order</span></a>
<li><a href="#events-focusevent-doc-focus"><span class="secno">4.2.3</span> <span class="content">Document Focus and Focus Context</span></a>
<li>
<a href="#events-focus-types"><span class="secno">4.2.4</span> <span class="content">Focus Event Types</span></a>
<ol class="toc">
<li><a href="#event-type-blur"><span class="secno">4.2.4.1</span> <span class="content"><span>blur</span></span></a>
<li><a href="#event-type-focus"><span class="secno">4.2.4.2</span> <span class="content"><span>focus</span></span></a>
<li><a href="#event-type-focusin"><span class="secno">4.2.4.3</span> <span class="content"><span>focusin</span></span></a>
<li><a href="#event-type-focusout"><span class="secno">4.2.4.4</span> <span class="content"><span>focusout</span></span></a>
</ol>
</ol>
<li>
<a href="#events-mouseevents"><span class="secno">4.3</span> <span class="content">Mouse Events</span></a>
<ol class="toc">
<li>
<a href="#interface-mouseevent"><span class="secno">4.3.1</span> <span class="content">Interface MouseEvent</span></a>
<ol class="toc">
<li><a href="#idl-mouseevent"><span class="secno">4.3.1.1</span> <span class="content">MouseEvent</span></a>
<li><a href="#idl-mouseeventinit"><span class="secno">4.3.1.2</span> <span class="content">MouseEventInit</span></a>
</ol>
<li><a href="#event-modifier-initializers"><span class="secno">4.3.2</span> <span class="content">Event Modifier Initializers</span></a>
<li><a href="#events-mouseevent-event-order"><span class="secno">4.3.3</span> <span class="content">Mouse Event Order</span></a>
<li>
<a href="#events-mouse-types"><span class="secno">4.3.4</span> <span class="content">Mouse Event Types</span></a>
<ol class="toc">
<li><a href="#event-type-auxclick"><span class="secno">4.3.4.1</span> <span class="content"><span>auxclick</span></span></a>
<li><a href="#event-type-click"><span class="secno">4.3.4.2</span> <span class="content"><span>click</span></span></a>
<li><a href="#event-type-dblclick"><span class="secno">4.3.4.3</span> <span class="content"><span>dblclick</span></span></a>
<li><a href="#event-type-mousedown"><span class="secno">4.3.4.4</span> <span class="content"><span>mousedown</span></span></a>
<li><a href="#event-type-mouseenter"><span class="secno">4.3.4.5</span> <span class="content"><span>mouseenter</span></span></a>
<li><a href="#event-type-mouseleave"><span class="secno">4.3.4.6</span> <span class="content"><span>mouseleave</span></span></a>
<li><a href="#event-type-mousemove"><span class="secno">4.3.4.7</span> <span class="content"><span>mousemove</span></span></a>
<li><a href="#event-type-mouseout"><span class="secno">4.3.4.8</span> <span class="content"><span>mouseout</span></span></a>
<li><a href="#event-type-mouseover"><span class="secno">4.3.4.9</span> <span class="content"><span>mouseover</span></span></a>
<li><a href="#event-type-mouseup"><span class="secno">4.3.4.10</span> <span class="content"><span>mouseup</span></span></a>
</ol>
</ol>
<li>
<a href="#events-wheelevents"><span class="secno">4.4</span> <span class="content">Wheel Events</span></a>
<ol class="toc">
<li>
<a href="#interface-wheelevent"><span class="secno">4.4.1</span> <span class="content">Interface WheelEvent</span></a>
<ol class="toc">
<li><a href="#idl-wheelevent"><span class="secno">4.4.1.1</span> <span class="content">WheelEvent</span></a>
<li><a href="#idl-wheeleventinit"><span class="secno">4.4.1.2</span> <span class="content">WheelEventInit</span></a>
</ol>
<li>
<a href="#events-wheel-types"><span class="secno">4.4.2</span> <span class="content">Wheel Event Types</span></a>
<ol class="toc">
<li><a href="#event-type-wheel"><span class="secno">4.4.2.1</span> <span class="content"><span>wheel</span></span></a>
</ol>
</ol>
<li>
<a href="#events-inputevents"><span class="secno">4.5</span> <span class="content">Input Events</span></a>
<ol class="toc">
<li>
<a href="#interface-inputevent"><span class="secno">4.5.1</span> <span class="content">Interface InputEvent</span></a>
<ol class="toc">
<li><a href="#idl-inputevent"><span class="secno">4.5.1.1</span> <span class="content">InputEvent</span></a>
<li><a href="#idl-inputeventinit"><span class="secno">4.5.1.2</span> <span class="content">InputEventInit</span></a>
</ol>
<li><a href="#events-inputevent-event-order"><span class="secno">4.5.2</span> <span class="content">Input Event Order</span></a>
<li>
<a href="#events-input-types"><span class="secno">4.5.3</span> <span class="content">Input Event Types</span></a>
<ol class="toc">
<li><a href="#event-type-beforeinput"><span class="secno">4.5.3.1</span> <span class="content"><span>beforeinput</span></span></a>
<li><a href="#event-type-input"><span class="secno">4.5.3.2</span> <span class="content"><span>input</span></span></a>
</ol>
</ol>
<li>
<a href="#events-keyboardevents"><span class="secno">4.6</span> <span class="content">Keyboard Events</span></a>
<ol class="toc">
<li>
<a href="#interface-keyboardevent"><span class="secno">4.6.1</span> <span class="content">Interface KeyboardEvent</span></a>
<ol class="toc">
<li><a href="#idl-keyboardevent"><span class="secno">4.6.1.1</span> <span class="content">KeyboardEvent</span></a>
<li><a href="#idl-keyboardeventinit"><span class="secno">4.6.1.2</span> <span class="content">KeyboardEventInit</span></a>
</ol>
<li><a href="#events-keyboard-key-location"><span class="secno">4.6.2</span> <span class="content">Keyboard Event Key Location</span></a>
<li><a href="#events-keyboard-event-order"><span class="secno">4.6.3</span> <span class="content">Keyboard Event Order</span></a>
<li>
<a href="#events-keyboard-types"><span class="secno">4.6.4</span> <span class="content">Keyboard Event Types</span></a>
<ol class="toc">
<li><a href="#event-type-keydown"><span class="secno">4.6.4.1</span> <span class="content"><span>keydown</span></span></a>
<li><a href="#event-type-keyup"><span class="secno">4.6.4.2</span> <span class="content"><span>keyup</span></span></a>
</ol>
</ol>
<li>
<a href="#events-compositionevents"><span class="secno">4.7</span> <span class="content">Composition Events</span></a>
<ol class="toc">
<li>
<a href="#interface-compositionevent"><span class="secno">4.7.1</span> <span class="content">Interface CompositionEvent</span></a>
<ol class="toc">
<li><a href="#idl-compositionevent"><span class="secno">4.7.1.1</span> <span class="content">CompositionEvent</span></a>
<li><a href="#idl-compositioneventinit"><span class="secno">4.7.1.2</span> <span class="content">CompositionEventInit</span></a>
</ol>
<li><a href="#events-composition-order"><span class="secno">4.7.2</span> <span class="content">Composition Event Order</span></a>
<li><a href="#events-composition-handwriting"><span class="secno">4.7.3</span> <span class="content">Handwriting Recognition Systems</span></a>
<li><a href="#events-composition-canceling"><span class="secno">4.7.4</span> <span class="content">Canceling Composition Events</span></a>
<li><a href="#events-composition-key-events"><span class="secno">4.7.5</span> <span class="content">Key Events During Composition</span></a>
<li><a href="#events-composition-input-events"><span class="secno">4.7.6</span> <span class="content">Input Events During Composition</span></a>
<li>
<a href="#events-composition-types"><span class="secno">4.7.7</span> <span class="content">Composition Event Types</span></a>
<ol class="toc">
<li><a href="#event-type-compositionstart"><span class="secno">4.7.7.1</span> <span class="content"><span>compositionstart</span></span></a>
<li><a href="#event-type-compositionupdate"><span class="secno">4.7.7.2</span> <span class="content"><span>compositionupdate</span></span></a>
<li><a href="#event-type-compositionend"><span class="secno">4.7.7.3</span> <span class="content"><span>compositionend</span></span></a>
</ol>
</ol>
</ol>
<li>
<a href="#keys"><span class="secno">5</span> <span class="content">Keyboard events and key values</span></a>
<ol class="toc">
<li>
<a href="#keyboard-input"><span class="secno">5.1</span> <span class="content">Keyboard Input</span></a>
<ol class="toc">
<li><a href="#key-legends"><span class="secno">5.1.1</span> <span class="content">Key Legends</span></a>
</ol>
<li>
<a href="#keys-codevalues"><span class="secno">5.2</span> <span class="content">Key codes</span></a>
<ol class="toc">
<li><a href="#code-motivation"><span class="secno">5.2.1</span> <span class="content">Motivation for the <code class="idl"><span>code</span></code> Attribute</span></a>
<li><a href="#relationship-between-key-code"><span class="secno">5.2.2</span> <span class="content">The Relationship Between <code class="idl"><span>key</span></code> and <code class="idl"><span>code</span></code></span></a>
<li><a href="#code-examples"><span class="secno">5.2.3</span> <span class="content"><code>code</code> Examples</span></a>
<li><a href="#code-virtual-keyboards"><span class="secno">5.2.4</span> <span class="content"><code class="idl"><span>code</span></code> and Virtual Keyboards</span></a>
</ol>
<li>
<a href="#keys-keyvalues"><span class="secno">5.3</span> <span class="content">Keyboard Event <code>key</code> Values</span></a>
<ol class="toc">
<li><a href="#keys-modifiers"><span class="secno">5.3.1</span> <span class="content">Modifier keys</span></a>
<li><a href="#keys-dead"><span class="secno">5.3.2</span> <span class="content">Dead keys</span></a>
<li>
<a href="#keys-IME"><span class="secno">5.3.3</span> <span class="content">Input Method Editors</span></a>
<ol class="toc">
<li><a href="#keys-IME-keys"><span class="secno">5.3.3.1</span> <span class="content">Input Method Editor mode keys</span></a>
</ol>
<li><a href="#keys-cancelable-keys"><span class="secno">5.3.4</span> <span class="content">Default actions and cancelable keyboard events</span></a>
</ol>
</ol>
<li>
<a href="#legacy-event-initializers"><span class="secno">6</span> <span class="content">Legacy Event Initializers</span></a>
<ol class="toc">
<li>
<a href="#legacy-event-initializer-interfaces"><span class="secno">6.1</span> <span class="content">Legacy Event Initializer Interfaces</span></a>
<ol class="toc">
<li><a href="#idl-interface-UIEvent-initializers"><span class="secno">6.1.1</span> <span class="content">Initializers for interface UIEvent</span></a>
<li><a href="#idl-interface-MouseEvent-initializers"><span class="secno">6.1.2</span> <span class="content">Initializers for interface MouseEvent</span></a>
<li><a href="#idl-interface-WheelEvent-initializers"><span class="secno">6.1.3</span> <span class="content">Initializers for interface WheelEvent</span></a>
<li><a href="#idl-interface-KeyboardEvent-initializers"><span class="secno">6.1.4</span> <span class="content">Initializers for interface KeyboardEvent</span></a>
<li><a href="#idl-interface-CompositionEvent-initializers"><span class="secno">6.1.5</span> <span class="content">Initializers for interface CompositionEvent</span></a>
</ol>
</ol>
<li>
<a href="#legacy-key-attributes"><span class="secno">7</span> <span class="content">Legacy Key & Mouse Event Attributes</span></a>
<ol class="toc">
<li>
<a href="#legacy-UIEvent"><span class="secno">7.1</span> <span class="content">Legacy <code class="idl"><span>UIEvent</span></code> supplemental interface</span></a>
<ol class="toc">
<li><a href="#legacy-interface-UIEvent"><span class="secno">7.1.1</span> <span class="content">Interface UIEvent (supplemental)</span></a>
<li><a href="#legacy-dictionary-UIEventInit"><span class="secno">7.1.2</span> <span class="content">Interface UIEventInit (supplemental)</span></a>
</ol>
<li>
<a href="#legacy-KeyboardEvent"><span class="secno">7.2</span> <span class="content">Legacy <code class="idl"><span>KeyboardEvent</span></code> supplemental interface</span></a>
<ol class="toc">
<li><a href="#legacy-interface-KeyboardEvent"><span class="secno">7.2.1</span> <span class="content">Interface KeyboardEvent (supplemental)</span></a>
<li><a href="#legacy-dictionary-KeyboardEventInit"><span class="secno">7.2.2</span> <span class="content">Interface KeyboardEventInit (supplemental)</span></a>
</ol>
<li>
<a href="#legacy-key-models"><span class="secno">7.3</span> <span class="content">Legacy key models</span></a>
<ol class="toc">
<li><a href="#determine-keydown-keyup-keyCode"><span class="secno">7.3.1</span> <span class="content">How to determine <code class="idl"><span>keyCode</span></code> for <span><code>keydown</code></span> and <span><code>keyup</code></span> events</span></a>
<li><a href="#determine-keypress-keyCode"><span class="secno">7.3.2</span> <span class="content">How to determine <code class="idl"><span>keyCode</span></code> for <span><code>keypress</code></span> events</span></a>
<li><a href="#fixed-virtual-key-codes"><span class="secno">7.3.3</span> <span class="content">Fixed virtual key codes</span></a>
<li><a href="#optionally-fixed-virtual-key-codes"><span class="secno">7.3.4</span> <span class="content">Optionally fixed virtual key codes</span></a>
</ol>
</ol>
<li>
<a href="#legacy-event-types"><span class="secno">8</span> <span class="content">Legacy Event Types</span></a>
<ol class="toc">
<li>
<a href="#legacy-uievent-events"><span class="secno">8.1</span> <span class="content">Legacy <code class="idl"><span>UIEvent</span></code> events</span></a>
<ol class="toc">
<li>
<a href="#legacy-uievent-event-types"><span class="secno">8.1.1</span> <span class="content">Legacy <code class="idl"><span>UIEvent</span></code> event types</span></a>
<ol class="toc">
<li><a href="#event-type-DOMActivate"><span class="secno">8.1.1.1</span> <span class="content"><span>DOMActivate</span></span></a>
</ol>
<li><a href="#legacy-uievent-event-order"><span class="secno">8.1.2</span> <span class="content">Activation event order</span></a>
</ol>
<li>
<a href="#legacy-focusevent-events"><span class="secno">8.2</span> <span class="content">Legacy <code class="idl"><span>FocusEvent</span></code> events</span></a>
<ol class="toc">
<li>
<a href="#legacy-focusevent-event-types"><span class="secno">8.2.1</span> <span class="content">Legacy <code class="idl"><span>FocusEvent</span></code> event types</span></a>
<ol class="toc">
<li><a href="#event-type-DOMFocusIn"><span class="secno">8.2.1.1</span> <span class="content"><span>DOMFocusIn</span></span></a>
<li><a href="#event-type-DOMFocusOut"><span class="secno">8.2.1.2</span> <span class="content"><span>DOMFocusOut</span></span></a>
</ol>
<li><a href="#legacy-focusevent-event-order"><span class="secno">8.2.2</span> <span class="content">Legacy FocusEvent event order</span></a>
</ol>
<li>
<a href="#legacy-keyboardevent-events"><span class="secno">8.3</span> <span class="content">Legacy <code class="idl"><span>KeyboardEvent</span></code> events</span></a>
<ol class="toc">
<li>
<a href="#legacy-keyboardevent-event-types"><span class="secno">8.3.1</span> <span class="content">Legacy <code class="idl"><span>KeyboardEvent</span></code> event types</span></a>
<ol class="toc">
<li><a href="#event-type-keypress"><span class="secno">8.3.1.1</span> <span class="content"><span>keypress</span></span></a>
</ol>
<li><a href="#keypress-event-order"><span class="secno">8.3.2</span> <span class="content"><span><code>keypress</code></span> event order</span></a>
</ol>
<li>
<a href="#legacy-mutationevent-events"><span class="secno">8.4</span> <span class="content">Legacy <code class="idl"><span>MutationEvent</span></code> events</span></a>
<ol class="toc">
<li><a href="#interface-mutationevent"><span class="secno">8.4.1</span> <span class="content">Interface MutationEvent</span></a>
<li>
<a href="#legacy-mutationevent-event-types"><span class="secno">8.4.2</span> <span class="content">Legacy <code class="idl"><span>MutationEvent</span></code> event types</span></a>
<ol class="toc">
<li><a href="#event-type-DOMAttrModified"><span class="secno">8.4.2.1</span> <span class="content"><span>DOMAttrModified</span></span></a>
<li><a href="#event-type-DOMCharacterDataModified"><span class="secno">8.4.2.2</span> <span class="content"><span>DOMCharacterDataModified</span></span></a>
<li><a href="#event-type-DOMNodeInserted"><span class="secno">8.4.2.3</span> <span class="content"><span>DOMNodeInserted</span></span></a>
<li><a href="#event-type-DOMNodeInsertedIntoDocument"><span class="secno">8.4.2.4</span> <span class="content"><span>DOMNodeInsertedIntoDocument</span></span></a>
<li><a href="#event-type-DOMNodeRemoved"><span class="secno">8.4.2.5</span> <span class="content"><span>DOMNodeRemoved</span></span></a>
<li><a href="#event-type-DOMNodeRemovedFromDocument"><span class="secno">8.4.2.6</span> <span class="content"><span>DOMNodeRemovedFromDocument</span></span></a>
<li><a href="#event-type-DOMSubtreeModified"><span class="secno">8.4.2.7</span> <span class="content"><span>DOMSubtreeModified</span></span></a>
</ol>
</ol>
</ol>
<li>
<a href="#extending-events"><span class="secno">9</span> <span class="content">Extending Events</span></a>
<ol class="toc">
<li><a href="#extending-events-intro"><span class="secno">9.1</span> <span class="content">Introduction</span></a>
<li><a href="#extending-events-Custom_Events"><span class="secno">9.2</span> <span class="content">Custom Events</span></a>
<li>
<a href="#extending-events-Impl_Extensions"><span class="secno">9.3</span> <span class="content">Implementation-Specific Extensions</span></a>
<ol class="toc">
<li><a href="#extending-events-prefixes"><span class="secno">9.3.1</span> <span class="content">Known Implementation-Specific Prefixes</span></a>
</ol>
</ol>
<li><a href="#security-considerations"><span class="secno">10</span> <span class="content">Security Considerations</span></a>
<li>
<a href="#changes-from-earlier-versions"><span class="secno">11</span> <span class="content">Changes</span></a>
<ol class="toc">
<li>
<a href="#changes-DOMEvents2to3Changes"><span class="secno">11.1</span> <span class="content">Changes between DOM Level 2 Events and UI Events</span></a>
<ol class="toc">
<li><a href="#changes-DOMEvents2to3Changes-flow"><span class="secno">11.1.1</span> <span class="content">Changes to DOM Level 2 event flow</span></a>
<li><a href="#changes-DOMEvents2to3Changes-event-types"><span class="secno">11.1.2</span> <span class="content">Changes to DOM Level 2 event types</span></a>
<li><a href="#changes-DOMLevel2to3Changes"><span class="secno">11.1.3</span> <span class="content">Changes to DOM Level 2 Events interfaces</span></a>
<li><a href="#changes-DOMLevel3Addons"><span class="secno">11.1.4</span> <span class="content">New Interfaces</span></a>
</ol>
<li><a href="#changes-drafts"><span class="secno">11.2</span> <span class="content">Changes between different drafts of UI Events</span></a>
</ol>
<li><a href="#acknowledgements-contributors"><span class="secno">12</span> <span class="content">Acknowledgements</span></a>
<li><a href="#glossary"><span class="secno">13</span> <span class="content">Glossary</span></a>
<li>
<a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
<ol class="toc">
<li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
<li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
</ol>
<li>
<a href="#references"><span class="secno"></span> <span class="content">References</span></a>
<ol class="toc">
<li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
<li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
</ol>
<li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
</ol>
</nav>
<main>
<section>
<h2 class="heading settled" data-level="1" id="ui-events-intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#ui-events-intro"></a></h2>
<h3 class="heading settled" data-level="1.1" id="ui-events-overview"><span class="secno">1.1. </span><span class="content">Overview</span><a class="self-link" href="#ui-events-overview"></a></h3>
<p>UI Events is designed with two main goals. The first goal is the design of
an <a data-link-type="dfn" href="#event" id="ref-for-event-1">event</a> system which allows registration of event listeners and
describes event flow through a tree structure. Additionally, the
specification will provide standard modules of events for user interface
control and document mutation notifications, including defined contextual
information for each of these event modules.</p>
<p>The second goal of UI Events is to provide a common subset of the current
event systems used in existing browsers. This is intended to foster
interoperability of existing scripts and content. It is not expected that
this goal will be met with full backwards compatibility. However, the
specification attempts to achieve this when possible.</p>
<h3 class="heading settled" data-level="1.2" id="ui-events-conformance"><span class="secno">1.2. </span><span class="content">Conformance</span><a class="self-link" href="#ui-events-conformance"></a></h3>
<p><strong>This section is normative.</strong></p>
<p>Within this specification, the key words <q>MUST</q>, <q>MUST NOT</q>, <q>REQUIRED</q>, <q>SHALL</q>, <q>SHALL NOT</q>, <q>SHOULD</q>, <q>SHOULD NOT</q>, <q>RECOMMENDED</q>, <q>MAY</q>, and <q>OPTIONAL</q> are to be interpreted as described in <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a>.</p>
<p>This specification is to be understood in the context of the DOM Level 3
Core specification <a data-link-type="biblio" href="#biblio-dom-level-3-core">[DOM-Level-3-Core]</a> and the general considerations for DOM
implementations apply. For example, handling of <a data-link-type="dfn" href="#namespace-uris" id="ref-for-namespace-uris-1">namespace URIs</a> is
discussed in <a class="normative" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Namespaces-Considerations"><em>XML Namespaces</em></a>.
For additional information about <a class="normative" href="http://www.w3.org/TR/DOM-Level-3-Core/introduction.html#ID-Conformance"><em>conformance</em></a>,
please see the DOM Level 3 Core specification <a data-link-type="biblio" href="#biblio-dom-level-3-core">[DOM-Level-3-Core]</a>. A <a data-link-type="dfn" href="#user-agent" id="ref-for-user-agent-1">user
agent</a> is not required to conform to the entirety of another
specification in order to conform to this specification, but it MUST conform
to the specific parts of any other specification which are called out in
this specification (e.g., a conforming UI Events <a data-link-type="dfn" href="#user-agent" id="ref-for-user-agent-2">user agent</a> MUST
support the <code>DOMString</code> data type as defined in [[Web IDL]], but
need not support every method or data type defined in [[Web IDL]] in order
to conform to UI Events).</p>
<p>This specification defines several classes of conformance for different <a data-link-type="dfn" href="#user-agent" id="ref-for-user-agent-3">user agents</a>, specifications, and content authors:</p>
<h4 class="heading settled" data-level="1.2.1" id="conf-interactive-ua"><span class="secno">1.2.1. </span><span class="content">Web browsers and other dynamic or interactive <a data-link-type="dfn" href="#user-agent" id="ref-for-user-agent-4">user agents</a></span><a class="self-link" href="#conf-interactive-ua"></a></h4>
<p>A dynamic or interactive <a data-link-type="dfn" href="#user-agent" id="ref-for-user-agent-5">user agent</a>, referred to here as a <q>browser</q> (be it a Web browser, AT (Accessibility Technology)
application, or other similar program), conforms to UI Events if it
supports:</p>
<ul>
<li data-md="">
<p>the Core module defined in <a data-link-type="biblio" href="#biblio-dom-level-3-core">[DOM-Level-3-Core]</a></p>
<li data-md="">
<p>the <a href="#event-flow">§3.1 Event dispatch and DOM event flow</a> mechanism</p>
<li data-md="">
<p>all the interfaces and events with their associated methods,
attributes, and semantics defined in this specification with the
exception of those marked as <a data-link-type="dfn" href="#deprecates" id="ref-for-deprecates-1">deprecated</a> (a conforming user
agent MAY implement the deprecated interfaces, events, or APIs for
backwards compatibility, but is not required to do so in order to be
conforming)</p>
<li data-md="">
<p>the complete set of <code>key</code> and <code>code</code> values defined in <a data-link-type="biblio" href="#biblio-uievents-key">[UIEvents-Key]</a> and <a data-link-type="biblio" href="#biblio-uievents-code">[UIEvents-Code]</a> (subject to
platform availability), and</p>
<li data-md="">
<p>all other normative requirements defined in this specification.</p>
</ul>
<p>A conforming browser MUST <a data-link-type="dfn" href="#dispatch" id="ref-for-dispatch-1">dispatch</a> events appropriate to the
given <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#eventtarget">EventTarget</a></code> when the conditions defined for that <a data-link-type="dfn" href="#event-type" id="ref-for-event-type-1">event
type</a> have been met.</p>
<p>A browser conforms specifically to UI Events if it implements the
interfaces and related <a data-link-type="dfn" href="#event-type" id="ref-for-event-type-2">event types</a> specified in <a href="#event-types">§4 Event Types</a>.</p>
<p>A conforming browser MUST support scripting, declarative interactivity,
or some other means of detecting and dispatching events in the manner
described by this specification, and MUST support the APIs specified for
that <a data-link-type="dfn" href="#event-type" id="ref-for-event-type-3">event type</a>.</p>
<p>In addition to meeting all other conformance criteria, a conforming
browser MAY implement features of this specification marked as <a data-link-type="dfn" href="#deprecates" id="ref-for-deprecates-2">deprecated</a>, for backwards compatibility with existing content,
but such implementation is discouraged.</p>
<p>A conforming browser MAY also support features not found in this
specification, but which use the <a href="#event-flow">§3.1 Event dispatch and DOM event flow</a> mechanism, interfaces,
events, or other features defined in this specification, and MAY
implement additional interfaces and <a data-link-type="dfn" href="#event-type" id="ref-for-event-type-4">event types</a> appropriate to
that implementation. Such features can be later standardized in future
specifications.</p>
<p>A browser which does not conform to all required portions of this
specification MUST NOT claim conformance to UI Events. Such an
implementation which does conform to portions of this specification MAY
claim conformance to those specific portions.</p>
<p>A conforming browser MUST also be a <i>conforming implementation</i> of
the IDL fragments in this specification, as described in the Web IDL
specification <a data-link-type="biblio" href="#biblio-webidl">[WebIDL]</a>.</p>
<h4 class="heading settled" data-level="1.2.2" id="conf-author-tools"><span class="secno">1.2.2. </span><span class="content">Authoring tools</span><a class="self-link" href="#conf-author-tools"></a></h4>
<p>A content authoring tool conforms to UI Events if it produces content
which uses the <a data-link-type="dfn" href="#event-type" id="ref-for-event-type-5">event types</a> and <a href="#event-flow">§3.1 Event dispatch and DOM event flow</a> model, consistent
in a manner as defined in this specification.</p>
<p>A content authoring tool MUST NOT claim conformance to UI Events for
content it produces which uses features of this specification marked as <a data-link-type="dfn" href="#deprecates" id="ref-for-deprecates-3">deprecated</a> in this specification.</p>
<p>A conforming content authoring tool SHOULD provide to the content author
a means to use all <a data-link-type="dfn" href="#event-type" id="ref-for-event-type-6">event types</a> and interfaces appropriate to all <a data-link-type="dfn" href="#host-language" id="ref-for-host-language-1">host languages</a> in the content document being produced.</p>
<h4 class="heading settled" data-level="1.2.3" id="conf-authors"><span class="secno">1.2.3. </span><span class="content">Content authors and content</span><a class="self-link" href="#conf-authors"></a></h4>
<p>A content author creates conforming UI Events content if that
content uses the <a data-link-type="dfn" href="#event-type" id="ref-for-event-type-7">event types</a> and <a href="#event-flow">§3.1 Event dispatch and DOM event flow</a> model,
consistent in a manner as defined in this specification.</p>
<p>A content author SHOULD NOT use features of this specification
marked as <a data-link-type="dfn" href="#deprecates" id="ref-for-deprecates-4">deprecated</a>, but SHOULD rely instead upon
replacement mechanisms defined in this specification and elsewhere.</p>
<p>Conforming content MUST use the semantics of the interfaces and <a data-link-type="dfn" href="#event-type" id="ref-for-event-type-8">event types</a> as described in this specification.</p>
<p class="note" role="note"> Content authors are advised to follow best practices as described in <a href="http://www.w3.org/TR/WAI-WEBCONTENT/">accessibility</a> and <a href="http://www.w3.org/standards/techs/i18n">internationalization</a> guideline specifications. </p>
<h4 class="heading settled" data-level="1.2.4" id="conf-specs"><span class="secno">1.2.4. </span><span class="content">Specifications and host languages</span><a class="self-link" href="#conf-specs"></a></h4>
<p>A specification or <a data-link-type="dfn" href="#host-language" id="ref-for-host-language-2">host language</a> conforms to UI Events if it
references and uses the <a href="#event-flow">§3.1 Event dispatch and DOM event flow</a> mechanism, interfaces, events,
or other features defined in <a data-link-type="biblio" href="#biblio-dom">[DOM]</a>, and does not extend
these features in incompatible ways.</p>
<p>A specification or <a data-link-type="dfn" href="#host-language" id="ref-for-host-language-3">host language</a> conforms specifically to UI
Events if it references and uses the interfaces and related <a data-link-type="dfn" href="#event-type" id="ref-for-event-type-9">event
types</a> specified in <a href="#event-types">§4 Event Types</a>. A conforming specification MAY
define additional interfaces and <a data-link-type="dfn" href="#event-type" id="ref-for-event-type-10">event types</a> appropriate to that
specification, or MAY extend the UI Events interfaces and <a data-link-type="dfn" href="#event-type" id="ref-for-event-type-11">event
types</a> in a manner that does not contradict or conflict with the
definitions of those interfaces and <a data-link-type="dfn" href="#event-type" id="ref-for-event-type-12">event types</a> in this
specification.</p>
<p>Specifications or <a data-link-type="dfn" href="#host-language" id="ref-for-host-language-4">host languages</a> which reference UI Events SHOULD
NOT use or recommend features of this specification marked as <a data-link-type="dfn" href="#deprecates" id="ref-for-deprecates-5">deprecated</a>, but SHOULD use or recommend the indicated replacement
for that the feature (if available).</p>
</section>
<section>
<h2 class="heading settled" data-level="2" id="style-conventions"><span class="secno">2. </span><span class="content">Stylistic Conventions</span><a class="self-link" href="#style-conventions"></a></h2>
<p>This specification follows the <a href="http://www.w3.org/People/Schepers/spec-conventions.html">Proposed W3C Specification Conventions</a>,
with the following supplemental additions:</p>
<ul>
<li data-md="">
<p>The <a href="#key-legends"><em>key cap</em></a> printed on a key is shown as <code class="keycap">↓</code>, <code class="keycap">=</code> or <code class="keycap">Q</code>. This is used to refer to a key from the user’s perspective without regard for the <code class="idl"><a data-link-type="idl" href="#dom-keyboardevent-key" id="ref-for-dom-keyboardevent-key-1">key</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-keyboardevent-code" id="ref-for-dom-keyboardevent-code-1">code</a></code> values in the
generated <code class="idl"><a data-link-type="idl" href="#keyboardevent" id="ref-for-keyboardevent-1">KeyboardEvent</a></code>.</p>
<li data-md="">
<p>Glyphs representing character are shown as: <code class="glyph">"𣧂"</code>.</p>
<li data-md="">
<p>Unicode character encodings are shown as: <code class="unicode">U+003d</code>.</p>
<li data-md="">
<p>Names of key values generated by a key press (i.e., the value of <code class="idl"><a data-link-type="idl" href="#keyboardevent" id="ref-for-keyboardevent-2">KeyboardEvent</a></code>.<code class="idl"><a data-link-type="idl" href="#dom-keyboardevent-key" id="ref-for-dom-keyboardevent-key-2">key</a></code>) are shown as: <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-ArrowDown">ArrowDown</a>"</code>, <code class="key">"="</code>, <code class="key">"q"</code> or <code class="key">"Q"</code>.</p>
<li data-md="">
<p>Names of key codes associated with the physical keys (i.e., the
value of <code class="idl"><a data-link-type="idl" href="#keyboardevent" id="ref-for-keyboardevent-3">KeyboardEvent</a></code>.<code class="idl"><a data-link-type="idl" href="#dom-keyboardevent-code" id="ref-for-dom-keyboardevent-code-2">code</a></code>) are shown as: <code class="code">"<a href="http://www.w3.org/TR/uievents-code/#code-ArrowDown">ArrowDown</a>"</code>, <code class="code">"<a href="http://www.w3.org/TR/uievents-code/#code-Equal">Equal</a>"</code> or <code class="code">"<a href="http://www.w3.org/TR/uievents-code/#code-KeyQ">KeyQ</a>"</code>.</p>
</ul>
<p>In addition, certain terms are used in this specification with particular
meanings. The term <q>implementation</q> applies to a browser, content
authoring tool, or other <a data-link-type="dfn" href="#user-agent" id="ref-for-user-agent-6">user agent</a> that implements this specification,
while a content author is a person who writes script or code that takes
advantage of the interfaces, methods, attributes, events, and other features
described in this specification in order to make Web applications, and a user is
the person who uses those Web applications in an implementation.</p>
<p>And finally:</p>
<p class="note" role="note">This is a note.</p>
<p></p>
<p class="XXX">This is an open issue.</p>
<p class="warning">This is a warning.</p>
<pre class="idl-ignore" data-highlight="webidl" data-no-idl="">interface <b>Example</b> {
// This is an IDL definition.
};
</pre>
</section>
<section>
<h2 class="heading settled" data-level="3" id="dom-event-architecture"><span class="secno">3. </span><span class="content">DOM Event Architecture</span><a class="self-link" href="#dom-event-architecture"></a></h2>
<p><em>This section is non-normative. Refer to <a data-link-type="biblio" href="#biblio-dom">[DOM]</a> for a normative description
of the DOM event architecture</em></p>
<h3 class="heading settled" data-level="3.1" id="event-flow"><span class="secno">3.1. </span><span class="content">Event dispatch and DOM event flow</span><a class="self-link" href="#event-flow"></a></h3>
<p>This section gives a brief overview of the event <a data-link-type="dfn" href="#dispatch" id="ref-for-dispatch-2">dispatch</a> mechanism
and describes how events propagate through the DOM tree. Applications can
dispatch event objects using the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-eventtarget-dispatchevent">dispatchEvent()</a></code> method, and
the event object will propagate through the DOM tree as determined by the
DOM event flow.</p>
<figure id="figure-dom-event-flow">
<img alt="Graphical representation of an event dispatched in a DOM tree using the DOM event flow" height="560" src="images/eventflow.svg">
<figcaption>Graphical representation of an event dispatched in a DOM tree using the DOM event flow</figcaption>
</figure>
<p>Event objects are dispatched to an <a data-link-type="dfn" href="#event-target" id="ref-for-event-target-1">event target</a>. But before dispatch
can begin, the event object’s <a data-link-type="dfn" href="#propagation-path" id="ref-for-propagation-path-1">propagation path</a> must first be
determined.</p>
<p>The <a data-link-type="dfn" href="#propagation-path" id="ref-for-propagation-path-2">propagation path</a> is an ordered list of <a data-link-type="dfn" href="#current-event-target" id="ref-for-current-event-target-1">current event
targets</a> through which the event passes. This propagation path reflects
the hierarchical tree structure of the document. The last item in the list
is the <a data-link-type="dfn" href="#event-target" id="ref-for-event-target-2">event target</a>, and the preceding items in the list are referred
to as the <em>target’s ancestors</em>, with the immediately preceding item
as the <em>target’s parent</em>.</p>
<p>Once the <a data-link-type="dfn" href="#propagation-path" id="ref-for-propagation-path-3">propagation path</a> has been determined, the event object
passes through one or more <a data-link-type="dfn" href="#event-phase" id="ref-for-event-phase-1">event phases</a>. There are three event
phases: <a data-link-type="dfn" href="#capture-phase" id="ref-for-capture-phase-1">capture phase</a>, <a data-link-type="dfn" href="#target-phase" id="ref-for-target-phase-1">target phase</a> and <a data-link-type="dfn" href="#bubble-phase" id="ref-for-bubble-phase-1">bubble phase</a>.
Event objects complete these phases as described below. A phase will be
skipped if it is not supported, or if the event object’s propagation has
been stopped. For example, if the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-event-bubbles">bubbles</a></code> attribute is set to
false, the bubble phase will be skipped, and if <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-event-stoppropagation">stopPropagation()</a></code> has been called prior to the dispatch, all phases will be skipped.</p>
<ul>
<li data-md="">
<p>The <strong>capture phase</strong>: The event object propagates
through the target’s ancestors from the <a data-link-type="dfn" href="#window" id="ref-for-window-1">Window</a> to the target’s
parent. This phase is also known as the <em>capturing phase</em>.</p>
<li data-md="">
<p>The <strong>target phase</strong>: The event object arrives at the event
object’s <a data-link-type="dfn" href="#event-target" id="ref-for-event-target-3">event target</a>. This phase is also known as the <em>at-target phase</em>. If the <a data-link-type="dfn" href="#event-type" id="ref-for-event-type-13">event type</a> indicates that the
event doesn’t bubble, then the event object will halt after completion
of this phase.</p>
<li data-md="">
<p>The <strong>bubble phase</strong>: The event object propagates through
the target’s ancestors in reverse order, starting with the target’s
parent and ending with the <a data-link-type="dfn" href="#window" id="ref-for-window-2">Window</a>. This phase is also known as
the <em>bubbling phase</em>.</p>
</ul>
<h3 class="heading settled" data-level="3.2" id="event-flow-default-cancel"><span class="secno">3.2. </span><span class="content">Default actions and cancelable events</span><a class="self-link" href="#event-flow-default-cancel"></a></h3>
<p>Events are typically dispatched by the implementation as a result of a user
action, in response to the completion of a task, or to signal progress
during asynchronous activity (such as a network request). Some events can be
used to control the behavior that the implementation may take next (or undo
an action that the implementation already took). Events in this category are
said to be <em>cancelable</em> and the behavior they cancel is called their <em><a data-link-type="dfn" href="#default-action" id="ref-for-default-action-1">default action</a></em>. Cancelable event objects can be associated
with one or more 'default actions'. To cancel an event, call the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-event-preventdefault">preventDefault()</a></code> method.</p>
<p class="example" id="example-d05667fe"><a class="self-link" href="#example-d05667fe"></a> A <a data-link-type="dfn" href="#mousedown" id="ref-for-mousedown-1"><code>mousedown</code></a> event is dispatched immediately after the user presses down a button on a pointing device (typically a mouse). One possible <a data-link-type="dfn" href="#default-action" id="ref-for-default-action-2">default action</a> taken by the implementation is to set up a state
machine that allows the user to drag images or select text. The <a data-link-type="dfn" href="#default-action" id="ref-for-default-action-3">default
action</a> depends on what happens next — for example, if the user’s
pointing device is over text, a text selection might begin. If the user’s
pointing device is over an image, then an image-drag action could begin.
Preventing the <a data-link-type="dfn" href="#default-action" id="ref-for-default-action-4">default action</a> of a <a data-link-type="dfn" href="#mousedown" id="ref-for-mousedown-2"><code>mousedown</code></a> event prevents these actions from occurring. </p>
<p><a data-link-type="dfn" href="#default-action" id="ref-for-default-action-5">Default actions</a> are usually performed after the event dispatch has
been completed, but in exceptional cases they may also be performed
immediately before the event is dispatched.</p>
<p class="example" id="example-237fbf04"><a class="self-link" href="#example-237fbf04"></a> The default action associated with the <a data-link-type="dfn" href="#click" id="ref-for-click-1"><code>click</code></a> event on <code><input type="checkbox"></code> elements toggles the <code>checked</code> IDL
attribute value of that element. If the <a data-link-type="dfn" href="#click" id="ref-for-click-2"><code>click</code></a> event’s default action is cancelled, then the value is restored to its former state. </p>
<p>When an event is canceled, then the conditional <a data-link-type="dfn" href="#default-action" id="ref-for-default-action-6">default actions</a> associated with the event is skipped (or as mentioned above, if the <a data-link-type="dfn" href="#default-action" id="ref-for-default-action-7">default actions</a> are carried out before the dispatch, their effect
is undone). Whether an event object is cancelable is indicated by
the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-event-cancelable">cancelable</a></code> attribute. Calling <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-event-preventdefault">preventDefault()</a></code> stops all
related <a data-link-type="dfn" href="#default-action" id="ref-for-default-action-8">default actions</a> of an event object. The <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-event-defaultprevented">defaultPrevented</a></code> attribute indicates whether an event has already
been canceled (e.g., by a prior event listener). If the <a data-link-type="dfn" href="#dom-application" id="ref-for-dom-application-1">DOM
application</a> itself initiated the dispatch, then the return value of the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-eventtarget-dispatchevent">dispatchEvent()</a></code> method indicates whether the event object
was cancelled.</p>
<p class="note" role="note">Many implementations additionally interpret an event
listener’s return value, such as the value <code>false</code>, to mean that
the <a data-link-type="dfn" href="#default-action" id="ref-for-default-action-9">default action</a> of cancelable events will be cancelled (though <code>window.onerror</code> handlers are cancelled by returning <code>true</code>). </p>
<h3 class="heading settled" data-level="3.3" id="sync-async"><span class="secno">3.3. </span><span class="content">Synchronous and asynchronous events</span><a class="self-link" href="#sync-async"></a></h3>
<p>Events may be dispatched either synchronously or asynchronously.</p>
<p>Events which are synchronous (<em><q>sync events</q></em>) are treated
as if they are in a virtual queue in a first-in-first-out model, ordered by
sequence of temporal occurrence with respect to other events, to changes in
the DOM, and to user interaction. Each event in this virtual queue is
delayed until the previous event has completed its propagation behavior, or
been canceled. Some sync events are driven by a specific device or process,
such as mouse button events. These events are governed by the <a data-link-type="dfn" href="#event-order" id="ref-for-event-order-1">event
order</a> algorithms defined for that set of events, and user agents will
dispatch these events in the defined order.</p>
<p>Events which are asynchronous (<em><q>async events</q></em>) may be
dispatched as the results of the action are completed, with no relation to
other events, to other changes in the DOM, nor to user interaction.</p>
<p class="example" id="example-17045482"><a class="self-link" href="#example-17045482"></a> During loading of a document, an inline script element is parsed and
executed. The <a data-link-type="dfn" href="#load" id="ref-for-load-1"><code>load</code></a> event is queued to be fired asynchronously at the script element. However, because it is an async event,
its order with relation to other synchronous events fired during document
load (such as the <code class="eventtype">DOMContentLoaded</code> event from <a data-link-type="biblio" href="#biblio-html5">[HTML5]</a>) is not guaranteed. </p>
<h3 class="heading settled" data-level="3.4" id="trusted-events"><span class="secno">3.4. </span><span class="content">Trusted events</span><a class="self-link" href="#trusted-events"></a></h3>
<p>Events that are generated by the <a data-link-type="dfn" href="#user-agent" id="ref-for-user-agent-7">user agent</a>, either as a result of user
interaction, or as a direct result of changes to the DOM, are trusted by the <a data-link-type="dfn" href="#user-agent" id="ref-for-user-agent-8">user agent</a> with privileges that are not afforded to events generated by
script through the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-document-createevent">createEvent()</a></code> method, modified
using the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-event-initevent">initEvent()</a></code> method, or dispatched via the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-eventtarget-dispatchevent">dispatchEvent()</a></code> method. The <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-event-istrusted">isTrusted</a></code> attribute
of trusted events has a value of <code>true</code>, while untrusted events
have a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-event-istrusted">isTrusted</a></code> attribute value of <code>false</code>.</p>
<p>Most untrusted events will not trigger <a data-link-type="dfn" href="#default-action" id="ref-for-default-action-10">default actions</a>, with the
exception of the <a data-link-type="dfn" href="#click" id="ref-for-click-3"><code>click</code></a> event. This event always triggers the <a data-link-type="dfn" href="#default-action" id="ref-for-default-action-11">default action</a>, even if the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-event-istrusted">isTrusted</a></code> attribute is <code>false</code> (this behavior is retained for
backward-compatibility). All other untrusted events behave as if the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-event-preventdefault">preventDefault()</a></code> method had been called on that event.</p>
<h3 class="heading settled" data-level="3.5" id="event-flow-activation"><span class="secno">3.5. </span><span class="content">Activation triggers and behavior</span><a class="self-link" href="#event-flow-activation"></a></h3>
<p>Certain <a data-link-type="dfn" href="#event-target" id="ref-for-event-target-4">event targets</a> (such as a link or button element) may have
associated <a data-link-type="dfn" href="#activation-behavior" id="ref-for-activation-behavior-1">activation behavior</a> (such a following a link) that
implementations perform in response to an <em><a data-link-type="dfn" href="#activation-trigger" id="ref-for-activation-trigger-1">activation
trigger</a></em> (such as clicking a link).</p>
<p class="example" id="example-activation"><a class="self-link" href="#example-activation"></a> Both HTML and SVG have an <code><a></code> element which indicates a
link. Relevant <a data-link-type="dfn" href="#activation-trigger" id="ref-for-activation-trigger-2">activation triggers</a> for an <code><a></code> element are a <a data-link-type="dfn" href="#click" id="ref-for-click-4"><code>click</code></a> event on the text or image content of the <code><a></code> element, or a <a data-link-type="dfn" href="#keydown" id="ref-for-keydown-1"><code>keydown</code></a> event with a <code class="idl"><a data-link-type="idl" href="#dom-keyboardevent-key" id="ref-for-dom-keyboardevent-key-3">key</a></code> attribute value of <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-Enter">Enter</a>"</code> key when the <code><a></code> element has focus. The activation behavior for
an <code><a></code> element is normally to change the content of the
window to the content of the new document, in the case of external links,
or to reposition the current document relative to the new anchor, in the
case of internal links. </p>
<p>An <a data-link-type="dfn" href="#activation-trigger" id="ref-for-activation-trigger-3">activation trigger</a> is a user action or an event which indicates
to the implementation that an activation behavior should be initiated.
User-initiated <a data-link-type="dfn" href="#activation-trigger" id="ref-for-activation-trigger-4">activation triggers</a> include clicking a mouse button
on an activatable element, pressing the <code class="keycap">Enter</code> key when an activatable element has focus, or pressing a key that is somehow linked to an
activatable element (a <q>hotkey</q> or <q>access key</q>) even when that
element does not have focus. Event-based <a data-link-type="dfn" href="#activation-trigger" id="ref-for-activation-trigger-5">activation triggers</a> may
include timer-based events that activate an element at a certain clock time
or after a certain time period has elapsed, progress events after a certain
action has been completed, or many other condition-based or state-based
events.</p>
<h3 class="heading settled" data-level="3.6" id="event-constructors"><span class="secno">3.6. </span><span class="content">Constructing Mouse and Keyboard Events</span><a class="self-link" href="#event-constructors"></a></h3>
<p>Generally, when a constructor of an <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#event">Event</a></code> interface, or of an interface
inherited from the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#event">Event</a></code> interface, is invoked, the steps described in <a data-link-type="biblio" href="#biblio-dom">[DOM]</a> should be followed. However the <code class="idl"><a data-link-type="idl" href="#keyboardevent" id="ref-for-keyboardevent-4">KeyboardEvent</a></code> and <code class="idl"><a data-link-type="idl" href="#mouseevent" id="ref-for-mouseevent-1">MouseEvent</a></code> interfaces provide additional dictionary members for
initializing the internal state of the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#event">Event</a></code> object’s key modifiers:
specifically, the internal state queried for using the <code class="idl"><a data-link-type="idl" href="#dom-keyboardevent-getmodifierstate" id="ref-for-dom-keyboardevent-getmodifierstate-1">getModifierState()</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-mouseevent-getmodifierstate" id="ref-for-dom-mouseevent-getmodifierstate-1">getModifierState()</a></code> methods. This section supplements the DOM4 steps for intializing a new <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#event">Event</a></code> object with these optional modifier states.</p>
<p>For the purposes of constructing a <code class="idl"><a data-link-type="idl" href="#keyboardevent" id="ref-for-keyboardevent-5">KeyboardEvent</a></code>, <code class="idl"><a data-link-type="idl" href="#mouseevent" id="ref-for-mouseevent-2">MouseEvent</a></code>, or
object derived from these objects using the algorithm below, all <code class="idl"><a data-link-type="idl" href="#keyboardevent" id="ref-for-keyboardevent-6">KeyboardEvent</a></code>, <code class="idl"><a data-link-type="idl" href="#mouseevent" id="ref-for-mouseevent-3">MouseEvent</a></code>, and derived objects have <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="internal-key-modifier-state">internal key modifier state</dfn> which can be set and
retrieved using the <a href="#keys-modifiers">key modifier names</a> described in the <a href="http://www.w3.org/TR/uievents-key/#keys-modifier">Modifier Keys table</a> in <a data-link-type="biblio" href="#biblio-uievents-key">[UIEvents-Key]</a>.</p>
<p>The following steps supplement the algorithm defined for constructing
events in DOM4:</p>
<ul>
<li data-md="">
<p>If the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#event">Event</a></code> being constructed is a <code class="idl"><a data-link-type="idl" href="#keyboardevent" id="ref-for-keyboardevent-7">KeyboardEvent</a></code> or <code class="idl"><a data-link-type="idl" href="#mouseevent" id="ref-for-mouseevent-4">MouseEvent</a></code> object or an object that derives from either of these,
and a <code class="idl"><a data-link-type="idl" href="#dictdef-eventmodifierinit" id="ref-for-dictdef-eventmodifierinit-1">EventModifierInit</a></code> argument was provided to the constructor,
then run the following sub-steps:</p>
<ul>
<li data-md="">
<p>For each <code class="idl"><a data-link-type="idl" href="#dictdef-eventmodifierinit" id="ref-for-dictdef-eventmodifierinit-2">EventModifierInit</a></code> argument, if the dictionary member
begins with the string <code>"modifier"</code>, then let the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="modifier-key-name">key modifier name</dfn> be the
dictionary member’s name excluding the prefix <code>"modifier"</code>, and set the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#event">Event</a></code> object’s <a href="#internal-key-modifier-state" id="ref-for-internal-key-modifier-state-1">internal key modifier state</a> that matches the <a href="#modifier-key-name" id="ref-for-modifier-key-name-1">key modifier name</a> to the corresponding value.</p>
</ul>
</ul>
</section>
<section>
<h2 class="heading settled" data-level="4" id="event-types"><span class="secno">4. </span><span class="content">Event Types</span><a class="self-link" href="#event-types"></a></h2>
<p>The DOM Event Model allows a DOM implementation to support multiple modules of
events. The model has been designed to allow addition of new event modules in
the future. This document does not attempt to define all possible events. For
purposes of interoperability, the DOM defines a module of user interface events
including lower level device dependent events and a module of document mutation
events.</p>
<h3 class="heading settled" data-level="4.1" id="events-uievents"><span class="secno">4.1. </span><span class="content">User Interface Events</span><a class="self-link" href="#events-uievents"></a></h3>
<p>The User Interface event module contains basic event types associated with
user interfaces and document manipulation.</p>
<h4 class="heading settled" data-level="4.1.1" id="interface-uievent"><span class="secno">4.1.1. </span><span class="content">Interface UIEvent</span><a class="self-link" href="#interface-uievent"></a></h4>
<p class="intro-dom">Introduced in DOM Level 2</p>
<p>The <code class="idl"><a data-link-type="idl" href="#uievent" id="ref-for-uievent-1">UIEvent</a></code> interface provides specific contextual information
associated with User Interface events.</p>
<p>To create an instance of the <code class="idl"><a data-link-type="idl" href="#uievent" id="ref-for-uievent-2">UIEvent</a></code> interface, use the UIEvent
constructor, passing an optional <code class="idl"><a data-link-type="idl" href="#dictdef-uieventinit" id="ref-for-dictdef-uieventinit-1">UIEventInit</a></code> dictionary.</p>
<h5 class="heading settled" data-level="4.1.1.1" id="idl-uievent"><span class="secno">4.1.1.1. </span><span class="content">UIEvent</span><a class="self-link" href="#idl-uievent"></a></h5>
<pre class="idl highlight def">[<dfn class="nv idl-code" data-dfn-for="UIEvent" data-dfn-type="constructor" data-export="" data-lt="UIEvent(type, eventInitDict)|UIEvent(type)" id="dom-uievent-uievent">Constructor<a class="self-link" href="#dom-uievent-uievent"></a></dfn>(<span class="kt">DOMString</span> <dfn class="nv idl-code" data-dfn-for="UIEvent/UIEvent(type, eventInitDict)" data-dfn-type="argument" data-export="" id="dom-uievent-uievent-type-eventinitdict-type">type<a class="self-link" href="#dom-uievent-uievent-type-eventinitdict-type"></a></dfn>, <span class="kt">optional</span> <a class="n" data-link-type="idl-name" href="#dictdef-uieventinit" id="ref-for-dictdef-uieventinit-2">UIEventInit</a> <dfn class="nv idl-code" data-dfn-for="UIEvent/UIEvent(type, eventInitDict)" data-dfn-type="argument" data-export="" id="dom-uievent-uievent-type-eventinitdict-eventinitdict">eventInitDict<a class="self-link" href="#dom-uievent-uievent-type-eventinitdict-eventinitdict"></a></dfn>), <a class="nv idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed">Exposed</a>=<span class="n">Window</span>]
<span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-type="interface" data-export="" id="uievent">UIEvent</dfn> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#event">Event</a> {
<span class="kt">readonly</span> <span class="kt">attribute</span> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/browsers.html#window">Window</a>? <dfn class="nv dfn-paneled idl-code" data-dfn-for="UIEvent" data-dfn-type="attribute" data-export="" data-readonly="" data-type="Window?" id="dom-uievent-view">view</dfn>;
<span class="kt">readonly</span> <span class="kt">attribute</span> <span class="kt">long</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="UIEvent" data-dfn-type="attribute" data-export="" data-readonly="" data-type="long" id="dom-uievent-detail">detail</dfn>;
};
</pre>
<dl>
<dt><code>UIEvent . view</code>
<dd>
The <code>view</code> attribute identifies the <code>Window</code> from which the event was generated.
<p>The <a data-link-type="dfn" href="#un-initialized-value" id="ref-for-un-initialized-value-1">un-initialized value</a> of this attribute MUST be <code>null</code>.</p>
<dt><code>UIEvent . detail</code>
<dd>
Specifies some detail information about the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#event">Event</a></code>, depending
on the type of event.
<p>The <a data-link-type="dfn" href="#un-initialized-value" id="ref-for-un-initialized-value-2">un-initialized value</a> of this attribute MUST be <code>0</code>.</p>
</dl>
<h5 class="heading settled" data-level="4.1.1.2" id="idl-uieventinit"><span class="secno">4.1.1.2. </span><span class="content">UIEventInit</span><a class="self-link" href="#idl-uieventinit"></a></h5>
<pre class="idl highlight def"><span class="kt">dictionary</span> <dfn class="nv dfn-paneled idl-code" data-dfn-type="dictionary" data-export="" id="dictdef-uieventinit">UIEventInit</dfn> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#dictdef-eventinit">EventInit</a> {
<a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/browsers.html#window">Window</a>? <dfn class="nv idl-code" data-default="null" data-dfn-for="UIEventInit" data-dfn-type="dict-member" data-export="" data-type="Window? " id="dom-uieventinit-view">view<a class="self-link" href="#dom-uieventinit-view"></a></dfn> = <span class="kt">null</span>;
<span class="kt">long</span> <dfn class="nv idl-code" data-default="0" data-dfn-for="UIEventInit" data-dfn-type="dict-member" data-export="" data-type="long " id="dom-uieventinit-detail">detail<a class="self-link" href="#dom-uieventinit-detail"></a></dfn> = 0;
};
</pre>
<dl>
<dt><code>UIEventInit . view</code>
<dd> Should be initialized to the Window object of the global
environment in which this event will be dispatched. If this
event will be dispatched to an element, the view property should
be set to the Window object containing the element’s <code>ownerDocument</code>.
<dt><code>UIEventInit . detail</code>
<dd> This value is initialized to a number that is
application-specific.
</dl>
<h4 class="heading settled" data-level="4.1.2" id="events-uievent-types"><span class="secno">4.1.2. </span><span class="content">UI Event Types</span><a class="self-link" href="#events-uievent-types"></a></h4>
<p>The User Interface event types are listed below. Some of these events
use the <code class="idl"><a data-link-type="idl" href="#uievent" id="ref-for-uievent-3">UIEvent</a></code> interface if generated from a user interface, but
the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#event">Event</a></code> interface otherwise, as detailed in each event.</p>
<h5 class="heading settled" data-level="4.1.2.1" id="event-type-load"><span class="secno">4.1.2.1. </span><span class="content"><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="load">load</dfn></span><a class="self-link" href="#event-type-load"></a></h5>
<table class="event-definition">
<tbody>
<tr>
<th>Type
<td><strong><code>load</code></strong>