[html5] r6652 - [giow] (2) Define how event handler registration works to be compatible with IE [...]

whatwg at whatwg.org whatwg at whatwg.org
Fri Oct 7 14:41:57 PDT 2011


Author: ianh
Date: 2011-10-07 14:41:56 -0700 (Fri, 07 Oct 2011)
New Revision: 6652

Modified:
   complete.html
   index
   source
Log:
[giow] (2) Define how event handler registration works to be compatible with IE and Firefox.
Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=13684

Modified: complete.html
===================================================================
--- complete.html	2011-10-06 23:41:21 UTC (rev 6651)
+++ complete.html	2011-10-07 21:41:56 UTC (rev 6652)
@@ -240,7 +240,7 @@
 
   <header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
    <hgroup><h1 class=allcaps>HTML</h1>
-    <h2 class="no-num no-toc">Living Standard — Last Updated 6 October 2011</h2>
+    <h2 class="no-num no-toc">Living Standard — Last Updated 7 October 2011</h2>
    </hgroup><dl><dt><strong>Web developer edition:</strong></dt>
     <dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
     <dt>Multiple-page version:</dt>
@@ -3831,10 +3831,10 @@
      <li><dfn id=event><code>Event</code></dfn> interface</li>
      <li><dfn id=eventtarget><code>EventTarget</code></dfn> interface</li>
      <li><dfn id=eventinit><code>EventInit</code></dfn> dictionary type</li>
+     <li><dfn id=dom-event-target title=dom-Event-target><code>target</code></dfn> attribute</li>
      <li>The <dfn id=concept-event-type title=concept-event-type>type</dfn> of an event</li>
+     <li>The concept of an <dfn id=concept-event-listener title=concept-event-listener>event listener</dfn> and the <a href=#concept-event-listener title=concept-event-listener>event listeners</a> associated with an <code><a href=#eventtarget>EventTarget</a></code></li>
 
-     <li><dfn id=dom-event-target title=dom-Event-target><code>target</code></dfn> attribute</li>
-
      <li>The <dfn id="document's-character-encoding" title="document's character encoding">character encoding</dfn> and <dfn id=concept-document-media-type title=concept-document-media-type>media type</dfn> of a <code><a href=#document>Document</a></code></li>
      <li>The distinction between <dfn id=xml-documents>XML documents</dfn> and <dfn id=html-documents>HTML documents</dfn></li>
      <li>The terms <dfn id=quirks-mode>quirks mode</dfn>, <dfn id=limited-quirks-mode>limited-quirks mode</dfn>, and <dfn id=no-quirks-mode>no-quirks mode</dfn></li>
@@ -69277,38 +69277,61 @@
 
   <div class=impl>
 
-  <hr><p>All <a href=#event-handlers>event handlers</a> on an object, whether an element
-  or some other object, and whether set to null or to a
-  <code><a href=#function>Function</a></code> object, must be registered as event listeners
-  on the object when it is created, as if the <code title=dom-EventTarget-addEventListener>addEventListener()</code>
-  method on the object's <code><a href=#eventtarget>EventTarget</a></code> interface had been
-  invoked, with the event type (<var title=dom-event-type>type</var>
-  argument) equal to the type corresponding to the event handler (the
-  <dfn id=event-handler-event-type>event handler event type</dfn>), the listener set to be a
-  target and bubbling phase listener (<var title=dom-event-useCapture>useCapture</var> argument set to
-  false), and the event listener itself (<var title=dom-event-listener>listener</var> argument) set to do
-  nothing while the event handler's value is not a
-  <code><a href=#function>Function</a></code> object, and set to invoke the <code title=dom-function-call><a href=#dom-function-call>call()</a></code> callback of the
-  <code><a href=#function>Function</a></code> object associated with the event handler
-  otherwise.</p>
+  <hr><p>When an <a href=#event-handlers title="event handlers">event handler</a> <var title="">H</var> of an element or object <var title="">T</var>
+  implementing the <code><a href=#eventtarget>EventTarget</a></code> interface is first set to
+  a non-null <code><a href=#function>Function</a></code> object, the user agent must append
+  an <a href=#concept-event-listener title=concept-event-listener>event listener</a> to the
+  list of <a href=#concept-event-listener title=concept-event-listener>event listeners</a>
+  associated with <var title="">T</var> with <i>type</i> set to the
+  <dfn id=event-handler-event-type>event handler event type</dfn> corresponding to <var title="">H</var>, <i>capture</i> set to false, and <i>listener</i>
+  set to be an anonymous function that does nothing when the event
+  handler's value is not a <code><a href=#function>Function</a></code> object and <a href=#concept-function-invoke title=concept-Function-invoke>invokes the <code>Function</code>
+  object</a> associated with the <a href=#event-handlers title="event handlers">event
+  handler</a> otherwise. <a href=#refsDOMCORE>[DOMCORE]</a></p>
 
