Clean up "canceling default action" examples.
authorGary Kacmarcik <garykac@google.com>
Fri, 16 Aug 2013 20:36:09 -0700
changeset 444 330b6b252c67
parent 443 7c3e526b7924
child 445 5a985bc4e86a
Clean up "canceling default action" examples.

Remove Unicode column from event examples.
Correct keydown/keyup key example values to DeadCircumflex.
html/DOM3-Events.html
--- a/html/DOM3-Events.html	Fri Aug 16 19:11:11 2013 -0700
+++ b/html/DOM3-Events.html	Fri Aug 16 20:36:09 2013 -0700
@@ -6115,7 +6115,7 @@
 					in which users enter the base character first, keyboard input requires to enter a special state when a <a class="def" href="#glossary-dead-key">dead key</a> is
 					pressed and emit the character(s) only when one of a limited number of <q>legal</q> base character is entered.</p>
 
-				<p class="note"><strong>Note:</strong> The MacOS and Linux operating systems use input methods to process <a class="def" href="#glossary-dead-key">dead keys</a>.)</p>
+				<p class="note"><strong>Note:</strong> The MacOS and Linux operating systems use input methods to process <a class="def" href="#glossary-dead-key">dead keys</a>.</p>
 
 				<p>The <a class="def" href="#glossary-dead-key">dead keys</a> are represented in the key values set using combining diacritical marks.   While Unicode combining characters
 					always follow the handwriting sequence, with the combining character trailing the corresponding letter, typical deadkey input MAY reverse the sequence, with the
@@ -6138,7 +6138,7 @@
 						<tr>
 							<td class="cell-right">1.</td>
 							<td><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a></td>
-							<td class="cell-center"><code class="key">'^'</code></td>
+							<td class="cell-center"><code class="key">'DeadCircumflex'</code></td>
 							<td class="cell-center"></td>
 							<td><code class="char">'\u0302'</code></td>
 							<td>Combining Circumflex Accent</td>
@@ -6155,7 +6155,7 @@
 							<td class="cell-right">3.</td>
 							<td><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a></td>
 							<td class="cell-center"></td>
-							<td class="cell-center"><code class="key">'^'</code></td>
+							<td class="cell-center"><code class="key">'DeadCircumflex'</code></td>
 							<td><code class="char">'\u0302'</code></td>
 							<td></td>
 						</tr>
@@ -6172,7 +6172,7 @@
 							<td><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a></td>
 							<td class="cell-center"><code class="key">'ê'</code></td>
 							<td class="cell-center"></td>
-							<td><code class="char">'\u00EA'</code></td>
+							<td><code class="char">'\u00ea'</code></td>
 							<td></td>
 						</tr>
 						<tr>
@@ -6180,7 +6180,7 @@
 							<td><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a></td>
 							<td class="cell-center"></td>
 							<td class="cell-center"><code class="key">'ê'</code></td>
-							<td><code class="char">'\u00EA'</code></td>
+							<td><code class="char">'\u00ea'</code></td>
 							<td></td>
 						</tr>
 						<tr>
@@ -6188,7 +6188,7 @@
 							<td><a class="eventtype" href="#event-type-compositionend"><code>compositionend</code></a></td>
 							<td class="cell-center"></td>
 							<td class="cell-center"><code class="key">'ê'</code></td>
-							<td><code class="char">'\u00EA'</code></td>
+							<td><code class="char">'\u00ea'</code></td>
 							<td></td>
 						</tr>
 						<tr>
@@ -6310,8 +6310,8 @@
 					<code class="char">'\u0020'</code> (Space key) and <code class="key">'Enter'</code>.</p>
 
 				<p class="note"><strong>Note:</strong> <code class="glyph">'&#x8A69;'</code> (<q>poem</q>) and <code class="glyph">'&#x5E02;'</code> (<q>city</q>) are homophones, both
