Revision 896803 of Event.eventPhase

<p>{{ApiRef("DOM")}}</p>

<p>Indicates which phase of the event flow is currently being evaluated.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="brush: js">
<em>var phase</em> = event.eventPhase;
</pre>

<p>Returns an integer value which specifies the current evaluation phase of the event flow; possible values are listed in {{anch("Event phase constants")}}.</p>

<h2 id="Constants">Constants</h2>

<h3 id="Event_phase_constants">Event phase constants</h3>

<p>These values describe which phase the event flow is currently being evaluated.</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Constant</th>
   <th scope="col">Value</th>
   <th scope="col">Description</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>Event.NONE</code></td>
   <td>0</td>
   <td>No event is being processed at this time.</td>
  </tr>
  <tr>
   <td><code>Event.CAPTURING_PHASE</code></td>
   <td>1</td>
   <td>The event is being propagated through the target's ancestor objects. This process starts with the {{domxref("Window")}}, then {{domxref("Document")}}, then the {{domxref("HTMLHtmlElement")}}, and so on through the elements until the target's parent is reached. {{domxref("EventListener", "Event listeners", "", 1)}} registered for capture mode when {{domxref("EventTarget.addEventListener()")}} was called are triggered during this phase.</td>
  </tr>
  <tr>
   <td><code>Event.AT_TARGET</code></td>
   <td>2</td>
   <td>The event has arrived at {{domxref("EventTarget", "the event's target", "", 1)}}. Event listeners registered for this phase are called at this time. If {{domxref("Event.bubbles")}} is false, processing the event is finished after this phase is complete.</td>
  </tr>
  <tr>
   <td><code>Event.BUBBLING_PHASE</code></td>
   <td>3</td>
   <td>The event is propagating back up through the target's ancestors in reverse order, starting with the parent, and eventually reaching the containing {{domxref("Window")}}. This is known as bubbling, and occurs only if {{domxref("Event.bubbles")}} is <code>true</code>. {{domxref("EventListener", "Event listeners", "", 1)}} registered for this phase are triggered during this process.</td>
  </tr>
 </tbody>
</table>

<p>For more details, see <a class="external" href="https://www.w3.org/TR/DOM-Level-3-Events/#event-flow">section 3.1, Event dispatch and DOM event flow</a>, of the DOM Level 3 Events specification.</p>

<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/API/Event/eventPhase') }}</p>

<h2 id="Example" name="Example">EXAMPLE</h2>

<h3>HTML Content</h3>

<pre class="brush: html">
 &lt;h4&gt;Event Propagation Chain&lt;/h4&gt; &lt;ul&gt; &lt;li&gt;Click 'd1'&lt;/li&gt; &lt;li&gt;Analyse event propagation chain&lt;/li&gt; &lt;li&gt;Click next div and repeat the experience&lt;/li&gt; &lt;li&gt;Change Capturing mode&lt;/li&gt; &lt;li&gt;Repeat the experience&lt;/li&gt; &lt;/ul&gt; &lt;input type="checkbox" id="chCapture" /&gt; Use Capturing &lt;div id="d1"&gt;d1 &lt;div id="d2"&gt;d2 &lt;div id="d3"&gt;d3 &lt;div id="d4"&gt;d4&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="divInfo"&gt;&lt;/div&gt; 
</pre>

<h3>CSS Content</h3>

<pre class="brush: css">

div { margin: 20px; padding: 4px; border: thin black solid; } #divInfo { margin: 18px; padding: 8px; background-color:white; font-size:80%; }</pre>

<h3>JavaScript Content</h3>

<pre class="brush: js">
 var clear = false, divInfo = null, divs = null, useCapture = false; window.onload = function () { divInfo = document.getElementById("divInfo"); divs = document.getElementsByTagName('div'); chCapture = document.getElementById("chCapture"); chCapture.onclick = function () { RemoveListeners(); AddListeners(); } Clear(); AddListeners(); } function RemoveListeners() { for (var i = 0; i &lt; divs.length; i++) { var d = divs[i]; if (d.id != "divInfo") { d.removeEventListener("click", OnDivClick, true); d.removeEventListener("click", OnDivClick, false); } } } function AddListeners() { for (var i = 0; i &lt; divs.length; i++) { var d = divs[i]; if (d.id != "divInfo") { d.addEventListener("click", OnDivClick, false); if (chCapture.checked) d.addEventListener("click", OnDivClick, true); d.onmousemove = function () { clear = true; }; } } } function OnDivClick(e) { if (clear) { Clear(); clear = false; } if (e.eventPhase == 2) e.currentTarget.style.backgroundColor = 'red'; var level = e.eventPhase == 0 ? "none" : e.eventPhase == 1 ? "capturing" : e.eventPhase == 2 ? "target" : e.eventPhase == 3 ? "bubbling" : "error"; divInfo.innerHTML += e.currentTarget.id + "; eventPhase: " + level + "&lt;br/&gt;"; } function Clear() { for (var i = 0; i &lt; divs.length; i++) { if (divs[i].id != "divInfo") divs[i].style.backgroundColor = (i &amp; 1) ? "#f6eedb" : "#cceeff"; } divInfo.innerHTML = ''; }
</pre>

<p>{{ EmbedLiveSample('Example') }}</p>

<h2 id="Example">&nbsp;</h2>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th>Specification</th>
   <th>Status</th>
   <th>Comment</th>
  </tr>
  <tr>
   <td>{{SpecName("DOM3 Events", "#widl-Event-eventPhase", "Event.eventPhase")}}</td>
   <td>{{Spec2("DOM3 Events")}}</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>{{SpecName("DOM2 Events", "#Events-Event-eventPhase", "Event.eventPhase")}}</td>
   <td>{{Spec2("DOM2 Events")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>