+  <p class=note>The <i>listener</i> is emphatically <em>not</em> the
+  <a href=#event-handlers title="event handlers">event handler</a> itself.</p>
+
+  <p class=note>This only happens the first time the <a href=#event-handlers title="event handlers">event handler</a>'s value is set. Since
+  listeners are called in the order they were registered, the order of
+  event listeners for a particular event type will always be first the
+  event listeners registered with <code title=dom-EventTarget-addEventListener>addEventListener()</code>
+  before the first time the <a href=#event-handlers title="event handlers">event
+  handler</a> was set to a non-null value, then the
+  <code><a href=#function>Function</a></code> to which it is currently set, if any, and
+  finally the event listeners registered with <code title=dom-EventTarget-addEventListener>addEventListener()</code>
+  <em>after</em> the first time the <a href=#event-handlers title="event handlers">event
+  handler</a> was set to a non-null value.</p>
+
   </div>
 
-  <p class=note><a href=#event-handlers>Event handlers</a> <span class=impl>therefore</span> always run before event listeners
-  attached using <code title=dom-EventTarget-addEventListener>addEventListener()</code>.</p>
+  <div class=example>
 
+   <p>This example demonstrates the order in which event listeners are
+   invoked. If the button in this example is clicked by the user, the
+   page will show four alerts, with the text "ONE", "TWO", "THREE",
+   and "FOUR" respectively.</p>
+
+   <pre><button id="test">Start Demo</button>
+<script>
+ var button = document.getElementById('test');
+ button.addEventListener('click', function () { alert('ONE') }, false);
+ button.setAttribute('onclick', "alert('NOT CALLED')"); // event handler listener is registered here
+ button.addEventListener('click', function () { alert('THREE') }, false);
+ button.onclick = function () { alert('TWO'); };
+ button.addEventListener('click', function () { alert('FOUR') }, false);
+</script></pre>
+
+  </div>
+
   <div class=impl>
 
-  <p class=note>The <var title=dom-event-listener>listener</var>
-  argument is emphatically <em>not</em> the <a href=#event-handlers title="event
-  handlers">event handler</a> itself.</p>
-
   <p class=note>The interfaces implemented by the event object do
   not influence whether an <a href=#event-handlers title="event handlers">event
   handler</a> is triggered or not.</p>
 
   <p>When an <a href=#event-handlers title="event handlers">event handler</a>'s
-  <code><a href=#function>Function</a></code> object is invoked, its <code title=dom-function-call><a href=#dom-function-call>call()</a></code> callback must be invoked
+  <code><a href=#function>Function</a></code> object is <dfn id=concept-function-invoke title=concept-Function-invoke>invoked</dfn>, its <code title=dom-function-call><a href=#dom-function-call>call()</a></code> callback must be invoked
   with one argument, set to the <code><a href=#event>Event</a></code> object of the event
   in question.</p>
 

Modified: index
===================================================================
--- index	2011-10-06 23:41:21 UTC (rev 6651)
+++ index	2011-10-07 21:41:56 UTC (rev 6652)
@@ -240,7 +240,7 @@
 
   <header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
    <hgroup><h1 class=allcaps>HTML</h1>
-    <h2 class="no-num no-toc">Living Standard — Last Updated 6 October 2011</h2>
+    <h2 class="no-num no-toc">Living Standard — Last Updated 7 October 2011</h2>
    </hgroup><dl><dt><strong>Web developer edition:</strong></dt>
     <dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
     <dt>Multiple-page version:</dt>