-					pronounced し (<q>shi</q>), so the user would use the <code class="key">'Convert'</code> key to select the proper option.</p>
-
+					pronounced し (<q>shi</q>), so the user needs to use the <code class="key">'Convert'</code> key to select the proper option.</p>
+					
 				<div class="example">
 					<div class="example-title">Example</div>
 					<table class="event-sequence-table">
@@ -6320,7 +6320,6 @@
 							<th>Event Name</th>
 							<th class="cell-center">KeyboardEvent<br/><code>key</code></th>
 							<th class="cell-center">CompositionEvent<br/><code>data</code></th>
-							<th>Unicode</th>
 							<th>Notes</th>
 						</tr>
 						<tr>
@@ -6328,7 +6327,6 @@
 							<td><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a></td>
 							<td class="cell-center"><code class="key">'s'</code></td>
 							<td class="cell-center"></td>
-							<td><code class="char">'\u0073'</code></td>
 							<td>Latin Small Letter S</td>
 						</tr>
 						<tr>
@@ -6337,14 +6335,12 @@
 							<td class="cell-center"></td>
 							<td class="cell-center"><code class="key">''</code></td>
 							<td></td>
-							<td></td>
 						</tr>
 						<tr>
 							<td class="cell-right">3.</td>
 							<td><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a></td>
 							<td class="cell-center"></td>
 							<td class="cell-center"><code class="key">'s'</code></td>
-							<td><code class="char">'\u0073'</code></td>
 							<td></td>
 						</tr>
 						<tr>
@@ -6352,7 +6348,6 @@
 							<td><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a></td>
 							<td class="cell-center"><code class="key">'s'</code></td>
 							<td class="cell-center"></td>
-							<td><code class="char">'\u0073'</code></td>
 							<td></td>
 						</tr>
 						<tr>
@@ -6360,7 +6355,6 @@
 							<td><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a></td>
 							<td class="cell-center"><code class="key">'i'</code></td>
 							<td class="cell-center"></td>
-							<td><code class="char">'\u0069'</code></td>
 							<td>Latin Small Letter I</td>
 						</tr>
 						<tr>
@@ -6368,7 +6362,6 @@
 							<td><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a></td>
 							<td class="cell-center"></td>
 							<td class="cell-center"><code class="key">'し'</code></td>
-							<td><code class="char">'\u3057'</code></td>
 							<td></td>
 						</tr>
 						<tr>
@@ -6376,7 +6369,6 @@
 							<td><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a></td>
 							<td class="cell-center"><code class="key">'i'</code></td>
 							<td class="cell-center"></td>
-							<td><code class="char">'\u0069'</code></td>
 							<td></td>
 						</tr>
 						<tr>
@@ -6384,7 +6376,6 @@
 							<td><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a></td>
 							<td class="cell-center"><code class="key">'Convert'</code></td>
 							<td class="cell-center"></td>
-							<td></td>
 							<td>Convert</td>
 						</tr>
 						<tr>
@@ -6392,7 +6383,6 @@
 							<td><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a></td>
 							<td class="cell-center"></td>
 							<td class="cell-center"><code class="key">'&#x8A69;'</code></td>
-							<td><code class="char">'\u8a69'</code></td>
 							<td></td>
 						</tr>
 						<tr>
@@ -6401,14 +6391,12 @@
 							<td class="cell-center"><code class="key">'Convert'</code></td>
 							<td class="cell-center"></td>
 							<td></td>
-							<td></td>
 						</tr>
 						<tr>
 							<td class="cell-right">11.</td>
 							<td><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a></td>
 							<td class="cell-center"><code class="key">'Convert'</code></td>
 							<td class="cell-center"></td>
-							<td></td>
 							<td>Convert</td>
 						</tr>
 						<tr>
@@ -6416,7 +6404,6 @@
 							<td><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a></td>
 							<td class="cell-center"></td>
 							<td class="cell-center"><code class="key">'&#x5E02;'</code></td>
-							<td><code class="char">'\u5e02'</code></td>
 							<td></td>
 						</tr>
 						<tr>
