Skip to content
Permalink
Browse files

[giow] (2) Define how event handler registration works to be compatib…

…le with IE and Firefox.

Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=13684

git-svn-id: http://svn.whatwg.org/webapps@6652 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
Hixie committed Oct 7, 2011
1 parent c81caa0 commit a1c6b5c3baf1506f6ab60c207853575d1bf15527
Showing with 146 additions and 76 deletions.
  1. +47 −24 complete.html
  2. +47 −24 index
  3. +52 −28 source

<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 &mdash; Last Updated 6 October 2011</h2>
<h2 class="no-num no-toc">Living Standard &mdash; 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>
<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>The <dfn id=concept-event-type title=concept-event-type>type</dfn> of an event</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>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>

<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>

<div class=impl>
<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>

<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>
<pre>&lt;button id="test"&gt;Start Demo&lt;/button&gt;
&lt;script&gt;
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);
&lt;/script&gt;</pre>

</div>

<div class=impl>

<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>

71 index

<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 &mdash; Last Updated 6 October 2011</h2>
<h2 class="no-num no-toc">Living Standard &mdash; 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>
<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>The <dfn id=concept-event-type title=concept-event-type>type</dfn> of an event</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>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>

<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>

<div class=impl>
<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>

<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>
<pre>&lt;button id="test"&gt;Start Demo&lt;/button&gt;
&lt;script&gt;
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);
&lt;/script&gt;</pre>

</div>

<div class=impl>

<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>

0 comments on commit a1c6b5c

Please sign in to comment.
You can’t perform that action at this time.