@@ -3831,10 +3831,10 @@
      <li><dfn id=event><code>Event</code></dfn> interface</li>
      <li><dfn id=eventtarget><code>EventTarget</code></dfn> interface</li>
      <li><dfn id=eventinit><code>EventInit</code></dfn> dictionary type</li>
+     <li><dfn id=dom-event-target title=dom-Event-target><code>target</code></dfn> attribute</li>
      <li>The <dfn id=concept-event-type title=concept-event-type>type</dfn> of an event</li>
+     <li>The concept of an <dfn id=concept-event-listener title=concept-event-listener>event listener</dfn> and the <a href=#concept-event-listener title=concept-event-listener>event listeners</a> associated with an <code><a href=#eventtarget>EventTarget</a></code></li>
 
-     <li><dfn id=dom-event-target title=dom-Event-target><code>target</code></dfn> attribute</li>
-
      <li>The <dfn id="document's-character-encoding" title="document's character encoding">character encoding</dfn> and <dfn id=concept-document-media-type title=concept-document-media-type>media type</dfn> of a <code><a href=#document>Document</a></code></li>
      <li>The distinction between <dfn id=xml-documents>XML documents</dfn> and <dfn id=html-documents>HTML documents</dfn></li>
      <li>The terms <dfn id=quirks-mode>quirks mode</dfn>, <dfn id=limited-quirks-mode>limited-quirks mode</dfn>, and <dfn id=no-quirks-mode>no-quirks mode</dfn></li>
@@ -69277,38 +69277,61 @@
 
   <div class=impl>
 
-  <hr><p>All <a href=#event-handlers>event handlers</a> on an object, whether an element
-  or some other object, and whether set to null or to a
-  <code><a href=#function>Function</a></code> object, must be registered as event listeners
-  on the object when it is created, as if the <code title=dom-EventTarget-addEventListener>addEventListener()</code>
-  method on the object's <code><a href=#eventtarget>EventTarget</a></code> interface had been
-  invoked, with the event type (<var title=dom-event-type>type</var>
-  argument) equal to the type corresponding to the event handler (the
-  <dfn id=event-handler-event-type>event handler event type</dfn>), the listener set to be a
-  target and bubbling phase listener (<var title=dom-event-useCapture>useCapture</var> argument set to
-  false), and the event listener itself (<var title=dom-event-listener>listener</var> argument) set to do
-  nothing while the event handler's value is not a
-  <code><a href=#function>Function</a></code> object, and set to invoke the <code title=dom-function-call><a href=#dom-function-call>call()</a></code> callback of the
-  <code><a href=#function>Function</a></code> object associated with the event handler
-  otherwise.</p>
+  <hr><p>When an <a href=#event-handlers title="event handlers">event handler</a> <var title="">H</var> of an element or object <var title="">T</var>
+  implementing the <code><a href=#eventtarget>EventTarget</a></code> interface is first set to
+  a non-null <code><a href=#function>Function</a></code> object, the user agent must append
+  an <a href=#concept-event-listener title=concept-event-listener>event listener</a> to the
+  list of <a href=#concept-event-listener title=concept-event-listener>event listeners</a>
+  associated with <var title="">T</var> with <i>type</i> set to the
+  <dfn id=event-handler-event-type>event handler event type</dfn> corresponding to <var title="">H</var>, <i>capture</i> set to false, and <i>listener</i>
+  set to be an anonymous function that does nothing when the event
+  handler's value is not a <code><a href=#function>Function</a></code> object and <a href=#concept-function-invoke title=concept-Function-invoke>invokes the <code>Function</code>
+  object</a> associated with the <a href=#event-handlers title="event handlers">event
+  handler</a> otherwise. <a href=#refsDOMCORE>[DOMCORE]</a></p>
 