@@ -6425,14 +6412,12 @@
 							<td class="cell-center"><code class="key">'Convert'</code></td>
 							<td class="cell-center"></td>
 							<td></td>
-							<td></td>
 						</tr>
 						<tr>
 							<td class="cell-right">14.</td>
 							<td><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a></td>
 							<td class="cell-center"><code class="key">'Accept'</code></td>
 							<td class="cell-center"></td>
-							<td></td>
 							<td>Accept</td>
 						</tr>
 						<tr>
@@ -6440,7 +6425,6 @@
 							<td><a class="eventtype" href="#event-type-compositionend"><code>compositionend</code></a></td>
 							<td class="cell-center"></td>
 							<td class="cell-center"><code class="key">'&#x5E02;'</code></td>
-							<td><code class="char">'\u5e02'</code></td>
 							<td></td>
 						</tr>
 						<tr>
@@ -6449,7 +6433,6 @@
 							<td class="cell-center"><code class="key">'Accept'</code></td>
 							<td class="cell-center"></td>
 							<td></td>
-							<td></td>
 						</tr>
 					</table>
 				</div>
@@ -6466,7 +6449,6 @@
 							<th>Event Name</th>
 							<th class="cell-center">KeyboardEvent<br/><code>key</code></th>
 							<th class="cell-center">CompositionEvent<br/><code>data</code></th>
-							<th>Unicode</th>
 							<th>Notes</th>
 						</tr>
 						<tr>
@@ -6474,7 +6456,6 @@
 							<td><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a></td>
 							<td class="cell-center"><code class="key">'s'</code></td>
 							<td class="cell-center"></td>
-							<td><code class="char">'\u0073'</code></td>
 							<td>Latin Small Letter S</td>
 						</tr>
 						<tr>
@@ -6483,14 +6464,12 @@
 							<td class="cell-center"></td>
 							<td class="cell-center"><code class="key">''</code></td>
 							<td></td>
-							<td></td>
 						</tr>
 						<tr>
 							<td class="cell-right">3.</td>
 							<td><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a></td>
 							<td class="cell-center"></td>
 							<td class="cell-center"><code class="key">'s'</code></td>
-							<td><code class="char">'\u0073'</code></td>
 							<td></td>
 						</tr>
 						<tr>
@@ -6498,7 +6477,6 @@
 							<td><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a></td>
 							<td class="cell-center"><code class="key">'s'</code></td>
 							<td class="cell-center"></td>
-							<td><code class="char">'\u0073'</code></td>
 							<td></td>
 						</tr>
 						<tr>
@@ -6506,7 +6484,6 @@
 							<td><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a></td>
 							<td class="cell-center"><code class="key">'i'</code></td>
 							<td class="cell-center"></td>
-							<td><code class="char">'\u0069'</code></td>
 							<td>Latin Small Letter I</td>
 						</tr>
 						<tr>
@@ -6514,7 +6491,6 @@
 							<td><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a></td>
 							<td class="cell-center"></td>
 							<td class="cell-center"><code class="key">'し'</code></td>
-							<td><code class="char">'\u3057'</code></td>
 							<td></td>
 						</tr>
 						<tr>
@@ -6522,7 +6498,6 @@
 							<td><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a></td>
 							<td class="cell-center"><code class="key">'i'</code></td>
 							<td class="cell-center"></td>
-							<td><code class="char">'\u0069'</code></td>
 							<td></td>
 						</tr>
 						<tr>
@@ -6530,7 +6505,6 @@
 							<td><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a></td>
 							<td class="cell-center"><code class="key">'Convert'</code></td>
 							<td class="cell-center"></td>
-							<td></td>
 							<td>Convert</td>
 						</tr>
 						<tr>
@@ -6538,7 +6512,6 @@
 							<td><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a></td>
 							<td class="cell-center"></td>
 							<td class="cell-center"><code class="key">'&#x8A69;'</code></td>
