Indique quelle phase du flux d'événements est actuellement évaluée.

Syntaxe

var phase = event.eventPhase;

Retourne un entier qui spécifie la phase courante d'évaluation du flux d'événements. Les valeurs possibles sont listées dans Constantes de phase d'événement.

Constantes

Constantes de phase d'événement

Ces valeurs décrivent quelle est la phase du flux d'événements actuellement évalué.

Constant Value Description
Event.NONE 0

Aucun événement n'est actuellement traité.

Event.CAPTURING_PHASE 1

L'événement se propage à travers les objets ancêtres de la cible. Ce processus commence avec Window, puis Document, ensuite HTMLHtmlElement et ainsi de suite à travers les éléments jusqu'à ce que le parent de la cible soit atteint. Event listeners sont enregistrés pour le mode capture lorsque EventTarget.addEventListener() est appelé durant cette phase.

Event.AT_TARGET 2 L'événement est arrivé à the event's target. Les écouteurs d'événements  enregistrés pour cette phase sont appelés à ce moment. Si Event.bubbles vaut false (faux), le traitement de l'événement est terminé une fois la phase complète.
Event.BUBBLING_PHASE 3 L'événement se propage à rebours à travers les ancêtres de la cible dans l'ordre inverse, commençant avec le parent, et atteignant finalement le contenant Window. Ceci est connu comme propagation et arrive seulement si Event.bubbles vaut true (vrai). Les Event listeners enregistrés pour cette phase sont déclenchés durant ce traitement.

Pour plus de détails, voir section 3.1, Event dispatch and DOM event flow (en) de la spécification du DOM niveau 3 sur les évènements .

Exemple

HTML

<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" /> 
<label for="chCapture">Use Capturing</label>
 <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

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

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

JavaScript

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") {
      if (chCapture.checked)
        d.addEventListener("click", OnDivClick, true);
      else
        d.addEventListener("click", OnDivClick, false);
      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 = '';
}

Spécifications

Spécification Statut Commentaire
DOM
La définition de 'Event.eventPhase' dans cette spécification.
Standard évolutif  
DOM4
La définition de 'Event.eventPhase' dans cette spécification.
Obsolete  
Document Object Model (DOM) Level 2 Events Specification
La définition de 'Event.eventPhase' dans cette spécification.
Obsolete Première définition

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 45Edge ? Firefox ? IE ? Opera Support complet 32Safari ? WebView Android Support complet 45Chrome Android Support complet 45Edge Mobile ? Firefox Android ? Opera Android Support complet 32Safari iOS ? Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue

Étiquettes et contributeurs liés au document

Contributeurs à cette page : loella16, Kalwyn
Dernière mise à jour par : loella16,