Event.eventPhase
================

La propriété en lecture seule **`eventPhase`**, rattachée à l'interface `Event`, indique la phase du flux d'évènement en cours d'évaluation.

Valeur
------

Cette propriété renvoie un entier qui indique la phase actuelle d'évaluation du flux d'évènement. Les valeurs possibles sont :

`Event.NONE (0)`

L'évènement n'est pas en cours de traitement à ce moment.

`Event.CAPTURING_PHASE (1)`

L'évènement est en train d'être propagé sur les ancêtres de la cible. Le processus démarre avec `Window`, suivi de `Document`, suivi de `HTMLHtmlElement` (en-US), et ainsi de suite jusqu'à ce que le parent de la cible soit atteint. Les gestionnaires d'évènements enregistrés en mode de capture lorsque `EventTarget.addEventListener()` a été appelé seront déclenchés lors de cette phase.

`Event.AT_TARGET (2)`

L'évènement est arrivé jusqu'à la cible de l'évènement. Les gestionnaires 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 la fin de cette phase.

`Event.BUBBLING_PHASE (3)`

L'évènement est propagé en remontant parmi les ancêtres de la cible dans l'ordre inverse, en commençant par le parent direct, jusqu'à finalement atteindre l'objet `Window` contenant. C'est *le bouillonnement* (*bubbling* en anglais). Il se produit uniquement si `Event.bubbles` vaut `true`. Les gestionnaires d'évènement enregistrés pour cette phase sont déclenchés lors de ce processus.

Exemple
-------

### HTML


```html
<h4>Chaîne de propagation d'un évènement</h4>
<ul>
  <li>Cliquez sur 'd1'</li>
  <li>Analysez la chaîne de propagation de l'évènement</li>
  <li>Cliquez sur le div suivant et répétez l'expérience</li>
  <li>Changez le mode de capture</li>
  <li>Répétez l'expérience</li>
</ul>
<input type="checkbox" id="chCapture" />
<label for="chCapture">Utiliser la capture</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


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

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

### JavaScript


```js
let clear = false,
  divInfo = null,
  divs = null,
  chCapture = null;

window.onload = function () {
  divInfo = document.getElementById("divInfo");
  divs = document.getElementsByTagName("div");
  chCapture = document.getElementById("chCapture");
  chCapture.onclick = function () {
    removeListeners();
    addListeners();
    clearDivs();
  };
  clearDivs();
  addListeners();
};

function removeListeners() {
  for (const div of divs) {
    if (div.id != "divInfo") {
      div.removeEventListener("click", onDivClick, true);
      div.removeEventListener("click", onDivClick, false);
    }
  }
}

function addListeners() {
  for (const div of divs) {
    if (div.id != "divInfo") {
      if (chCapture.checked) {
        div.addEventListener("click", onDivClick, true);
      } else {
        div.addEventListener("click", onDivClick, false);
        div.onmousemove = function () {
          clear = true;
        };
      }
    }
  }
}

function onDivClick(e) {
  if (clear) {
    clearDivs();
    clear = false;
  }
  if (e.eventPhase == 2) {
    e.currentTarget.style.backgroundColor = "red";
  }
  const level =
    e.eventPhase == 0
      ? "none"
      : e.eventPhase == 1
        ? "capturing"
        : e.eventPhase == 2
          ? "target"
          : e.eventPhase == 3
            ? "bubbling"
            : "error";
  const para = document.createElement("p");
  para.textContent = `${e.currentTarget.id}; eventPhase: ${level}`;
  divInfo.appendChild(para);
}

function clearDivs() {
  for (let i = 0; i < divs.length; i++) {
    if (divs[i].id != "divInfo") {
      divs[i].style.backgroundColor = i & 1 ? "#f6eedb" : "#cceeff";
    }
  }
  divInfo.textContent = "";
}
```

### Résultat

Spécifications
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-eventphase③ |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.