-							<td><code class="char">'\u8a69'</code></td>
 							<td></td>
 						</tr>
 						<tr>
@@ -6547,14 +6520,12 @@
 							<td class="cell-center"><code class="key">'Convert'</code></td>
 							<td class="cell-center"></td>
 							<td></td>
-							<td></td>
 						</tr>
 						<tr>
 							<td class="cell-right">11.</td>
 							<td><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a></td>
 							<td class="cell-center"><code class="key">'Convert'</code></td>
 							<td class="cell-center"></td>
-							<td></td>
 							<td>Convert</td>
 						</tr>
 						<tr>
@@ -6562,7 +6533,6 @@
 							<td><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a></td>
 							<td class="cell-center"></td>
 							<td class="cell-center"><code class="key">'&#x5E02;'</code></td>
-							<td><code class="char">'\u5e02'</code></td>
 							<td></td>
 						</tr>
 						<tr>
@@ -6571,14 +6541,12 @@
 							<td class="cell-center"><code class="key">'Convert'</code></td>
 							<td class="cell-center"></td>
 							<td></td>
-							<td></td>
 						</tr>
 						<tr>
 							<td class="cell-right">14.</td>
 							<td><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a></td>
 							<td class="cell-center"><code class="key">'Cancel'</code></td>
 							<td class="cell-center"></td>
-							<td></td>
 							<td>Cancel</td>
 						</tr>
 						<tr>
@@ -6587,7 +6555,6 @@
 							<td class="cell-center"></td>
 							<td class="cell-center"><code class="key">''</code></td>
 							<td></td>
-							<td></td>
 						</tr>
 						<tr>
 							<td class="cell-right">16.</td>
@@ -6595,7 +6562,6 @@
 							<td class="cell-center"></td>
 							<td class="cell-center"><code class="key">''</code></td>
 							<td></td>
-							<td></td>
 						</tr>
 						<tr>
 							<td class="cell-right">17.</td>
@@ -6603,7 +6569,6 @@
 							<td class="cell-center"><code class="key">'Cancel'</code></td>
 							<td class="cell-center"></td>
 							<td></td>
-							<td></td>
 						</tr>
 					</table>
 				</div>
@@ -6638,26 +6603,66 @@
 				<h3>Default actions and cancelable keyboard events</h3>
 
 				<p>Canceling the <a class="def" href="#glossary-default-action">default action</a> of a <a class="eventtype" href="#event-type-keydown"><code>keydown</code></a> event
-					MUST NOT affect its respective <a class="eventtype" href="#event-type-keyup"><code>keyup</code></a> event, but it MUST prevent the respective <a class="eventtype"
-					href="#event-type-keypress"><code>keypress</code></a> event (if supported) from being generated. The following example describes a possible sequence of keys
+					MUST NOT affect its respective <a class="eventtype" href="#event-type-keyup"><code>keyup</code></a> event, but it MUST prevent the respective
+					<a class="eventtype" href="#event-type-beforeinput"><code>beforeinput</code></a> and
+					<a class="eventtype" href="#event-type-input"><code>input</code></a> events
+					(and <a class="eventtype" href="#event-type-keypress"><code>keypress</code></a>, if supported)
+					from being generated. The following example describes a possible sequence of keys
 					to generate the Unicode character Q (Latin Capital Letter Q) on a PC/AT US keyboard using a US mapping:</p>
 
 				<div class="example">
 					<div class="example-title">Example</div>
