--- a/html/DOM3-Events.html Thu Jan 21 04:24:05 2010 +0900
+++ b/html/DOM3-Events.html Thu Jan 21 13:14:41 2010 +0900
@@ -13,155 +13,7 @@
<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-ED" />
<!-- <link rel="local stylesheet" type="text/css" href="W3C-WD.css" /> -->
- <style type="text/css">
- /* style for heading links */
- a[id]:hover:after {
- content: " #" attr(id) " § ";
- font-size: 80%;
- color: #ccc;
- text-decoration: none;
- }
-
- h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
- color: inherit !important;
- font-weight: inherit !important;
- text-decoration: none !important;
- font-style: inherit !important;
- }
-
-
-
-
- .inline {
- display: inline;
- border-left: none;
- border-right: none;
- padding: 0em;
- }
-
- .value {
- color: #191970;
- }
-
- .typeCell {
- background-color: #cfcfcf;
- }
-
- h5 {
- font-weight: bold;
- }
-
- dl#glossary-list dt a
- {
- font-weight: bold;
- }
-
- .eventname {
- background-color: #cfcfcf;
- }
-
- a.eventtype {
- text-decoration: none;
- }
-
- a.eventtype code {
- font-size: 1.13em;
- }
-
- .charval {
- color: #191970;
- background-color: #ffe4b5;
- }
-
- .keyname {
- color: #191970;
- background-color: #b0e0e6;
- }
-
- .codepoint {
- color: #191970;
- background-color: #98fb98;
- }
-
- dl#key-id-set dt {
- display: inline;
- }
-
- a.def {
- color: inherit;
- text-decoration: inherit;
- border-bottom: 1.8px dashed blue;
- /*
- padding-bottom: -2em;
- margin-bottom: -2em;
- */
- }
-
-
- /* style for heading links */
- a[id]:hover:after {
- content: " #" attr(id) " § ";
- font-size: 80%;
- color: #ccc;
- text-decoration: none;
- }
-
- h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
- color: inherit !important;
- font-weight: inherit !important;
- text-decoration: none !important;
- font-style: inherit !important;
- }
-
-
-
- /*style for keyValues keyCode charCode table*/
- table#tbl-keyValues-keyCode-charCode { border: 1px solid black; border-spacing: 0px; padding: 2px; }
- #tbl-keyValues-keyCode-charCode td { border: 1px solid #d3d3d3 }
- #tbl-keyValues-keyCode-charCode th { border: 1px solid black }
-
- #tbl-keyValues-keyCode-charCode th { text-align: center; font-weight: bold }
-
- #tbl-keyValues-keyCode-charCode th { vertical-align: middle; font-size: 0.85em; }
- #tbl-keyValues-keyCode-charCode td { vertical-align: middle; text-align: center; }
-
- .smallRow1 th {
- font-size: 0.75em;
- display:block;
- width:1.5em;
- height:1.5em;
- height:auto;
- }
-
- .verticalCell1 {
- display:block;
- width:1.5em;
- height:1.5em;
- height:auto;
- }
-
- #tbl-keyValues-keyCode-charCode td:first-child + td + td + td + td,
- #tbl-keyValues-keyCode-charCode td:first-child + td + td + td + td + td + td + td + td + td + td,
- #tbl-keyValues-keyCode-charCode td:first-child + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td,
- #tbl-keyValues-keyCode-charCode td:first-child + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td
- {
- border-left: 1px solid black;
- }
-
-
- #tbl-keyValues-keyCode-charCode td:first-child + td + td + td + td + td + td,
- #tbl-keyValues-keyCode-charCode td:first-child + td + td + td + td + td + td + td + td,
- #tbl-keyValues-keyCode-charCode td:first-child + td + td + td + td + td + td + td + td + td + td + td + td,
- #tbl-keyValues-keyCode-charCode td:first-child + td + td + td + td + td + td + td + td + td + td + td + td + td + td,
- #tbl-keyValues-keyCode-charCode td:first-child + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td,
- #tbl-keyValues-keyCode-charCode td:first-child + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td,
- #tbl-keyValues-keyCode-charCode td:first-child + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td,
- #tbl-keyValues-keyCode-charCode td:first-child + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td + td
- {
- border-left: 1px solid gray;
- }
-
- </style>
+
</head>
<body>
<div id="Overview" class="head">
@@ -176,7 +28,7 @@
<dl>
<dt>This version:</dt>
<dd>
- <a href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html?rev=1.110">http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html?rev=1.110</a>
+ <a href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html?rev=1.111">http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html?rev=1.111</a>
</dd>
<dt>Latest stable version:</dt>
<dd>
@@ -184,7 +36,7 @@
</dd>
<dt>Previous version:</dt>
<dd>
- <a href="http://dev.w3.org/cvsweb/~checkout~/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html?rev=1.109">http://dev.w3.org/cvsweb/~checkout~/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html?rev=1.109</a>
+ <a href="http://dev.w3.org/cvsweb/~checkout~/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html?rev=1.110">http://dev.w3.org/cvsweb/~checkout~/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html?rev=1.110</a>
</dd>
<dt>Editor's Draft:</dt>
<dd>
@@ -282,6 +134,9 @@
<a href="#event-flow-cancelation">3.2 Default actions and cancelable events</a>
</li>
<li>
+ <a href="#sync-async">3.3 Synchronous and asynchronous events</a>
+ </li>
+ <li>
<a href="#event-flow-activation">3.3 Activation requests and behavior</a>
</li>
</ul>
@@ -355,7 +210,7 @@
<a href="#events-mouseevents">5.2.3 Mouse Event Types</a>
<ul class="toc">
<li><a href="#events-mouseevent-coord-norm">5.2.3.1 Coordinate Normalization</a></li>
- <li><a href="#events-mouse-event-order">5.2.3.2 Mouse Event Order</a></li>
+ <li><a href="#events-mouseevent-event-order">5.2.3.2 Mouse Event Order</a></li>
<li><a class="eventtype" href="#event-type-click"><code>click</code> event</a></li>
<li><a class="eventtype" href="#event-type-dblclick"><code>dblclick</code> event</a></li>
<li><a class="eventtype" href="#event-type-mousedown"><code>mousedown</code> event</a></li>
@@ -717,7 +572,7 @@
<dd>The term "DOM Level 0" refers to a mix of HTML document functionalities, often not formally specified but traditionally supported as de facto standards, implemented originally by Netscape Navigator version 3.0 or Microsoft Internet Explorer version 3.0. In many cases, attributes or methods have been included for reasons of backward compatibility with "DOM Level 0".</dd>
<dt id="glossary-event">event</dt>
- <dd>An event is the representation of some asynchronous occurrence (such as a mouse click on the presentation of the element, or the removal of child node from an element, or any of unthinkably many other possibilities) that gets associated with an <a class="def" href="#glossary-event-target">event target</a>. An event is the instantiation of an <a class="def" href="#glossary-event-type">event type</a>.</dd>
+ <dd>An event is the representation of some occurrence (such as a mouse click on the presentation of an element, the removal of child node from an element, or any number of other possibilities) which is associated with its <a class="def" href="#glossary-proximal-event-target">proximal event target</a>. Each event is an instantiation of one specific <a class="def" href="#glossary-event-type">event type</a>.</dd>
<dt id="glossary-event-phase">event phase</dt>
<dd>See <a class="def" href="#glossary-phase">phase</a>.</dd>
@@ -866,9 +721,25 @@
<p id="events-dt-cancelable-event">Some event objects are <em>cancelable</em>, meaning the <a class="def" href="#glossary-default-action">default action</a> can be prevented from occuring, or, if the <a class="def" href="#glossary-default-action">default action</a> is carried out before the dispatch, its effect may be reversed. Whether an event object is cancelable shall be indicated by the <a href="#events-event-type-canCancel"><code>Event.cancelable</code></a> attribute. Event listeners can cancel <a class="def" href="#glossary-default-action">default actions</a> of cancelable event objects by invoking the <a href="#events-event-type-preventDefault"><code>Event.preventDefault()</code></a> method, and determine whether an event has been canceled through the <a href="#events-event-type-defaultPrevented"><code>Event.defaultPrevented</code></a> attribute while the object is being dispatched, or from the return value of the <a href="#events-Events-EventTarget-dispatchEvent"><code>EventTarget.dispatchEvent()</code></a> method for event objects dispatched by the <a class="def" href="#glossary-DOM-application">DOM application</a> itself.</p>
<p>This specification does not offer features to programatically query if an event object has any <a class="def" href="#glossary-default-action">default action</a> associated with it, or to associate new <a class="def" href="#glossary-default-action">default actions</a> to an event object. Other specifications may define what default actions, if any, are associated with certain event objects. Further, implementations may associate <a class="def" href="#glossary-default-action">default actions</a> with events as necessary and appropriate for that implementation. As an example, one implementation may scroll a document view by a certain amount as <a class="def" href="#glossary-default-action">default action</a> of a mouse wheel event, while another implementation may instead zoom the document as its <a class="def" href="#glossary-default-action">default action</a> for a mouse wheel event.</p>
</div>
+
+
+
<!-- div2 Events-flow-cancelation -->
<div class="div2">
- <h3 class="div2"><a id="event-flow-activation" href="#event-flow-activation">3.3 Activation requests and behavior</a></h3>
+ <h3 class="div2"><a id="sync-async" href="#sync-async">3.3 Synchronous and asynchronous events</a></h3>
+ <p>Events may occur either synchronously (sync) or asynchronously (async).</p>
+ <p>Events which are synchronous must be 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 must be 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 event order algorithms defined for that set of events, and a user agent must dispatch these events in the defined order.</p>
+
+ <p class="example" id="example-sync"><strong>Example:</strong> A user double-clicks a passage of text to select a word, then presses the <code class="value">'delete'</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>
+
+ <p>Events which are asynchronous 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-async"><strong>Example:</strong> <i class="note"><strong>To Do:</strong> Create good example of async events.</i></p>
+ </div>
+
+<!-- div2 Events-flow-cancelation -->
+ <div class="div2">
+ <h3 class="div2"><a id="event-flow-activation" href="#event-flow-activation">3.4 Activation requests and behavior</a></h3>
<p class="note" id="activation-rewritten"><strong>Note:</strong> This section is currently being rewritten.</p>
<p class="warning" id="activation-deprecated"><strong>Warning!</strong> The <a class="eventtype" href="#event-type-DOMActivate"><code>DOMActivate</code></a> <a class="def" href="#glossary-event-type">event type</a> is deprecated in this specification, and this section will be revised to reflect this.</p>
<p>Event targets may have associated <a class="def" href="#glossary-activation-behavior">activation behavior</a> that implementations perform in response to an <em>activation request</em>. As an example, the typical activation behavior associated with hyperlinks is to follow the link. Activation requests are typically initiated by users through an input device.</p>
@@ -6443,24 +6314,22 @@
<h2><a id="extending_events-Custom_Events" href="#extending_events-Custom_Events">A.2 Custom Events</a></h2>
<p>A script author may wish to define an application in terms of functional components, with event types that are meaningful to the application architecture. The author can use the <a href="#events-Events-CustomEvent"><code>CustomEvent</code></a> interface to create their own events appropriate to the level of abstraction they are using.</p>
- <div class="example">
- <p>As an example, an author may 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 must 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 author can choose to create a custom "updateChart" event, which is fired whenever one of the trigger conditions is met:</p>
- <pre>
- <code>
+ <div class="example" id="example-custom-events">
+ <p><strong>Example:</strong> An author may 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 must 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 author can choose to create a custom "updateChart" event, which is fired whenever one of the trigger conditions is met:</p>
+ <pre><code>
var chartData = ...;
var evt = document.createEvent("CustomEvent");
evt.initCustomEventNS("http://example.org/charts",
"updateChart",
true, false, { data: chartData });
document.documentElement.dispatchEvent(evt);
- </code>
- </pre>
+ </code></pre>
</div>
<h2><a id="extending_events-Impl_Extensions" href="#extending_events-Impl_Extensions">A.3 Implementation-Specific Extensions</a></h2>
<p>While a new event is being designed and prototyped, or when an event is intended for implementation-specific functionality, it is desirable to distinguish it from standardized events. Implementors should prefix event types specific to their implementations with a short string to distinguish it from the same event in other implementations and from standardized events. This is similar to the <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords" title="CSS 2.1: Syntax and basic data types">vendor-specific keyword prefixes</a> in CSS, though without the dashes ("-") used in CSS, since that can cause problems when used as an attribute name in Javascript.</p>
- <p class="example">As an example, a particular browser vendor, "FooCorp", may wish to introduce a new event, "<code>jump</code>". This vendor implements "<code>fooJump</code>" in their browser, using their vendor-specific prefix, <code class="value">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 "<code>fooJump</code>" accordingly. After some time, another vendor, "BarOrg", decides they also want the functionality, but implement it slightly differently, so they use their own vendor-specific prefix, <code class="value">bar</code> in their event type name, "<code>barJump</code>". Authors experimenting with this version of the "<code>jump</code>" event type register events with BarOrg's event type name. Authors who wish to write code that accounts for both browsers can either register each event type separately with specific handlers, or use the same handler and switch on the name of the event type; thus, early experiments in different codebases do not conflict, and the early adopter is able to write easily-maintained code for multiple implementations. Eventually, as the feature matures, the behavior of both browsers stabilize and may converge due to author and user feedback or through formal standardization; as this stabilization occurs, and risk of conflicts decrease, authors can remove the forked code, and use the "<code>jump</code>" event type name (even before it is formally standardized) using the same event handler and the more generic registration method <code>someElement.addEventListener( "jump", doJump, false )</code>.</p>
+ <p class="example" id="example-impl-extensions"><strong>Example:</strong> A particular browser vendor, "FooCorp", may wish to introduce a new event, "<code>jump</code>". This vendor implements "<code>fooJump</code>" in their browser, using their vendor-specific prefix, <code class="value">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 "<code>fooJump</code>" accordingly. After some time, another vendor, "BarOrg", decides they also want the functionality, but implement it slightly differently, so they use their own vendor-specific prefix, <code class="value">bar</code> in their event type name, "<code>barJump</code>". Authors experimenting with this version of the "<code>jump</code>" event type register events with BarOrg's event type name. Authors who wish to write code that accounts for both browsers can either register each event type separately with specific handlers, or use the same handler and switch on the name of the event type; thus, early experiments in different codebases do not conflict, and the early adopter is able to write easily-maintained code for multiple implementations. Eventually, as the feature matures, the behavior of both browsers stabilize and may converge due to author and user feedback or through formal standardization; as this stabilization occurs, and risk of conflicts decrease, authors can remove the forked code, and use the "<code>jump</code>" event type name (even before it is formally standardized) using the same event handler and the more generic registration method <code>someElement.addEventListener( "jump", doJump, false )</code>.</p>
<h3><a id="extending_events-prefixes" href="#extending_events-prefixes">A.3.1 Known Implementation-Specific Prefixes</a></h3>
@@ -6470,25 +6339,25 @@
<thead>
<tr>
<th>Prefix</th>
- <th>Organization</th>
+ <th>Web Engine (Organization)</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>moz</code>, <code>Moz</code></td>
- <td>Mozilla</td>
+ <td>Gecko (Mozilla)</td>
</tr>
<tr>
- <td><code>ms</code></td>
- <td>Microsoft</td>
+ <td><code>ms</code>, <code>MS</code></td>
+ <td>Trident (Microsoft)</td>
</tr>
<tr>
- <td><code>o</code> <em class="issue" id="issue-50"><strong>Issue:</strong> is this correct?</em></td>
- <td>Opera Software</td>
+ <td><code>o</code>, <code>O</code> <em class="issue" id="issue-50"><strong>Issue:</strong> is this correct?</em></td>
+ <td>Presto (Opera Software)</td>
</tr>
<tr>
<td><code>webkit</code></td>
- <td>WebKit (Apple, Nokia, Google, others)</td>
+ <td>WebKit (Apple, Google, others)</td>
</tr>
</tbody>
</table>