Event.eventPhase

Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

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 Event phase constants.

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 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, le traitement de l'événement est terminé après que la phase est complète.
Event.BUBBLING_PHASE 3 L'événement se propage à reculons à travers les ancêtres de la cible dans l'ordre inverse, commençant avec le parent, et atteignant finalement le contanant Window. Ceci est connu en tant que le bubbling, et arrive seulement si Event.bubbles vaut true. Event listeners enregistrés pour cette phase sont déclenchés durant ce traitement.

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

Exemple

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

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.
Recommendation  
Document Object Model (DOM) Level 2 Events Specification
La définition de 'Event.eventPhase' dans cette spécification.
Recommendation Première définition

Étiquettes et contributeurs liés au document

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