-					<ol>
-						<li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="key">'Shift'</code>, <code class="attribute-name"><a href="#events-MouseEvent-shiftKey">
-							shiftKey</a></code></li>
-						<li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="key">'Q'</code> (<code class="char">'\u0051'</code>, Latin Capital
-							Letter Q key), <code class="attribute-name"><a href="#events-MouseEvent-shiftKey">shiftKey</a></code></li>
-						<li>
-							<em>The <a class="def" href="#glossary-default-action">default action</a> of the <a class="eventtype" href="#event-type-keydown"><code>keydown</code></a> event is
-							prevented, e.g., by invoking <a href="#events-event-type-preventDefault"><code>Event.preventDefault()</code></a> during the dispatch of the <a class="eventtype"
-							href="#event-type-keydown"><code>keydown</code></a> event object</em></li>
-						<li><em>No <a class="eventtype" href="#event-type-keypress"><code>keypress</code></a> event is generated</em></li>
-						<li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="key">'Q'</code> (<code class="char">'\u0051'</code>, Latin Capital Letter
-							Q key), <code class="attribute-name"><a href="#events-MouseEvent-shiftKey">shiftKey</a></code></li>
-						<li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="key">'Shift'</code></li>
-					</ol>
+					<table class="event-sequence-table">
+						<tr>
+							<td class="cell-right"></td>
+							<th>Event Name</th>
+							<th class="cell-center">KeyboardEvent<br/><code>key</code></th>
+							<th class="cell-center">Event<br/><code>data</code></th>
+							<th class="cell-center">Modifiers</th>
+							<th>Notes</th>
+						</tr>
+						<tr>
+							<td class="cell-right">1.</td>
+							<td><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a></td>
+							<td class="cell-center"><code class="key">'Shift'</code></td>
+							<td class="cell-center"></td>
+							<td class="cell-center"><code class="attribute-name"><a href="#events-MouseEvent-shiftKey">shiftKey</a></code></td>
+							<td></td>
+						</tr>
+						<tr>
+							<td class="cell-right">2.</td>
+							<td><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a></td>
+							<td class="cell-center"><code class="key">'Q'</code></td>
+							<td class="cell-center"></td>
+							<td class="cell-center"><code class="attribute-name"><a href="#events-MouseEvent-shiftKey">shiftKey</a></code></td>
+							<td>The <a class="def" href="#glossary-default-action">default action</a> is
+								prevented, e.g., by invoking <a href="#events-event-type-preventDefault"><code>Event.preventDefault()</code></a>.
+								</td>
+						</tr>
+						<tr>
+							<td class="cell-right"></td>
+							<td colspan="5">
+								<em>No <a class="eventtype" href="#event-type-beforeinput"><code>beforeinput</code></a> or
+								<a class="eventtype" href="#event-type-input"><code>input</code></a> events are generated</em>
+								</td>
+						</tr>
+						<tr>
+							<td class="cell-right">3.</td>
+							<td><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a></td>
+							<td class="cell-center"><code class="key">'Q'</code></td>
+							<td class="cell-center"></td>
+							<td class="cell-center"><code class="attribute-name"><a href="#events-MouseEvent-shiftKey">shiftKey</a></code></td>
+							<td></td>
+						</tr>
+						<tr>
+							<td class="cell-right">4.</td>
+							<td><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a></td>
+							<td class="cell-center"><code class="key">'Shift'</code></td>
+							<td class="cell-center"></td>
+							<td class="cell-center"></td>
+							<td></td>
+						</tr>
+					</table>
 				</div>
 
 				<p>If the key is a modifier key, the keystroke MUST still be taken into account for the modifiers states. The following example describes a possible sequence of keys
@@ -6665,41 +6670,133 @@
 
 				<div class="example">
 					<div class="example-title">Example</div>
