aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/api/event/eventphase/index.md
diff options
context:
space:
mode:
authorjulieng <julien.gattelier@gmail.com>2021-10-02 17:20:24 +0200
committerSphinxKnight <SphinxKnight@users.noreply.github.com>2021-10-02 17:30:20 +0200
commit1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde (patch)
tree30a56efd3eff3a01bd1611e1840fdbbfacf544a4 /files/fr/web/api/event/eventphase/index.md
parentc05efa8d7ae464235cf83d7c0956e42dc6974103 (diff)
downloadtranslated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.tar.gz
translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.tar.bz2
translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.zip
convert content to md
Diffstat (limited to 'files/fr/web/api/event/eventphase/index.md')
-rw-r--r--files/fr/web/api/event/eventphase/index.md228
1 files changed, 118 insertions, 110 deletions
diff --git a/files/fr/web/api/event/eventphase/index.md b/files/fr/web/api/event/eventphase/index.md
index 290a0e6659..f6721c8a8d 100644
--- a/files/fr/web/api/event/eventphase/index.md
+++ b/files/fr/web/api/event/eventphase/index.md
@@ -10,88 +10,114 @@ tags:
- Propriétés
translation_of: Web/API/Event/eventPhase
---
-<p>{{ApiRef("DOM")}}</p>
+{{ApiRef("DOM")}}
-<p>Indique quelle phase du flux d'événements est actuellement évaluée.</p>
+Indique quelle phase du flux d'événements est actuellement évaluée.
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
-<pre class="brush: js"><em>var phase</em> = event.eventPhase;
-</pre>
+```js
+var phase = event.eventPhase;
+```
-<p>Retourne un entier qui spécifie la phase courante d'évaluation du flux d'événements. Les valeurs possibles sont listées dans {{anch("Constantes de phase d'événement")}}.</p>
+Retourne un entier qui spécifie la phase courante d'évaluation du flux d'événements. Les valeurs possibles sont listées dans {{anch("Constantes de phase d'événement")}}.
-<h2 id="Constantes">Constantes</h2>
+## Constantes
-<h3 id="Constantes_de_phase_d'événement">Constantes de phase d'événement</h3>
+### Constantes de phase d'événement
-<p>Ces valeurs décrivent quelle est la phase du flux d'événements actuellement évalué.</p>
+Ces valeurs décrivent quelle est la phase du flux d'événements actuellement évalué.
<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>
- <p>Aucun événement n'est actuellement traité.</p>
- </td>
- </tr>
- <tr>
- <td><code>Event.CAPTURING_PHASE</code></td>
- <td>1</td>
- <td>
- <p>L'événement se propage à travers les objets ancêtres de la cible. Ce processus commence avec {{domxref("Window")}}, puis {{domxref("Document")}}, ensuite {{domxref("HTMLHtmlElement")}} et ainsi de suite à travers les éléments jusqu'à ce que le parent de la cible soit atteint. {{domxref("EventListener", "Event listeners", "", 1)}} sont enregistrés pour le mode capture lorsque {{domxref("EventTarget.addEventListener()")}} est appelé durant cette phase.</p>
- </td>
- </tr>
- <tr>
- <td><code>Event.AT_TARGET</code></td>
- <td>2</td>
- <td>L'événement est arrivé à {{domxref("EventTarget", "the event's target", "", 1)}}. Les écouteurs d'événements  enregistrés pour cette phase sont appelés à ce moment. Si {{domxref("Event.bubbles")}} vaut <code>false</code> (<em>faux</em>), le traitement de l'événement est terminé une fois la phase complète.</td>
- </tr>
- <tr>
- <td><code>Event.BUBBLING_PHASE</code></td>
- <td>3</td>
- <td>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 {{domxref("Window")}}. Ceci est connu comme propagation et arrive seulement si {{domxref("Event.bubbles")}} vaut <code>true</code> (<em>vrai</em>). Les {{domxref("EventListener", "Event listeners", "", 1)}} enregistrés pour cette phase sont déclenchés durant ce traitement.</td>
- </tr>
- </tbody>
+ <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><p>Aucun événement n'est actuellement traité.</p></td>
+ </tr>
+ <tr>
+ <td><code>Event.CAPTURING_PHASE</code></td>
+ <td>1</td>
+ <td>
+ <p>
+ L'événement se propage à travers les objets ancêtres de la cible. Ce
+ processus commence avec {{domxref("Window")}}, puis
+ {{domxref("Document")}}, ensuite
+ {{domxref("HTMLHtmlElement")}} et ainsi de suite à travers
+ les éléments jusqu'à ce que le parent de la cible soit atteint.
+ {{domxref("EventListener", "Event listeners", "", 1)}}
+ sont enregistrés pour le mode capture lorsque
+ {{domxref("EventTarget.addEventListener()")}} est
+ appelé durant cette phase.
+ </p>
+ </td>
+ </tr>
+ <tr>
+ <td><code>Event.AT_TARGET</code></td>
+ <td>2</td>
+ <td>
+ L'événement est arrivé à
+ {{domxref("EventTarget", "the event's target", "", 1)}}.
+ Les écouteurs d'événements  enregistrés pour cette phase sont appelés à
+ ce moment. Si {{domxref("Event.bubbles")}} vaut
+ <code>false</code> (<em>faux</em>), le traitement de l'événement est
+ terminé une fois la phase complète.
+ </td>
+ </tr>
+ <tr>
+ <td><code>Event.BUBBLING_PHASE</code></td>
+ <td>3</td>
+ <td>
+ 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 {{domxref("Window")}}. Ceci est connu comme propagation
+ et arrive seulement si {{domxref("Event.bubbles")}} vaut
+ <code>true</code> (<em>vrai</em>). Les
+ {{domxref("EventListener", "Event listeners", "", 1)}}
+ enregistrés pour cette phase sont déclenchés durant ce traitement.
+ </td>
+ </tr>
+ </tbody>
</table>
-<p>Pour plus de détails, voir <a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">section 3.1, Event dispatch and DOM event flow</a> (en) de la spécification du DOM niveau 3 sur les évènements .</p>
-
-<h2 id="Example">Exemple</h2>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&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;
-&lt;label for="chCapture"&gt;Use Capturing&lt;/label&gt;
- &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;
-</pre>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css">div {
+Pour plus de détails, voir [section 3.1, Event dispatch and DOM event flow](http://www.w3.org/TR/DOM-Level-3-Events/#event-flow) (en) de la spécification du DOM niveau 3 sur les évènements .
+
+## Exemple
+
+### HTML
+
+```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
+
+```css
+div {
margin: 20px;
padding: 4px;
border: thin black solid;
@@ -102,11 +128,13 @@ translation_of: Web/API/Event/eventPhase
padding: 8px;
background-color:white;
font-size:80%;
-}</pre>
+}
+```
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
-<pre class="brush: js">var clear = false, divInfo = null, divs = null, useCapture = false;
+```js
+var clear = false, divInfo = null, divs = null, useCapture = false;
window.onload = function () {
divInfo = document.getElementById("divInfo");
divs = document.getElementsByTagName('div');
@@ -120,7 +148,7 @@ window.onload = function () {
}
function RemoveListeners() {
- for (var i = 0; i &lt; divs.length; i++) {
+ for (var i = 0; i < divs.length; i++) {
var d = divs[i];
if (d.id != "divInfo") {
d.removeEventListener("click", OnDivClick, true);
@@ -130,7 +158,7 @@ function RemoveListeners() {
}
function AddListeners() {
- for (var i = 0; i &lt; divs.length; i++) {
+ for (var i = 0; i < divs.length; i++) {
var d = divs[i];
if (d.id != "divInfo") {
if (chCapture.checked)
@@ -149,48 +177,28 @@ function OnDivClick(e) {
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;";
+ divInfo.innerHTML += e.currentTarget.id + "; eventPhase: " + level + "<br/>";
}
function Clear() {
- for (var i = 0; i &lt; divs.length; i++) {
+ for (var i = 0; i < divs.length; i++) {
if (divs[i].id != "divInfo")
- divs[i].style.backgroundColor = (i &amp; 1) ? "#f6eedb" : "#cceeff";
+ divs[i].style.backgroundColor = (i & 1) ? "#f6eedb" : "#cceeff";
}
divInfo.innerHTML = '';
-}</pre>
-
-<p>{{ EmbedLiveSample('Example', '', '700', '', 'Web/API/Event/eventPhase') }}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
+}
+```
-<table class="standard-table">
- <tbody>
- <tr>
- <th>Spécification</th>
- <th>Statut</th>
- <th>Commentaire</th>
- </tr>
- <tr>
- <td>{{SpecName("DOM WHATWG", "#dom-event-eventphase", "Event.eventPhase")}}</td>
- <td>{{Spec2("DOM WHATWG")}}</td>
- <td> </td>
- </tr>
- <tr>
- <td>{{SpecName("DOM4", "#dom-event-eventphase", "Event.eventPhase")}}</td>
- <td>{{Spec2("DOM4")}}</td>
- <td> </td>
- </tr>
- <tr>
- <td>{{SpecName("DOM2 Events", "#Events-Event-eventPhase", "Event.eventPhase")}}</td>
- <td>{{Spec2("DOM2 Events")}}</td>
- <td>Première définition</td>
- </tr>
- </tbody>
-</table>
+{{ EmbedLiveSample('Example', '', '700', '', 'Web/API/Event/eventPhase') }}
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Spécifications
+| Spécification | Statut | Commentaire |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName("DOM WHATWG", "#dom-event-eventphase", "Event.eventPhase")}} | {{Spec2("DOM WHATWG")}} |   |
+| {{SpecName("DOM4", "#dom-event-eventphase", "Event.eventPhase")}} | {{Spec2("DOM4")}} |   |
+| {{SpecName("DOM2 Events", "#Events-Event-eventPhase", "Event.eventPhase")}} | {{Spec2("DOM2 Events")}} | Première définition |
+## Compatibilité des navigateurs
-<p>{{Compat("api.Event.eventPhase")}}</p>
+{{Compat("api.Event.eventPhase")}}