[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