-					<ol>
-						<li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="key">'Shift'</code>, <code class="attribute-name"><a href="#events-MouseEvent-shiftKey">
-							shiftKey</a></code></li>
-						<li><em>The <a class="def" href="#glossary-default-action">default action</a> of the <a class="eventtype" href="#event-type-keydown"><code>keydown</code></a> event is
-							prevented, e.g., by invoking <a href="#events-event-type-preventDefault"><code>Event.preventDefault()</code></a> during the dispatch of the <a class="eventtype"
-							href="#event-type-keydown"><code>keydown</code></a> event object</em></li>
-						<li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="key">'Q'</code> (<code class="char">'\u0051'</code>, Latin Capital
-							Letter Q key), <code class="attribute-name"><a href="#events-MouseEvent-shiftKey">shiftKey</a></code></li>
-						<li><a class="eventtype" href="#event-type-keypress"><code>keypress</code></a>: <code class="key">'Q'</code></li>
-						<li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="key">'Q'</code> (<code class="char">'\u0051'</code>, Latin Capital Letter
-							Q key), <code class="attribute-name"><a href="#events-MouseEvent-shiftKey">shiftKey</a></code></li>
-						<li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="key">'Shift'</code></li>
-					</ol>
+					<table class="event-sequence-table">
+						<tr>
+							<td class="cell-right"></td>
+							<th>Event Name</th>
+							<th class="cell-center">KeyboardEvent<br/><code>key</code></th>
+							<th class="cell-center">Event<br/><code>data</code></th>
+							<th class="cell-center">Modifiers</th>
+							<th>Notes</th>
+						</tr>
+						<tr>
+							<td class="cell-right">1.</td>
+							<td><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a></td>
+							<td class="cell-center"><code class="key">'Shift'</code></td>
+							<td class="cell-center"></td>
+							<td class="cell-center"><code class="attribute-name"><a href="#events-MouseEvent-shiftKey">shiftKey</a></code></td>
+							<td>The <a class="def" href="#glossary-default-action">default action</a> is
+								prevented, e.g., by invoking <a href="#events-event-type-preventDefault"><code>Event.preventDefault()</code></a>.
+								</td>
+						</tr>
+						<tr>
+							<td class="cell-right">2.</td>
+							<td><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a></td>
+							<td class="cell-center"><code class="key">'Q'</code></td>
+							<td class="cell-center"></td>
+							<td class="cell-center"><code class="attribute-name"><a href="#events-MouseEvent-shiftKey">shiftKey</a></code></td>
+							<td></td>
+						</tr>
+						<tr>
+							<td class="cell-right">3.</td>
+							<td><a class="eventtype" href="#event-type-beforeinput"><code>beforeinput</code></a></td>
+							<td class="cell-center"></td>
+							<td class="cell-center"><code class="key">'Q'</code></td>
+							<td class="cell-center"></td>
+							<td></td>
+						</tr>
+						<tr>
+							<td class="cell-right">4.</td>
+							<td><a class="eventtype" href="#event-type-input"><code>input</code></a></td>
+							<td class="cell-center"></td>
+							<td class="cell-center"></td>
+							<td class="cell-center"></td>
+							<td></td>
+						</tr>
+						<tr>
+							<td class="cell-right">5.</td>
+							<td><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a></td>
+							<td class="cell-center"><code class="key">'Q'</code></td>
+							<td class="cell-center"></td>
+							<td class="cell-center"><code class="attribute-name"><a href="#events-MouseEvent-shiftKey">shiftKey</a></code></td>
+							<td></td>
+						</tr>
+						<tr>
+							<td class="cell-right">6.</td>
+							<td><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a></td>
+							<td class="cell-center"><code class="key">'Shift'</code></td>
+							<td class="cell-center"></td>
+							<td class="cell-center"></td>
+							<td></td>
+						</tr>
+					</table>
 				</div>
 
 				<p>If the key is part of a sequence of several keystrokes, whether it is a <a class="def" href="#glossary-dead-key">dead key</a> or it is contributing to an Input
 					Method Editor sequence, the keystroke MUST be ignored (not taken into account) only if the <a class="def" href="#glossary-default-action">default action</a> is
