Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 872223 of Event.eventPhase

  • Revision slug: Web/API/Event/eventPhase
  • Revision title: Event.eventPhase
  • Revision id: 872223
  • Created:
  • Creator: Sebastianz
  • Is current revision? No
  • Comment Added table to 'Specifications' section

Revision Content

{{ApiRef("DOM")}}

Indicates which phase of the event flow is currently being evaluated.

Syntax

var phase = event.eventPhase;

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

Constants

Event phase constants

These values describe which phase the event flow is currently being evaluated.

Constant Value Description
Event.NONE 0 No event is being processed at this time.
Event.CAPTURING_PHASE 1 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.
Event.AT_TARGET 2 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.
Event.BUBBLING_PHASE 3 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 true. {{domxref("EventListener", "Event listeners", "", 1)}} registered for this phase are triggered during this process.

For more details, see section 3.1, Event dispatch and DOM event flow, of the DOM Level 3 Events specification.

Example

<!DOCTYPE html>
<html>
<head> <title>Event Propagation</title>
  <style type="text/css">
    div { margin: 20px; padding: 4px; border: thin black solid; }
    #divInfo { margin: 18px; padding: 8px; background-color:white; font-size:80%; }
  </style>
</head>
<body>
  <h4>Event Propagation Chain</h4>
  <ul>
    <li>Click 'd1'</li>
    <li>Analyse event propagation chain</li>
    <li>Click next div and repeat the experience</li>
    <li>Change Capturing mode</li>
    <li>Repeat the experience</li>
  </ul>
  <input type="checkbox" id="chCapture" /> Use Capturing
  <div id="d1">d1
    <div id="d2">d2
      <div id="d3">d3
        <div id="d4">d4</div>
      </div>
    </div>
  </div>
  <div id="divInfo"></div>
  <script>
    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 < 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 < 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 + "<br/>";
  }
  function Clear()
  {
    for (var i = 0; i < divs.length; i++)
    {
      if (divs[i].id != "divInfo")
        divs[i].style.backgroundColor = (i & 1) ? "#f6eedb" : "#cceeff";
    }
    divInfo.innerHTML = '';
  }
  </script>
</body>
</html>

Specifications

Specification Status Comment
{{SpecName("DOM3 Events", "#widl-Event-eventPhase", "Event.eventPhase")}} {{Spec2("DOM3 Events")}}  
{{SpecName("DOM2 Events", "#Events-Event-eventPhase", "Event.eventPhase")}} {{Spec2("DOM2 Events")}} Initial definition

Revision Source

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

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

<pre class="brush: html">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt; &lt;title&gt;Event Propagation&lt;/title&gt;
  &lt;style type="text/css"&gt;
    div { margin: 20px; padding: 4px; border: thin black solid; }
    #divInfo { margin: 18px; padding: 8px; background-color:white; font-size:80%; }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &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;
  &lt;script&gt;
    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 = '';
  }
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>

<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>
Revert to this revision