+  <p class=note>The <i>listener</i> is emphatically <em>not</em> the
+  <a href=#event-handlers title="event handlers">event handler</a> itself.</p>
+
+  <p class=note>This only happens the first time the <a href=#event-handlers title="event handlers">event handler</a>'s value is set. Since
+  listeners are called in the order they were registered, the order of
+  event listeners for a particular event type will always be first the
+  event listeners registered with <code title=dom-EventTarget-addEventListener>addEventListener()</code>
+  before the first time the <a href=#event-handlers title="event handlers">event
+  handler</a> was set to a non-null value, then the
+  <code><a href=#function>Function</a></code> to which it is currently set, if any, and
+  finally the event listeners registered with <code title=dom-EventTarget-addEventListener>addEventListener()</code>
+  <em>after</em> the first time the <a href=#event-handlers title="event handlers">event
+  handler</a> was set to a non-null value.</p>
+
   </div>
 
-  <p class=note><a href=#event-handlers>Event handlers</a> <span class=impl>therefore</span> always run before event listeners
-  attached using <code title=dom-EventTarget-addEventListener>addEventListener()</code>.</p>
+  <div class=example>
 
+   <p>This example demonstrates the order in which event listeners are
+   invoked. If the button in this example is clicked by the user, the
+   page will show four alerts, with the text "ONE", "TWO", "THREE",
+   and "FOUR" respectively.</p>
+
+   <pre><button id="test">Start Demo</button>
+<script>
+ var button = document.getElementById('test');
+ button.addEventListener('click', function () { alert('ONE') }, false);
+ button.setAttribute('onclick', "alert('NOT CALLED')"); // event handler listener is registered here
+ button.addEventListener('click', function () { alert('THREE') }, false);
+ button.onclick = function () { alert('TWO'); };
+ button.addEventListener('click', function () { alert('FOUR') }, false);
+</script></pre>
+
+  </div>
+
   <div class=impl>
 
-  <p class=note>The <var title=dom-event-listener>listener</var>
-  argument is emphatically <em>not</em> the <a href=#event-handlers title="event
-  handlers">event handler</a> itself.</p>
-
   <p class=note>The interfaces implemented by the event object do
   not influence whether an <a href=#event-handlers title="event handlers">event
   handler</a> is triggered or not.</p>
 
   <p>When an <a href=#event-handlers title="event handlers">event handler</a>'s
-  <code><a href=#function>Function</a></code> object is invoked, its <code title=dom-function-call><a href=#dom-function-call>call()</a></code> callback must be invoked
+  <code><a href=#function>Function</a></code> object is <dfn id=concept-function-invoke title=concept-Function-invoke>invoked</dfn>, its <code title=dom-function-call><a href=#dom-function-call>call()</a></code> callback must be invoked
   with one argument, set to the <code><a href=#event>Event</a></code> object of the event
   in question.</p>
 

Modified: source
===================================================================
--- source	2011-10-06 23:41:21 UTC (rev 6651)
+++ source	2011-10-07 21:41:56 UTC (rev 6652)
@@ -2748,10 +2748,10 @@
      <li><dfn><code>Event</code></dfn> interface</li>
      <li><dfn><code>EventTarget</code></dfn> interface</li>
      <li><dfn><code>EventInit</code></dfn> dictionary type</li>
+     <li><dfn title="dom-Event-target"><code>target</code></dfn> attribute</li>
      <li>The <dfn title="concept-event-type">type</dfn> of an event</li>
+     <li>The concept of an <dfn title=concept-event-listener>event listener</dfn> and the <span title=concept-event-listener>event listeners</span> associated with an <code>EventTarget</code></li>
 
-     <li><dfn title="dom-Event-target"><code>target</code></dfn> attribute</li>
-
      <li>The <dfn title="document's character encoding">character encoding</dfn> and <dfn title="concept-document-media-type">media type</dfn> of a <code>Document</code></li>
      <li>The distinction between <dfn>XML documents</dfn> and <dfn>HTML documents</dfn></li>
      <li>The terms <dfn>quirks mode</dfn>, <dfn>limited-quirks mode</dfn>, and <dfn>no-quirks mode</dfn></li>
@@ -78807,44 +78807,68 @@
 
   <hr>
 