-					canceled on the <a class="eventtype" href="#event-type-keydown"><code>keydown</code></a> event. Canceling a <a class="def" href="#glossary-dead-key">dead key</a>
-					on a <a class="eventtype" href="#event-type-keyup"><code>keyup</code></a> event has no effect on <a class="eventtype" href="#event-type-keypress"><code>keypress</code></a>
-					events (if supported). The following example uses the keystrokes <code class="char">'\u0302'</code> (Combining Circumflex Accent key) and the key marked <code class="key">
+					canceled on the <a class="eventtype" href="#event-type-keydown"><code>keydown</code></a> event.
+					Canceling a <a class="def" href="#glossary-dead-key">dead key</a>
+					on a <a class="eventtype" href="#event-type-keyup"><code>keyup</code></a> event has no effect on
+					<a class="eventtype" href="#event-type-beforeinput"><code>beforeinput</code></a> or
+					<a class="eventtype" href="#event-type-input"><code>input</code></a> events.
+					The following example uses the keystrokes <code class="char">'\u0302'</code> (Combining Circumflex Accent key) and the key marked <code class="key">
 					'e'</code> (<code class="char">'\u0065'</code>, Latin Small Letter E key) (on a PC/AT french keyboard using a french mapping and without any modifier activated):</p>
 
 				<div class="example">
 					<div class="example-title">Example</div>
-					<ol>
-						<li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="char">'\u0302'</code> (Combining Circumflex Accent key)</li>
-						<li><em>The <a class="def" href="#glossary-default-action">default action</a> of the <a class="eventtype" href="#event-type-keydown"><code>keydown</code></a> event is
-							prevented, e.g., by invoking <a href="#events-event-type-preventDefault"><code>Event.preventDefault()</code></a> during the dispatch of the <a class="eventtype"
-							href="#event-type-keydown"><code>keydown</code></a> event object</em></li>
-						<li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="char">'\u0302'</code> (Combining Circumflex Accent key)</li>
-						<li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="key">'é'</code> (<code class="char">'\u00E9'</code>, LATIN SMALL LETTER
-							E WITH ACUTE)</li>
-						<li><a class="eventtype" href="#event-type-keypress"><code>keypress</code></a>: <code class="key">'é'</code></li>
-						<li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="key">'é'</code></li>
-					</ol>
+					<table class="event-sequence-table">
+						<tr>
+							<td class="cell-right"></td>
+							<th>Event Name</th>
+							<th class="cell-center">KeyboardEvent<br/><code>key</code></th>
+							<th class="cell-center">Event<br/><code>data</code></th>
+							<th>Notes</th>
+						</tr>
+						<tr>
+							<td class="cell-right">1.</td>
+							<td><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a></td>
+							<td class="cell-center"><code class="key">'DeadCircumflex'</code></td>
+							<td class="cell-center"></td>
+							<td>The <a class="def" href="#glossary-default-action">default action</a> is
+								prevented, e.g., by invoking <a href="#events-event-type-preventDefault"><code>Event.preventDefault()</code></a>.
+								</td>
+						</tr>
+						<tr>
+							<td class="cell-right">2.</td>
+							<td><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a></td>
+							<td class="cell-center"><code class="key">'DeadCircumflex'</code></td>
+							<td class="cell-center"></td>
+							<td></td>
+						</tr>
+						<tr>
+							<td class="cell-right">3.</td>
+							<td><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a></td>
+							<td class="cell-center"><code class="key">'é'</code></td>
+							<td class="cell-center"></td>
+							<td></td>
+						</tr>
+						<tr>
+							<td class="cell-right">4.</td>
+							<td><a class="eventtype" href="#event-type-beforeinput"><code>beforeinput</code></a></td>
+							<td class="cell-center"></td>
+							<td class="cell-center"><code class="key">'é'</code></td>
+							<td></td>
+						</tr>
+						<tr>
+							<td class="cell-right">5.</td>
+							<td><a class="eventtype" href="#event-type-input"><code>input</code></a></td>
+							<td class="cell-center"></td>
+							<td class="cell-center"></td>
+							<td></td>
+						</tr>
+						<tr>
+							<td class="cell-right">5.</td>
+							<td><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a></td>
+							<td class="cell-center"><code class="key">'é'</code></td>
+							<td class="cell-center"></td>
+							<td></td>
+						</tr>
+					</table>
 				</div>
 			</section>