DOM Events introduction: clarify how listeners are invoked

Fixes #888.

Author: annevk

dom.bs

@@ -1,4 +1,4 @@
-<pre class='metadata'>
+<pre class=metadata>
 Group: WHATWG
 H1: DOM
 Shortname: dom
@@ -358,34 +358,24 @@ use of this functionality through <a>events</a>
 (synthetic events) can make use of the return value of the
 {{EventTarget/dispatchEvent()}} method:
 
-<pre class='lang-javascript'>
+<pre class=lang-javascript>
 if(obj.dispatchEvent(event)) {
   // event was not canceled, time for some magic
   &hellip;
 }
 </pre>
 
-When an <a>event</a> is
-<a>dispatched</a> to an object that
-<a>participates</a> in a
-<a>tree</a> (e.g. an
-<a for="/">element</a>), it can reach
-<a>event listeners</a> on that object's
-<a>ancestors</a> too. First all object's
-<a>ancestor</a>
-<a>event listeners</a> whose
-<a for="event listener">capture</a> variable is set to true are invoked, in
-<a>tree order</a>. Second, object's own
-<a>event listeners</a> are invoked. And
-finally, and only if <a>event</a>'s
-{{Event/bubbles}} attribute value is true,
-object's  <a>ancestor</a>
-<a>event listeners</a> are invoked again,
-but now in reverse <a>tree order</a>.
-
-Let's look at an example of how <a>events</a> work in a <a>tree</a>:
-
-<pre class='lang-markup'>
+<p>When an <a>event</a> is <a>dispatched</a> to an object that <a>participates</a> in a <a>tree</a>
+(e.g., an <a for=/>element</a>), it can reach <a>event listeners</a> on that object's
+<a>ancestors</a> too. Effectively, all the object's <a>inclusive ancestor</a> <a>event listeners</a>
+whose <a for="event listener">capture</a> is true are invoked, in <a>tree order</a>. And then, if
+<a>event</a>'s {{Event/bubbles}} is true, all the object's <a>inclusive ancestor</a>
+<a>event listeners</a> whose <a for="event listener">capture</a> is false are invoked, now in
+reverse <a>tree order</a>.
+
+<p>Let's look at an example of how <a>events</a> work in a <a>tree</a>:
+
+<pre class=lang-markup>
 &lt;!doctype html>
 &lt;html>
  &lt;head>
@@ -406,19 +396,13 @@ Let's look at an example of how <a>events</a> work in a <a>tree</a>:
 &lt;/html>
 </pre>
 
-The <code>debug</code> function will be invoked twice. Each time the <a>event</a>'s
-{{Event/target}} attribute value will be the
-<code>span</code> <a for="/">element</a>. The
-first time {{Event/currentTarget}} attribute's
-value will be the <a>document</a>, the second
-time the <code>body</code> <a for="/">element</a>.
-{{Event/eventPhase}} attribute's value
-switches from {{Event/CAPTURING_PHASE}}
-to {{Event/BUBBLING_PHASE}}. If an
-<a>event listener</a> was registered for
-the <code>span</code> <a for="/">element</a>,
-{{Event/eventPhase}} attribute's value
-would have been {{Event/AT_TARGET}}.
+<p>The <code>debug</code> function will be invoked twice. Each time the <a>event</a>'s
+{{Event/target}} attribute value will be the <code>span</code> <a for=/>element</a>. The first time
+{{Event/currentTarget}} attribute's value will be the <a>document</a>, the second time the
+<code>body</code> <a for=/>element</a>. {{Event/eventPhase}} attribute's value switches from
+{{Event/CAPTURING_PHASE}} to {{Event/BUBBLING_PHASE}}. If an <a>event listener</a> was registered
+for the <code>span</code> <a for=/>element</a>, {{Event/eventPhase}} attribute's value would have
+been {{Event/AT_TARGET}}.
 
 
 <h3 id=interface-event>Interface {{Event}}</h3>
@@ -1959,7 +1943,7 @@ applications.
 
 To illustrate, consider this HTML document:
 
-<pre class='lang-markup'>
+<pre class=lang-markup>
 &lt;!DOCTYPE html>
 &lt;html class=e>
  &lt;head>&lt;title>Aliens?&lt;/title>&lt;/head>
@@ -4480,7 +4464,7 @@ when invoked, must run these steps:
 
   <p class="note no-backref">Whether to return {{Node/DOCUMENT_POSITION_PRECEDING}} or
   {{Node/DOCUMENT_POSITION_FOLLOWING}} is typically implemented via pointer comparison. In
-  JavaScript implementations a cached <code class='lang-javascript'>Math.random()</code> value can
+  JavaScript implementations a cached <code class=lang-javascript>Math.random()</code> value can
   be used.
 
  <li><p>If <var>node1</var> is an <a>ancestor</a> of <var>node2</var> and <var>attr1</var> is null,
@@ -5001,7 +4985,7 @@ method, when invoked, must return the
 <a>list of elements with qualified name <var>qualifiedName</var></a> for <a>this</a>.
 
 <p class="note no-backref">Thus, in an <a>HTML document</a>,
-<code class='lang-javascript'>document.getElementsByTagName("FOO")</code> will match
+<code class=lang-javascript>document.getElementsByTagName("FOO")</code> will match
 <code>&lt;FOO></code> elements that are not in the
 <a>HTML namespace</a>, and <code>&lt;foo></code> elements that are in
 the <a>HTML namespace</a>, but not <code>&lt;FOO></code> elements
@@ -7464,9 +7448,9 @@ are <a>boundary points</a>. A <a>boundary point</a> is a <a for=/>tuple</a> cons
 <ul class="domTree">
  <li class="t1">{{Element}}: <code>p</code>
   <ul>
-   <li class="t1">{{Element}}: <code class='lang-markup'>&lt;img src="insanity-wolf" alt="Little-endian BOM; decode as big-endian!"></code>
+   <li class="t1">{{Element}}: <code class=lang-markup>&lt;img src="insanity-wolf" alt="Little-endian BOM; decode as big-endian!"></code>
    <li class="t3">{{Text}}: <span>&nbsp;CSS 2.1 syndata is&nbsp;</span>
-   <li class="t1">{{Element}}: <code class='lang-markup'>&lt;em></code>
+   <li class="t1">{{Element}}: <code class=lang-markup>&lt;em></code>
     <ul>
      <li class="t3">{{Text}}: <span>awesome</span>
     </ul>
@@ -7482,7 +7466,7 @@ are <a>boundary points</a>. A <a>boundary point</a> is a <a for=/>tuple</a> cons
 <var ignore>em</var> to the <code>em</code>
 <a for="/">element</a>, this would be done as follows:
 
-<pre class='lang-javascript'><code>
+<pre class=lang-javascript><code>
 var range = new Range(),
     firstText = p.childNodes[1],
     secondText = em.firstChild
@@ -10122,6 +10106,7 @@ Justin Summerlin,
 Kagami Sascha Rosylight,
 呂康豪 (Kang-Hao Lu),
 田村健人 (Kent TAMURA),
+Kevin J. Sung,
 Kevin Sweeney,
 Kirill Topolyan,
 Koji Ishii,