-  <p>All <span>event handlers</span> on an object, whether an element
-  or some other object, and whether set to null or to a
-  <code>Function</code> object, must be registered as event listeners
-  on the object when it is created, as if the <code
+  <p>When an <span title="event handlers">event handler</span> <var
+  title="">H</var> of an element or object <var title="">T</var>
+  implementing the <code>EventTarget</code> interface is first set to
+  a non-null <code>Function</code> object, the user agent must append
+  an <span title="concept-event-listener">event listener</span> to the
+  list of <span title="concept-event-listener">event listeners</span>
+  associated with <var title="">T</var> with <i>type</i> set to the
+  <dfn>event handler event type</dfn> corresponding to <var
+  title="">H</var>, <i>capture</i> set to false, and <i>listener</i>
+  set to be an anonymous function that does nothing when the event
+  handler's value is not a <code>Function</code> object and <span
+  title="concept-Function-invoke">invokes the <code>Function</code>
+  object</span> associated with the <span title="event handlers">event
+  handler</span> otherwise. <a href="#refsDOMCORE">[DOMCORE]</a></p>
+
+  <p class="note">The <i>listener</i> is emphatically <em>not</em> the
+  <span title="event handlers">event handler</span> itself.</p>
+
+  <p class="note">This only happens the first time the <span
+  title="event handlers">event handler</span>'s value is set. Since
+  listeners are called in the order they were registered, the order of
+  event listeners for a particular event type will always be first the
+  event listeners registered with <code
   title="dom-EventTarget-addEventListener">addEventListener()</code>
-  method on the object's <code>EventTarget</code> interface had been
-  invoked, with the event type (<var title="dom-event-type">type</var>
-  argument) equal to the type corresponding to the event handler (the
-  <dfn>event handler event type</dfn>), the listener set to be a
-  target and bubbling phase listener (<var
-  title="dom-event-useCapture">useCapture</var> argument set to
-  false), and the event listener itself (<var
-  title="dom-event-listener">listener</var> argument) set to do
-  nothing while the event handler's value is not a
-  <code>Function</code> object, and set to invoke the <code
-  title="dom-function-call">call()</code> callback of the
-  <code>Function</code> object associated with the event handler
-  otherwise.</p>
+  before the first time the <span title="event handlers">event
+  handler</span> was set to a non-null value, then the
+  <code>Function</code> to which it is currently set, if any, and
+  finally the event listeners registered with <code
+  title="dom-EventTarget-addEventListener">addEventListener()</code>
+  <em>after</em> the first time the <span title="event handlers">event
+  handler</span> was set to a non-null value.</p>
 
   </div>
 
-  <p class="note"><span>Event handlers</span> <span
-  class="impl">therefore</span> always run before event listeners
-  attached using <code
-  title="dom-EventTarget-addEventListener">addEventListener()</code>.</p>
+  <div class="example">
 
+   <p>This example demonstrates the order in which event listeners are
+   invoked. If the button in this example is clicked by the user, the
+   page will show four alerts, with the text "ONE", "TWO", "THREE",
+   and "FOUR" respectively.</p>
+
+   <pre><button id="test">Start Demo</button>
+<script>
+ var button = document.getElementById('test');
+ button.addEventListener('click', function () { alert('ONE') }, false);
+ button.setAttribute('onclick', "alert('NOT CALLED')"); // event handler listener is registered here
+ button.addEventListener('click', function () { alert('THREE') }, false);
+ button.onclick = function () { alert('TWO'); };
+ button.addEventListener('click', function () { alert('FOUR') }, false);
+</script></pre>
+
+  </div>
+
   <div class="impl">
 
-  <p class="note">The <var title="dom-event-listener">listener</var>
-  argument is emphatically <em>not</em> the <span title="event
-  handlers">event handler</span> itself.</p>
-
   <p class="note">The interfaces implemented by the event object do
   not influence whether an <span title="event handlers">event
   handler</span> is triggered or not.</p>
 
   <p>When an <span title="event handlers">event handler</span>'s
-  <code>Function</code> object is invoked, its <code
+  <code>Function</code> object is <dfn
+  title="concept-Function-invoke">invoked</dfn>, its <code
   title="dom-function-call">call()</code> callback must be invoked
   with one argument, set to the <code>Event</code> object of the event
   in question.</p>




More information about the Commit-Watchers mailing list