--- a/source_respec.htm Sat Jul 27 06:41:58 2013 -0700
+++ b/source_respec.htm Sat Jul 27 08:39:35 2013 -0700
@@ -6,6 +6,7 @@
<title>UI Events</title>
<script src='https://www.w3.org/Tools/respec/respec-w3c-common' class='remove' async></script>
<script type="text/javascript" src="respecEdConfig.js" class='remove'></script>
+ <script type="text/javascript" src="fixup.js" class='remove'></script>
<link rel="stylesheet" type="text/css" href="table.css" media="screen" />
</head>
<body>
@@ -90,9 +91,10 @@
initializing untrusted event objects more easily.
</p>
- <pre class="example">
+ <div class="example">
<p class="example-title">Synthesizing an untrusted event <em>using legacy initialization methods</em>:
</p>
+ <pre>
var event = document.createEvent("MouseEvent");
event.initMouseEvent("mouseover",
true,
@@ -109,18 +111,21 @@
null,
previousEventTarget);
eventTarget.dispatchEvent(event);
- </pre><!-- Synthesizing events - legacy -->
+ </pre>
+ </div><!-- Synthesizing events - legacy -->
- <pre class="example">
+ <div class="example">
<p class="example-title">Synthesizing an untrusted event <em>using constructors</em>:
</p>
+ <pre>
var event = new MouseEvent("mouseover",
{bubbles: true,
cancelable: true,
relatedTarget: previousEventTarget
});
eventTarget.dispatchEvent(event);
- </pre><!-- Synthesizing events - constructors -->
+ </pre>
+ </div><!-- Synthesizing events - constructors -->
<p>In the above example, the author only has to set the event object properties
that he or she wants. Using legacy initialization methods, such as
@@ -262,8 +267,8 @@
Level 3 Events.
</p>
- <pre class="example">
- <p class="example-text">
+ <div class="example">
+ <p>
In JavaScript, to initialize the
<code>buttons</code> attribute as if the right (2) and middle
button (4) were being pressed simultaneously, the buttons value
@@ -272,7 +277,7 @@
or:<br/>
<code>{ buttons: 6 }</code>
</p>
- </pre><!-- Initializing buttons -->
+ </div><!-- Initializing buttons -->
</dd>
<dt>EventTarget? relatedTarget = null</dt>
@@ -487,35 +492,39 @@
</dd>
</dl>
- <pre class="example">
+ <div class="example">
<p class="example-title">Calling <code>queryKeycap</code> for various keys
</p>
- queryKeyCap('KeyA') => <code class="glyph">'a'</code> <span class="example-comment">Default locale is 'en-US'</span>
- queryKeyCap('KeyA', 'en-US') => <code class="glyph">'a'</code>
- queryKeyCap('KeyA', 'fr-FR') => <code class="glyph">'q'</code>
- queryKeyCap('Digit2', 'en-US') => <code class="glyph">'2'</code>
- queryKeyCap('Digit2', 'fr-FR') => <code class="glyph">'é'</code> ('\u00e9')
- queryKeyCap('IntlRo', 'en-US') => <code class="key-code">'Undefined'</code> <span class="example-comment">Key doesn't exist in US keyboard</span>
- queryKeyCap('IntlRo', 'ja-JP') => <code class="glyph">'ろ'</code> ('\u308d')
- queryKeyCap('Quote', 'nl-US') => <code class="glyph">'´'</code> ('\u0301') <span class="example-comment">Combining accent</span>
- queryKeyCap('Quote', 'ru-RU') => <code class="glyph">'э'</code> ('\u042d')
- queryKeyCap('BackQuote', 'en-US') => <code class="glyph">'`'</code>
- queryKeyCap('BackQuote', 'ja-JP') => <code class="key-code">'BackQuote'</code> <span class="example-comment">Non-printable Halfwidth/Fullwidth Mode key</span>
- queryKeyCap('Space') => <code class="key-code">'Space'</code> <span class="example-comment">Non-printable</span>
- queryKeyCap('ShiftLeft') => <code class="key-code">'ShiftLeft'</code> <span class="example-comment">Non-printable</span>
-
- <p class="example-text">
+ <pre>
+queryKeyCap('KeyA') => <code class="glyph">'a'</code> <span class="example-comment">Default locale is 'en-US'</span>
+queryKeyCap('KeyA', 'en-US') => <code class="glyph">'a'</code>
+queryKeyCap('KeyA', 'fr-FR') => <code class="glyph">'q'</code>
+queryKeyCap('Digit2', 'en-US') => <code class="glyph">'2'</code>
+queryKeyCap('Digit2', 'fr-FR') => <code class="glyph">'é'</code> ('\u00e9')
+queryKeyCap('IntlRo', 'en-US') => <code class="key-code">'Undefined'</code> <span class="example-comment">Key doesn't exist in US keyboard</span>
+queryKeyCap('IntlRo', 'ja-JP') => <code class="glyph">'ろ'</code> ('\u308d')
+queryKeyCap('Quote', 'nl-US') => <code class="glyph">'´'</code> ('\u0301') <span class="example-comment">Combining accent</span>
+queryKeyCap('Quote', 'ru-RU') => <code class="glyph">'э'</code> ('\u042d')
+queryKeyCap('BackQuote', 'en-US') => <code class="glyph">'`'</code>
+queryKeyCap('BackQuote', 'ja-JP') => <code class="key-code">'BackQuote'</code> <span class="example-comment">Non-printable Halfwidth/Fullwidth Mode key</span>
+queryKeyCap('Space') => <code class="key-code">'Space'</code> <span class="example-comment">Non-printable</span>
+queryKeyCap('ShiftLeft') => <code class="key-code">'ShiftLeft'</code> <span class="example-comment">Non-printable</span>
+ </pre>
+ <p>
The value returned by <code>queryKeyCap</code> is suitable to be presented to a user (for example, in a
preferences dialog that allows the user to customize the key mappings) unless the returned value is
<code class="key-code">'Undefined'</code>
or if it is equal to the <code>code</code> that was passed in to the method.
- </p></pre>
+ </p>
+ </div>
- <pre class="example">
+ <div class="example">
<p class="example-title">Getting the current keycap for <code class="key-code">'KeyA'</code>
</p>
- queryKeyCap('KeyA', queryLocale())
- </pre>
+ <pre>
+queryKeyCap('KeyA', queryLocale())
+ </pre>
+ </div>
</section>
<section id="key-codes">
@@ -576,9 +585,10 @@
</section>
- <pre class="example">
+ <div class="example">
<p class="example-title">Handling the Left and Right Alt Keys
- </p><table class="data-table">
+ </p>
+ <table class="data-table">
<thead><tr><th>Keyboard Layout</th><th><code>char</code></th><th><code>key</code></th><th><code>code</code></th><th>Notes</th></tr></thead>
<tbody>
<tr><td>US</td><td><code class="glyph">''</code></td><td><code class="key-code">'Alt'</code></td><td><code class="key-code">'AltLeft'</code></td><td><code class="constant-name">DOM_KEY_LOCATION_LEFT</code></td></tr>
@@ -586,32 +596,34 @@
<tr><td>US</td><td><code class="glyph">''</code></td><td><code class="key-code">'Alt'</code></td><td><code class="key-code">'AltRight'</code></td><td><code class="constant-name">DOM_KEY_LOCATION_RIGHT</code></td></tr>
<tr><td>French</td><td><code class="glyph">''</code></td><td><code class="key-code">'AltGr'</code></td><td><code class="key-code">'AltRight'</code></td><td><code class="constant-name">DOM_KEY_LOCATION_RIGHT</code></td></tr>
</tbody>
- </table><p class="example-text">
- In this example, checking the <code>key</code> attribute permits matching <code class="key-code">'Alt'</code> without worrying about which Alt key (left or right) was pressed.
+ </table>
+ <p>In this example, checking the <code>key</code> attribute permits matching <code class="key-code">'Alt'</code> without worrying about which Alt key (left or right) was pressed.
Checking the <code>code</code> attribute permits matching the right Alt key (<code class="key-code">'AltRight'</code>) without worrying about which layout is currently in effect.
- </p><p class="example-text">Note that, in the French example, the <code class="key-code">'Alt'</code> and
+ </p>
+ <p>Note that, in the French example, the <code class="key-code">'Alt'</code> and
<code class="key-code">'AltGr'</code> keys retain their left and right location, even through there
is only one of each key.
</p>
- </pre><!-- Handling Left and Right Alt Keys -->
+ </div><!-- Handling Left and Right Alt Keys -->
- <pre class="example">
+ <div class="example">
<p class="example-title">Handling the Single Quote Key
- </p><table class="data-table">
+ </p>
+ <table class="data-table">
<thead><tr><th>Keyboard Layout</th><th><code>char</code></th><th><code>key</code></th><th><code>code</code></th><th>Notes</th></tr></thead>
<tbody>
<tr><td>US</td><td><code class="glyph">'''</code></td><td><code class="key-code">'''</code></td><td><code class="key-code">'Quote'</code></td><td></td></tr>
<tr><td>Japanese</td><td><code class="glyph">':'</code></td><td><code class="key-code">':'</code></td><td><code class="key-code">'Quote'</code></td><td></td></tr>
<tr><td>US Intl</td><td><code class="glyph">''</code></td><td><code class="key-code">'DeadAcute'</code></td><td><code class="key-code">'Quote'</code></td><td></td></tr>
</tbody>
- </table><p class="example-text">
- This example shows how dead key values are encoded in the attributes. The <code>char</code> and
+ </table>
+ <p>This example shows how dead key values are encoded in the attributes. The <code>char</code> and
<code>key</code> values vary based on the current locale, whereas the <code>code</code> attribute
returns a consistent value.
</p>
- </pre><!-- Handling the Single Quote Key -->
+ </div><!-- Handling the Single Quote Key -->
- <pre class="example">
+ <div class="example" id="example-key-2">
<p class="example-title">Handling the '2' Key (with and without Shift pressed)
</p>
<table class="data-table">
@@ -624,16 +636,16 @@
<tr><td>French</td><td><code class="glyph">'é'</code></td><td><code class="key-code">'é'</code></td><td><code class="key-code">'Digit2'</code></td><td></td></tr>
<tr><td>French</td><td><code class="glyph">'2'</code></td><td><code class="key-code">'2'</code></td><td><code class="key-code">'Digit2'</code></td><td><code class="constant-name">shiftKey</code></td></tr>
</tbody>
- </table><p class="example-text">
- Regardless of the current locale or the modifier key state, pressing the key labelled <code class="keycap">2</code>
+ </table>
+ <p>Regardless of the current locale or the modifier key state, pressing the key labelled <code class="keycap">2</code>
on a US keyboard always results in <code class="key-code">'Digit2'</code> in the <code>code</code> attribute.
</p>
- </pre><!-- Handling the 2 Key -->
+ </div><!-- Handling the 2 Key -->
- <pre class="example">
+ <div class="example" id="example-key-shift-2">
<p class="example-title">Sequence of Keyboard Events : Shift and '2'
- </p><p class="example-text">
- Compare the attribute values in the following two key event sequences. They both produce the
+ </p>
+ <p>Compare the attribute values in the following two key event sequences. They both produce the
<code class="glyph">'@'</code> character on a US keyboard, but differ in the order in which the
keys are released. In the first sequence, the order is Shift (down), 2 (down), 2 (up), Shift (up).
</p>
@@ -646,8 +658,8 @@
<tr><td>US</td><td>keyup</td><td><code class="glyph">'@'</code></td><td><code class="key-code">'@'</code></td><td><code class="key-code">'Digit2'</code></td><td><code class="constant-name">shiftKey</code></td></tr>
<tr><td>US</td><td>keyup</td><td><code class="glyph">''</code></td><td><code class="key-code">'Shift'</code></td><td><code class="key-code">'ShiftLeft'</code></td><td><code class="constant-name">DOM_KEY_LOCATION_LEFT</code></td></tr>
</tbody>
- </table><p class="example-text">
- In the second sequence, the Shift is released before the 2, resulting in the following event order:
+ </table>
+ <p>In the second sequence, the Shift is released before the 2, resulting in the following event order:
Shift (down), 2 (down), Shift (up), 2 (up).
</p>
<table class="data-table">
@@ -659,12 +671,12 @@
<tr><td>US</td><td>keyup</td><td><code class="glyph">''</code></td><td><code class="key-code">'Shift'</code></td><td><code class="key-code">'ShiftLeft'</code></td><td><code class="constant-name">DOM_KEY_LOCATION_LEFT</code></td></tr>
<tr><td>US</td><td>keyup</td><td><code class="glyph">'2'</code></td><td><code class="key-code">'2'</code></td><td><code class="key-code">'Digit2'</code></td><td></td></tr>
</tbody>
- </table><p class="example-text">
- Note that the values contained in the <code>char</code> and <code>key</code> attributes do not match between
+ </table>
+ <p>Note that the values contained in the <code>char</code> and <code>key</code> attributes do not match between
the keydown and keyup events for the '2' key. The <code>code</code> attribute provides a consistent value
that is not affected by the current modifier state.
</p>
- </pre><!-- Sequence of Keyboard Events: Shift and 2 -->
+ </div><!-- Sequence of Keyboard Events: Shift and 2 -->
</section>