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 911621 of Event.eventPhase

  • Revision slug: Web/API/Event/eventPhase
  • Revision title: Event.eventPhase
  • Revision id: 911621
  • Created:
  • Creator: bantic
  • Is current revision? No
  • Comment

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

HTML Content

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

CSS Content

div { 
  margin: 20px;
  padding: 4px;
  border: thin black solid;
} 

#divInfo { 
  margin: 18px;
  padding: 8px;
  background-color:white;
  font-size:80%; 
}

JavaScript Content

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 = ''; 
}

{{ EmbedLiveSample('Example', '', '700', '', 'Web/API/Event/eventPhase') }}

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" name="Example">Example</h2>

<h3 id="HTML_Content">HTML Content</h3>

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

<h3 id="CSS_Content">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 id="JavaScript_Content">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', '', '700', '', 'Web/API/Event/eventPhase') }}</p>

<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