diff options
author | julieng <julien.gattelier@gmail.com> | 2021-10-02 17:20:24 +0200 |
---|---|---|
committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-10-02 17:30:20 +0200 |
commit | 1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde (patch) | |
tree | 30a56efd3eff3a01bd1611e1840fdbbfacf544a4 /files/fr/web/api/event/eventphase/index.md | |
parent | c05efa8d7ae464235cf83d7c0956e42dc6974103 (diff) | |
download | translated-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.md | 228 |
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"><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> -</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 < 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 < 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 + "<br/>"; + divInfo.innerHTML += e.currentTarget.id + "; eventPhase: " + level + "<br/>"; } function Clear() { - for (var i = 0; i < divs.length; i++) { + for (var i = 0; i < divs.length; i++) { if (divs[i].id != "divInfo") - divs[i].style.backgroundColor = (i & 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")}} |