--- a/html/DOM3-Events.html Tue Jun 04 13:07:53 2013 -0700
+++ b/html/DOM3-Events.html Tue Jun 04 13:15:03 2013 -0700
@@ -9,6 +9,7 @@
<link rel="stylesheet" type="text/css" href="spec-WD.css" />
<link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/w3c-tr.css" />
<link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-WD" />
+ <link rel="stylesheet" type="text/css" href="override.css" />
<script type="text/javascript" src='https://www.w3.org/Tools/respec/respec-w3c-common' class='remove' async></script>
<script type="text/javascript">
var respecConfig = {
@@ -243,7 +244,12 @@
<dd><p class="warning"><strong>Warning!</strong> This is a warning. It is used on security notes and to mark <a class="def" href="#glossary-deprecated">deprecated</a> features.</p></dd>
<dt>Examples</dt>
- <dd><p class="example"><strong>Example:</strong> This is an example.</p></dd>
+ <dd>
+ <div class="example">
+ <div class="example-title">Example</div>
+ <p>This is an example.</p>
+ </div>
+ </dd>
<!-- [Not current used in this document] <dt>Features at risk</dt>
<dd><p class="atrisk">This is a feature at risk, which is likely to be removed from the specification.</p></dd>-->
@@ -601,14 +607,19 @@
propagation path <span class="mustnot">must not</span> be changed; for DOM implementations, this applies even if an element in the propagation path is moved within the
DOM. or removed from the DOM.</p>
- <p class="example"><strong>Example:</strong> In the DOM event flow, event listeners might change the position of the <a class="def" href="#glossary-event-target">
+ <div class="example">
+ <div class="example-title">Example</div>
+ <p>In the DOM event flow, event listeners might change the position of the <a class="def" href="#glossary-event-target">
event target</a> in the document while the event object is being dispatched; such changes do not affect the propagation path.</p>
+ </div>
<p>Exceptions thrown inside event listeners <span class="mustnot">must not</span> stop the propagation of the event or affect the
<a class="def" href="#glossary-propagation-path">propagation path</a>. The exception itself <span class="mustnot">must not</span> propogate outside the scope of the event
handler.</p>
- <div class="example"><p><strong>Example:</strong> In the following code, the exception thrown from the call to <code>throw "Error"</code> does not propogate into the parent scope,
+ <div class="example">
+ <div class="example-title">Example</div>
+ <p>In the following code, the exception thrown from the call to <code>throw "Error"</code> does not propogate into the parent scope,
(which would prevent the <code>console.log</code> statement from executing):</p>
<pre>var e = document.createEvent("Event");
e.initEvent("myevent", false, false);
@@ -696,19 +707,25 @@
<em>default action</em></a>. Cancelable event objects can be associated with one or more <a class="def" href="#glossary-default-action">default actions</a>.
To cancel an event, call the <a href="#events-event-type-preventDefault"><code>Event.preventDefault()</code></a> method.</p>
- <p class="example"><strong>Example:</strong> A <a class="eventtype" href="#event-type-mousedown"><code>mousedown</code></a> event is dispatched immediately after the user presses down a button on a
+ <div class="example">
+ <div class="example-title">Example</div>
+ <p>A <a class="eventtype" href="#event-type-mousedown"><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 class="def" href="#glossary-default-action">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 class="def" href="#glossary-default-action">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 class="def" href="#glossary-default-action">default action</a> of a <a class="eventtype" href="#event-type-mousedown"><code>mousedown</code></a>
event prevents these actions from occuring.</p>
+ </div>
<p><a class="def" href="#glossary-default-action">Default actions</a> <span class="should">should</span> be performed after the event dispatch has been completed, but in exceptional
cases <span class="may">may</span> also be performed immediately before the event is dispatched.</p>
- <p class="example"><strong>Example:</strong> The default action associated with the <a class="eventtype" href="#event-type-click"><code>click</code></a> event on <input
+ <div class="example">
+ <div class="example-title">Example</div>
+ <p>The default action associated with the <a class="eventtype" href="#event-type-click"><code>click</code></a> event on <input
type="checkbox"> elements toggles the <code>checked</code> IDL attribute value of that element. If the <a class="eventtype" href="#event-type-click"><code>click</code>
</a> event's default action is cancelled, then the value is restored to its former state.</p>
+ </div>
<p id="events-dt-cancelable-event">When an event is canceled, then the conditional <a class="def" href="#glossary-default-action">default actions</a> associated with the event <span class="must">must</span> be skipped (or
as mentioned above, if the <a class="def" href="#glossary-default-action">default actions</a> are carried out before the dispatch, their effect <span class="must">must</span> be undone).
@@ -730,9 +747,12 @@
are associated with certain event objects. Further, implementations <span class="may">may</span> associate <a class="def" href="#glossary-default-action">default actions</a> with events as necessary and
appropriate for that implementation.</p>
- <p class="example"><strong>Example:</strong> As an example, one implementation might scroll a document view by a certain amount as the <a class="def" href="#glossary-default-action">
+ <div class="example">
+ <div class="example-title">Example</div>
+ <p>As an example, one implementation might scroll a document view by a certain amount as the <a class="def" href="#glossary-default-action">
default action</a> of a <a class="eventtype" href="#event-type-wheel"><code>wheel</code></a> event, while another implementation might instead zoom the document as its <a class="def"
href="#glossary-default-action">default action</a>.</p>
+ </div>
</section>
<section id="sync-async">
@@ -746,20 +766,26 @@
these events are governed by the <a class="def" href="#glossary-event-order">event order</a> algorithms defined for that set of events, and a user agent <span class="must">must</span> dispatch
these events in the defined order.</p>
- <p class="example"><strong>Example:</strong> A user double-clicks a passage of text to select a word, then presses the <code class="key">'Del'</code>
+ <div class="example">
+ <div class="example-title">Example</div>
+ <p>A user double-clicks a passage of text to select a word, then presses the <code class="key">'Del'</code>
key to erase the word, triggering the following synchronous sequence of events: <a class="eventtype" href="#event-type-mousedown"><code>mousedown</code></a>, <a
class="eventtype" href="#event-type-mouseup"><code>mouseup</code></a>, <a class="eventtype" href="#event-type-click"><code>click</code></a>, <a class="eventtype"
href="#event-type-mousedown"><code>mousedown</code></a>, <a class="eventtype" href="#event-type-mouseup"><code>mouseup</code></a>, <a class="eventtype" href="#event-type-click">
<code>click</code></a>, <a class="eventtype" href="#event-type-dblclick"><code>dblclick</code></a>, <a class="eventtype" href="#event-type-select"><code>select</code></a>,
<a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>, <a class="eventtype" href="#event-type-DOMCharacterDataModified"><code>DOMCharacterDataModified</code></a>.
Each of these events are fired in the sequence initiated by the user's actions.</p>
+ </div>
<p>Events which are asynchronous (<em><q>async events</q></em>) <span class="may">may</span> 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"><strong>Example:</strong> During loading of a document, an inline script element is parsed and executed. The <a class="eventtype" href="#event-type-load">
+ <div class="example">
+ <div class="example-title">Example</div>
+ <p>During loading of a document, an inline script element is parsed and executed. The <a class="eventtype" href="#event-type-load">
<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 <a class="eventtype"><code>DOMContentLoaded</code></a> event from <cite><a class="informative" href="#references-HTML5">HTML5</a></cite>) is not guaranteed.</p>
+ </div>
<section id="event-order-and-loops">
<h3>Event order and event loops</h3>
@@ -808,12 +834,15 @@
href="#glossary-host-language">host language</a> <span class="should">should</span> initiate these <a class="def" href="#glossary-activation-behavior">activation behavior</a> when the associated
<a class="def" href="#glossary-activation-trigger">activation trigger</a> occurs.</p>
- <p class="example" id="example-activation"><strong>Example:</strong> Both HTML and SVG have an <code><a></code> element which indicates a link. Relevant <a
+ <div class="example" id="example-activation">
+ <div class="example-title">Example</div>
+ <p>Both HTML and SVG have an <code><a></code> element which indicates a link. Relevant <a
class="def" href="#glossary-activation-trigger">activation triggers</a> for an <code><a></code> element are a <a class="eventtype" href="#event-type-click"><code>
click</code></a> event on the text or image content of the <code><a></code> element, or a <a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>
event with a <a href="#events-KeyboardEvent-key">key</a> attribute value of <a href="#key-Enter"><code class="key">'Enter'</code></a> 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>
+ </div>
<p>An <a class="def" href="#glossary-activation-trigger">activation trigger</a> is a user action or an event which indicates to the implementation that an activation
behavior <span class="should">should</span> be initiated. User-initiated <a class="def" href="#glossary-activation-trigger">activation triggers</a> include clicking a mouse button on an activatable
@@ -848,10 +877,13 @@
with the <a href="#events-event-type-preventDefault"><code>Event.preventDefault()</code></a>, <span class="must">must</span> stop the initiation of the <a class="def" href="#glossary-activation-behavior">
activation behavior</a>.</p>
- <p class="example"><strong>Example:</strong> When a user activates a hyperlink using a keyboard, such as by focusing the hyperlink element
+ <div class="example">
+ <div class="example-title">Example</div>
+ <p>When a user activates a hyperlink using a keyboard, such as by focusing the hyperlink element
and pressing the <a href="#key-Enter"><code class="key">'Enter'</code></a> or <a href="#key-Spacebar"><code class="key">'Space'</code></a> key, a <a class="eventtype"
href="#event-type-click"><code>click</code></a> event would be dispatched as the <a class="def" href="#glossary-default-action">default action</a> of the respective
<a class="eventtype" href="#event-type-keydown"><code>keydown</code></a> event.</p>
+ </div>
<p>Implementations <span class="must">must</span> dispatch the synthesized <a class="eventtype" href="#event-type-click"><code>click</code></a> event as described above even if they do not
normally dispatch such an event (e.g., when activation is requested by a voice command, since this specification does not address <a class="def" href="#glossary-event-type">
@@ -866,7 +898,9 @@
activation trigger</a>. However, such implementations <span class="should">should</span> only initiate the associated <a class="def" href="#glossary-activation-behavior">activation behavior</a>
once for any given occurrence of an <a class="def" href="#glossary-activation-trigger">activation trigger</a>.</p>
- <p class="example"><strong>Example:</strong> The <a class="eventtype" href="#event-type-DOMActivate"><code>DOMActivate</code></a>
+ <div class="example">
+ <div class="example-title">Example</div>
+ <p>The <a class="eventtype" href="#event-type-DOMActivate"><code>DOMActivate</code></a>
<a class="def" href="#glossary-event-type">event type</a> is <span class="required">required</span> to be supported for XForms [<cite><a class="informative" href="#ref-xforms">XFORMS</a></cite>],
which is intended for implementation within a <a class="def" href="#glossary-host-language">host language</a>. In a scenario where a plugin or script-based implementation
of XForms is intended for installation in a native implementation of this specification which does not support the <a class="eventtype" href="#event-type-DOMActivate">
@@ -879,6 +913,7 @@
cues might be whether the <a class="eventtype" href="#event-type-click"><code>click</code></a> event is <a href="#trusted-events">trusted</a>, or whether its <a
class="def" href="#glossary-event-target">event target</a> has a <a class="eventtype" href="#event-type-DOMActivate"><code>DOMActivate</code></a> event listener
registered.</p>
+ </div>
<p class="note"><strong>Authoring Note:</strong> Don't rely upon the interoperable support of <a class="eventtype" href="#event-type-DOMActivate">
<code>DOMActivate</code></a> in many <a class="def" href="#glossary-user-agent">user agents</a>. Use the <a class="eventtype" href="#event-type-click"><code>click</code></a>
@@ -1101,10 +1136,13 @@
<p>This method <span class="must">must</span> also reset the event object's internal-propagation and default-action-prevention states. This allows an event object to be "reset"
before being dispatched multiple times.</p>
- <p class="example"><strong>Example:</strong> If an <code>EventListener</code> called <code>stopPropagation()</code> or <code>stopImmediatePropagation()</code> during
+ <div class="example">
+ <div class="example-title">Example</div>
+ <p>If an <code>EventListener</code> called <code>stopPropagation()</code> or <code>stopImmediatePropagation()</code> during
the event's previous dispatch, then after calling this method, the event can be re-dispatched (via <code>dispatchEvent</code>) and will propagate through all candidate
event listeners along its propagation path (as it did during the prior dispatch). Similarily, if an <code>EventListener</code> called <code>preventDefault()</code>
during the event's previous dispatch, then after calling this method, the event's <code>defaultPrevented</code> property will be <code>false</code>.</p>
+ </div>
<p class="warning" id="warning-initEvent-untrusted"><strong>Warning!</strong> For security reasons, events modified using <a href="#events-event-type-initEvent"><code>
Event.initEvent()</code></a> <span class="must">must</span> have a <code class="attribute-name"><a href="#events-event-type-isTrusted">isTrusted</a></code> attribute value of <code>false</code>.
@@ -1414,11 +1452,14 @@
<a href="#events-Event"><code>Event</code></a> will need to be initialized with the appropriate event initialization
method (e.g., <code>initEvent</code>, <code>initMouseEvent</code>, etc.) in order to associate it with an event type and related values.</p>
- <p class="example"><strong>Example:</strong> A content author wishing to synthesize some kind of <a href="#events-UIEvent"><code>UIEvent</code></a>
+ <div class="example">
+ <div class="example-title">Example</div>
+ <p>A content author wishing to synthesize some kind of <a href="#events-UIEvent"><code>UIEvent</code></a>
would invoke <a href="#events-DocumentEvent-createEvent"><code>DocumentEvent.createEvent("UIEvent")</code></a>. The <a href="#events-event-type-initUIEvent"><code>
UIEvent.initUIEvent()</code></a> method could then be called on the newly created <a class="noxref" href="#events-UIEvent"><code>UIEvent</code></a> object to
set the specific type of user interface event to be dispatched, <a class="eventtype" href="#event-type-scroll"><code>scroll</code></a> for example, and set its
context information, e.g., <a href="#events-UIEvent-detail"><code>UIEvent.detail</code></a>.</p>
+ </div>
<p>For backward compatibility, the following case-insensitive feature names are valid values for the parameter <code>eventInterface</code>:</p>
@@ -1854,10 +1895,13 @@
</tr>
</table>
- <p class="example"><strong>Example: </strong>The following is one way to interpret the above table: the <a class="eventtype" href="#event-type-load"><code>load</code></a> event will
+ <div class="example">
+ <div class="example-title">Example</div>
+ <p>The following is one way to interpret the above table: the <a class="eventtype" href="#event-type-load"><code>load</code></a> event will
trigger event listeners attached on <code>Element</code> nodes for that event and on the capture and target phases. This event is not cancelable. If an event listener for the
<a class="eventtype" href="#event-type-load"><code>load</code></a> event is attached to a node other than <a class="def" href="#glossary-defaultView"><code>defaultView</code></a>,
<code>Document</code>, or <code>Element</code> nodes, or if it is attached to the bubbling phase only, this event listener would not be triggered.</p>
+ </div>
<p class="note"><strong>Note: </strong>Don't interpret the above table as definitive for the listed event types. For example, the <a class="eventtype"><code>load</code></a> event is used in other
specifications, for example, in XMLHttpRequest. Similarly, <a href="#events-EventTarget-dispatchEvent"><code>dispatchEvent</code></a> can be used to dispatch untrusted events to
@@ -3242,13 +3286,16 @@
<p>If the <a class="def" href="#glossary-event-target">event target</a> (e.g. the target element) is removed from the DOM during the mouse events sequence, the remaining
events of the sequence <span class="mustnot">must not</span> be fired on that element.</p>
- <p class="example"><strong>Example:</strong> if the target element is removed from the DOM as the result of a <a class="eventtype" href="#event-type-mousedown">
+ <div class="example">
+ <div class="example-title">Example</div>
+ <p>If the target element is removed from the DOM as the result of a <a class="eventtype" href="#event-type-mousedown">
<code>mousedown</code></a> event, no events for that element will be dispatched for <a class="eventtype" href="#event-type-mouseup"><code>mouseup</code></a>,
<a class="eventtype" href="#event-type-click"><code>click</code></a>, or <a class="eventtype" href="#event-type-dblclick"><code>dblclick</code></a>, nor any default
activation events; however, the <a class="eventtype" href="#event-type-mouseup"><code>mouseup</code></a> event will still be dispatched on the element that is exposed
to the mouse after the removal of the initial target element. Similarly, if the target element is removed from the DOM during the dispatch of a <a class="eventtype"
href="#event-type-mouseup"><code>mouseup</code></a> event, the <a class="eventtype" href="#event-type-click"><code>click</code></a> and subsequent events will
not be dispatched.</p>
+ </div>
</section>
@@ -3331,12 +3378,15 @@
href="#event-type-click"><code>click</code></a> event <span class="may">may</span> also be followed by the <a class="eventtype" href="#event-type-dblclick"><code>dblclick</code></a>
event.</p>
- <p class="example"><strong>Example:</strong> If a user mouses down on a text node child of a <p> element which has been styled with
- a large line-height, shifts the mouse slightly such that it is no longer over an area containing text but is still within the containing block of that <p>
- element (i.e., the pointer is between lines of the same text block, but not over the text node per se), then subsequently mouses up, this will likely still trigger
- a <a class="eventtype" href="#event-type-click"><code>click</code></a> event (if it falls within the normal temporal hysteresis for a <a class="eventtype" href="#event-type-click">
- <code>click</code></a>), since the user has stayed within the scope of the same element; user-agent-generated mouse events are not dispatched on text nodes.
- </p>
+ <div class="example">
+ <div class="example-title">Example</div>
+ <p>If a user mouses down on a text node child of a <p> element which has been styled with
+ a large line-height, shifts the mouse slightly such that it is no longer over an area containing text but is still within the containing block of that <p>
+ element (i.e., the pointer is between lines of the same text block, but not over the text node per se), then subsequently mouses up, this will likely still trigger
+ a <a class="eventtype" href="#event-type-click"><code>click</code></a> event (if it falls within the normal temporal hysteresis for a <a class="eventtype" href="#event-type-click">
+ <code>click</code></a>), since the user has stayed within the scope of the same element; user-agent-generated mouse events are not dispatched on text nodes.
+ </p>
+ </div>
<p>In addition to being associated with pointer devices, the <a class="eventtype" href="#event-type-click"><code>click</code></a> event type <span class="must">must</span> be dispatched as
part of an element activation, as described in <a href="#event-flow-activation">Activation triggers and behavior</a>.</p>
@@ -3999,8 +4049,11 @@
<p>Wheels are devices that can be rotated in one or more spatial dimensions, and which can be associated with a pointer device. The coordinate system depends on the
environment configuration.</p>
- <p class="example"><strong>Example:</strong> The user's environment might be configured to associate vertical scrolling with rotation along the y-axis, horizontal
+ <div class="example">
+ <div class="example-title">Example</div>
+ <p>The user's environment might be configured to associate vertical scrolling with rotation along the y-axis, horizontal
scrolling with rotation along the x-axis, and zooming with rotation along the z-axis.</p>
+ </div>
<p>The deltaX, deltaY, and deltaZ attributes of <a href="#events-WheelEvent"><code>WheelEvent</code></a> objects indicate a measurement along their respective axes
in units of pixels, lines, or pages. The reported measurements are provided after an environment-specific algorithm translates the actual rotation/movement of
@@ -4226,42 +4279,60 @@
<p>The key activation <span class="mustnot">must not</span> be distinguished as the left or right version of the key, and did not originate from the numeric keypad (or did not originate with
a virtual key corresponding to the numeric keypad).</p>
- <p class="example"><strong>Example:</strong> the <code class="key">'Q'</code> key on a PC 101 Key US keyboard.</p>
+ <div class="example">
+ <div class="example-title">Example</div>
+ <p>The <code class="key">'Q'</code> key on a PC 101 Key US keyboard.</p>
+ </div>
</dd>
<dt>const unsigned long DOM_KEY_LOCATION_LEFT = 0x01</dt>
<dd>
<p>The key activated originated from the left key location (there is more than one possible location for this key).</p>
- <p class="example"><strong>Example:</strong> the left <code class="key">'Control'</code> key on a PC 101 Key US keyboard.</p>
+ <div class="example">
+ <div class="example-title">Example</div>
+ <p>The left <code class="key">'Control'</code> key on a PC 101 Key US keyboard.</p>
+ </div>
</dd>
<dt>const unsigned long DOM_KEY_LOCATION_RIGHT = 0x02</dt>
<dd>
<p>The key activation originated from the right key location (there is more than one possible location for this key).</p>
- <p class="example"><strong>Example:</strong> the right <code class="key">'Shift'</code> key on a PC 101 Key US keyboard.</p>
+ <div class="example">
+ <div class="example-title">Example</div>
+ <p>The right <code class="key">'Shift'</code> key on a PC 101 Key US keyboard.</p>
+ </div>
</dd>
<dt>const unsigned long DOM_KEY_LOCATION_NUMPAD = 0x03</dt>
<dd>
<p>The key activation originated on the numeric keypad or with a virtual key corresponding to the numeric keypad.</p>
- <p class="example"><strong>Example:</strong> the <code class="key">'1'</code> key on a PC 101 Key US keyboard located on the numeric pad.</p>
+ <div class="example">
+ <div class="example-title">Example</div>
+ <p>The <code class="key">'1'</code> key on a PC 101 Key US keyboard located on the numeric pad.</p>
+ </div>
</dd>
<dt>const unsigned long DOM_KEY_LOCATION_MOBILE = 0x04</dt>
<dd>
<p>The key activation originated on a mobile device, either on a physical keypad or a virtual keyboard.</p>
- <p class="example"><strong>Example:</strong> the <code class="key">'#'</code> key or softkey on a mobile device.</p>
+ <div class="example">
+ <div class="example-title">Example</div>
+ <p>The <code class="key">'#'</code> key or softkey on a mobile device.</p>
+ </div>
</dd>
<dt>const unsigned long DOM_KEY_LOCATION_JOYSTICK = 0x05</dt>
<dd>
<p>The key activation originated on a game controller or a joystick on a mobile device.</p>
- <p class="example"><strong>Example:</strong> the <code class="key">'DownLeft'</code> key on a game controller.</p>
+ <div class="example">
+ <div class="example-title">Example</div>
+ <p>The <code class="key">'DownLeft'</code> key on a game controller.</p>
+ </div>
</dd>
<dt>readonly attribute DOMString char</dt>
@@ -5841,10 +5912,8 @@
filter key input using cryptic, platform- and implementation-specific numeric codes, with poor internationalization, such as the following pseudocode:</p>
<div class="example">
- <p><strong>Example:</strong></p>
-
- <pre><code>
-if ( ( event.charCode == 45 || event.charCode == 36 ) ||
+ <div class="example-title">Example</div>
+ <pre><code>if ( ( event.charCode == 45 || event.charCode == 36 ) ||
( event.charCode >= 48 && event.charCode <= 57 ) ||
( event.charCode >= 96 && event.charCode <= 105 ) ) {
<span class="comment">// minus sign, dollar sign, and numeric characters from keyboard and numpad</span>
@@ -5865,10 +5934,8 @@
advanced internationalization support, such as the following pseudocode:</p>
<div class="example">
- <p><strong>Example:</strong></p>
-
- <pre><code>
-if ( event.key == "-" || event.key.match("\p{Sc}") || event.key.match("\p{N}") ) {
+ <div class="example-title">Example</div>
+ <pre><code>if ( event.key == "-" || event.key.match("\p{Sc}") || event.key.match("\p{N}") ) {
<span class="comment">// minus sign, any currency symbol, and numeric characters (regardless of key location)</span>
<span class="comment">// ...</span>
}
@@ -5885,9 +5952,12 @@
<p>In addition, because Unicode categorizes each assigned <a class="def" href="#glossary-unicode-code-point">code point</a> into a group of code points used by a particular
human writing system, even more advanced capabilities are possible.</p>
- <p class="example"><strong>Example:</strong> A content author can match characters from a particular human script (e.g., Tibetan) using a regular expression such as
+ <div class="example">
+ <div class="example-title">Example</div>
+ <p>A content author can match characters from a particular human script (e.g., Tibetan) using a regular expression such as
<code>\p{Tibetan}</code>, to filter out other characters, or discover if a <a class="def" href="#glossary-unicode-code-point">code point</a> is in
a certain code block (range of code points), using a regular expression like <code>\p{InCyrillic}</code>.</p>
+ </div>
<p>To facilitate this, implementations <span class="should">should</span> support Unicode range detection using regular expressions, in a manner such as the Perl Compatible Regular Expressions
(PCRE) [<a href="#references-pcre">PCRE</a>].</p>
@@ -5911,8 +5981,7 @@
href="#glossary-unicode-code-point">Unicode code point</a> <code class="char">'\u0051'</code>) on a PC/AT US keyboard using a US mapping:</p>
<div class="example">
- <p><strong>Example:</strong></p>
-
+ <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>
@@ -5929,8 +5998,7 @@
<code>keyup</code></a> event:</p>
<div class="example">
- <p><strong>Example:</strong></p>
-
+ <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>
@@ -5944,8 +6012,7 @@
<p>The following example describes a possible sequence of keys that does not generate a Unicode character (using the same configuration):</p>
<div class="example">
- <p><strong>Example:</strong></p>
-
+ <div class="example-title">Example</div>
<ol>
<li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="key">'Control'</code>, ctrlKey</li>
<li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="key">'v'</code> (<code class="char">'\u0076'</code>, Latin Small Letter
@@ -5980,8 +6047,7 @@
character <code class="glyph">'ê'</code> (Latin Small Letter E With Circumflex), as preferred by the Unicode Normalization Form <em>NFC</em>:</p>
<div class="example">
- <p><strong>Example:</strong></p>
-
+ <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><a class="eventtype" href="#event-type-compositionstart"><code>compositionstart</code></a>: <code class="key">''</code></li>
@@ -6001,8 +6067,7 @@
available) after pressing a <a class="def" href="#glossary-dead-key">dead key</a>:</p>
<div class="example">
- <p><strong>Example:</strong></p>
-
+ <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><a class="eventtype" href="#event-type-compositionstart"><code>compositionstart</code></a>: <code class="key">''</code></li>
@@ -6043,8 +6108,7 @@
pronounced <q>shi</q>, so the user would use the <code class="key">'Convert'</code> key to select the proper option.</p>
<div class="example">
- <p><strong>Example:</strong></p>
-
+ <div class="example-title">Example</div>
<ol>
<li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="key">'s'</code> (<code class="char">'\u0073'</code>, Latin Small Letter
S key)</li>
@@ -6072,8 +6136,7 @@
(Escape key).</p>
<div class="example">
- <p><strong>Example:</strong></p>
-
+ <div class="example-title">Example</div>
<ol>
<li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="key">'s'</code> (<code class="char">'\u0073'</code>, Latin Small Letter
S key)</li>
@@ -6132,8 +6195,7 @@
to generate the Unicode character Q (Latin Capital Letter Q) on a PC/AT US keyboard using a US mapping:</p>
<div class="example">
- <p><strong>Example:</strong></p>
-
+ <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>
@@ -6154,8 +6216,7 @@
to generate the Unicode character Q (Latin Capital Letter Q) on a PC/AT US keyboard using a US mapping:</p>
<div class="example">
- <p><strong>Example:</strong></p>
-
+ <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>
@@ -6179,8 +6240,7 @@
'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">
- <p><strong>Example:</strong></p>
-
+ <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
@@ -6243,8 +6303,7 @@
</ol>
<div class="example">
- <p><strong>Examples:</strong></p>
-
+ <div class="example-title">Example</div>
<ul>
<li>On a PC/AT US keyboard with a right-handed single-hand Dvorak <a class="def" href="#glossary-key-mapping">key mapping</a>, the key labeled <code class="key">
'Q'</code> maps to the key values <code class="key">'5'</code> (unmodified) and <code class="key">'%'</code> (shifted). The primary function of this key
@@ -7710,8 +7769,11 @@
These init methods needed a long list of parameters that, in most cases, did not fully initialize all attributes of the event object. In order to fully initialize
an event interface which was derived from the basic <code>Event</code> interface, it was necessary to call the initializer of each of the derived interfaces explicitly.</p>
- <p class="example"><strong>Example: </strong>Initializing all the attributes of a MutationEvent requires calls to two initializer methods: <code>initEvent</code> and
- <code>initMutationEvent</code>.</p>
+ <div class="example">
+ <div class="example-title">Example</div>
+ <p>Initializing all the attributes of a MutationEvent requires calls to two initializer methods: <code>initEvent</code> and
+ <code>initMutationEvent</code>.</p>
+ </div>
<p>Due in part to the length of time in the development of this standard, some implementations <span class="may">may</span> have taken a dependency on a set of initializer methods that were
formerly defined in this specification. For completeness, these legacy event intializers are described in this Appendix.</p>
@@ -8439,7 +8501,8 @@
they are using.</p>
<div class="example">
- <p><strong>Example:</strong> A content author might have created an application which features a dynamically generated bar chart. This bar chart is meant to be updated
+ <div class="example-title">Example</div>
+ <p>A content author might have created an application which features a dynamically generated bar chart. This bar chart is meant to be updated
every 5 minutes, or when a feed shows new information, or when the user refreshes it manually by clicking a button. There are several handlers that have to be
called when the chart needs to be updated: the application has to fetch the most recent data, show an icon to the user that the event is being updated, and rebuild
the chart. To manage this, the content author can choose to create a custom <q>updateChart</q> event, which is fired whenever one of the trigger conditions is
@@ -8462,7 +8525,8 @@
name in Javascript.</p>
<div class="example">
- <p><strong>Example:</strong> A particular browser vendor, <q>FooCorp</q>, might wish to introduce a new event, <a class="eventtype"><code>jump</code></a>. This vendor implements
+ <div class="example-title">Example</div>
+ <p>A particular browser vendor, <q>FooCorp</q>, might wish to introduce a new event, <a class="eventtype"><code>jump</code></a>. This vendor implements
<a class="eventtype"><code>fooJump</code></a> in their browser, using their vendor-specific prefix, <code>'foo'</code>. Early adopters start experimenting with the event,
using <code>someElement.addEventListener("fooJump", doJump, false )</code>, and provide feedback to FooCorp, who change the behavior of <a class="eventtype"><code>fooJump</code></a>
accordingly.</p>