diff options
Diffstat (limited to 'files/fr/web/api/event')
18 files changed, 222 insertions, 246 deletions
diff --git a/files/fr/web/api/event/bubbles/index.html b/files/fr/web/api/event/bubbles/index.html index 0c59b8b0f6..6c9a6b68fc 100644 --- a/files/fr/web/api/event/bubbles/index.html +++ b/files/fr/web/api/event/bubbles/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Event/bubbles <p>Indique si l'événement donné se propage à travers le DOM ou non.</p> <div class="note"> -<p>Note : Voir <a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture">Propagation et capture des évènements</a> pour plus d'informations sur la propagation.</p> +<p><strong>Note :</strong> Voir <a href="/fr/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture">Propagation et capture des évènements</a> pour plus d'informations sur la propagation.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -25,23 +25,23 @@ translation_of: Web/API/Event/bubbles <p>Retourne un booléen dont la valeur est <code>true</code> (<em>vraie</em>) si l'événement se propage à travers le DOM.</p> -<h2 id="Syntax" name="Syntax">Exemple</h2> +<h2 id="Syntax">Exemple</h2> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">goInput</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// vérifie la propagation et</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>e<span class="punctuation token">.</span>bubbles<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// la lance si elle ne l'a pas été</span> - <span class="function token">passItOn</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="comment token">// déjà propagé</span> - <span class="function token">doOutput</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> -<span class="punctuation token">}</span></code></pre> +<pre class="brush: js">function goInput(e) { + // vérifie la propagation et + if (!e.bubbles) { + // la lance si elle ne l'a pas été + passItOn(e); + } + // déjà propagé + doOutput(e) +}</pre> <div class="note"> -<p><strong>Note </strong>: Certains évènements seulement peuvent se propager. Ceux dont cette propriété est définie à <code>true</code>. Vous pouvez utiliser cette propriété pour vérifier si un évènement est autorisé à se propager ou non.</p> +<p><strong>Note :</strong> Certains évènements seulement peuvent se propager. Ceux dont cette propriété est définie à <code>true</code>. Vous pouvez utiliser cette propriété pour vérifier si un évènement est autorisé à se propager ou non.</p> </div> -<h2 id="Specifications" name="Specifications">Spécifications</h2> +<h2 id="Specifications">Spécifications</h2> <table class="standard-table"> <thead> @@ -79,5 +79,5 @@ translation_of: Web/API/Event/bubbles <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation">stopPropagation</a> pour empêcher la propagation</li> + <li><a href="/en-US/docs/Web/API/Event/stopPropagation">stopPropagation</a> pour empêcher la propagation</li> </ul> diff --git a/files/fr/web/api/event/cancelable/index.html b/files/fr/web/api/event/cancelable/index.html index 0d17c1107e..3f3b86744b 100644 --- a/files/fr/web/api/event/cancelable/index.html +++ b/files/fr/web/api/event/cancelable/index.html @@ -11,15 +11,13 @@ translation_of: Web/API/Event/cancelable --- <div>{{ ApiRef("DOM") }}</div> -<h2 id="Summary" name="Summary">Résumé</h2> - <p>La propriété <dfn><code>cancelable</code></dfn> (<em>annulable</em>) de "Event" Indique si l'événement peut être annulé et donc empêché, comme si l'événement ne s'était jamais produit. Si l'événement n'est pas annulable, alors sa propriété <code>cancelable</code> est à <code>false</code> (<em>faux</em>) et l'écouteur d'événement ne peut pas l'arrêter.</p> <p>L'appel de {{domxref("event.preventDefault", "preventDefault()")}} sur un évènement qui ne peut être annulé produit une erreur, aussi les écouteurs d'évènement qui gèrent de nombreux types d'évènements peuvent être vérifiés avec <code>cancelable</code> avant d'appeler leurs méthodes <code>preventDefault()</code>.</p> -<p><span id="result_box" lang="fr"><span>La plupart des événements natifs du navigateur qui peuvent être annulés sont ceux qui résultent de l'interaction de l'utilisateur avec la page.</span> <span>L'annulation des événements <a href="https://developer.mozilla.org/fr/docs/Web/Events/click">click</a>, <a href="https://developer.mozilla.org/fr/docs/Web/Events/scroll">scroll</a> ou <a href="https://developer.mozilla.org/fr/docs/Web/Events/beforeunload">beforeunload</a> empêcherait l'utilisateur de cliquer sur un élément, de faire défiler la page ou de la quitter, respectivement.</span></span></p> +<p>La plupart des événements natifs du navigateur qui peuvent être annulés sont ceux qui résultent de l'interaction de l'utilisateur avec la page. L'annulation des événements <a href="/fr/docs/Web/Events/click">click</a>, <a href="/fr/docs/Web/Events/scroll">scroll</a> ou <a href="/fr/docs/Web/Events/beforeunload">beforeunload</a> empêcherait l'utilisateur de cliquer sur un élément, de faire défiler la page ou de la quitter, respectivement.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><var>bool</var> = <em>event</em>.cancelable </pre> @@ -28,33 +26,33 @@ translation_of: Web/API/Event/cancelable <li>Le résultat est un <code>booléen</code> qui est <code>true</code> (<em>vrai</em>) si l'événement peut être annulé.</li> </ul> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> -<p>Par exemple, les vendeurs de navigateurs proposent que l'<a href="https://developer.mozilla.org/fr/docs/Web/Events/wheel">évènement wheel </a>puisse être annulable seulement <a href="https://github.com/WICG/interventions/issues/33" rel="external">la première fois que l'écouteur est appelé</a> (en) ; les évènements <code>wheel</code> suivants ne peuvent être annulés.</p> +<p>Par exemple, les vendeurs de navigateurs proposent que l'<a href="/fr/docs/Web/Events/wheel">évènement wheel </a>puisse être annulable seulement <a href="https://github.com/WICG/interventions/issues/33">la première fois que l'écouteur est appelé</a> (en) ; les évènements <code>wheel</code> suivants ne peuvent être annulés.</p> -<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">preventScrollWheel</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">typeof</span> event<span class="punctuation token">.</span>cancelable <span class="operator token">!==</span> <span class="string token">'boolean'</span> <span class="operator token">||</span> event<span class="punctuation token">.</span>cancelable<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// L'événement peut être annulé, alors nous le faisons.</span> - event<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> - <span class="comment token">// L'évènement ne peut pas être annulé, il n'est donc pas sûr</span> - <span class="comment token">// d'appeler preventDefault() sur lui.</span> - console<span class="punctuation token">.</span><span class="function token">warn</span><span class="punctuation token">(</span><span class="template-string token"><span class="string token">`The following event couldn't be canceled:`</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> - console<span class="punctuation token">.</span><span class="function token">dir</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span> +<pre class="brush:js">function preventScrollWheel(event) { + if (typeof event.cancelable !== 'boolean' || event.cancelable) { + // L'événement peut être annulé, alors nous le faisons. + event.preventDefault(); + } else { + // L'évènement ne peut pas être annulé, il n'est donc pas sûr + // d'appeler preventDefault() sur lui. + console.warn(`The following event couldn't be canceled:`); + console.dir(event); + } +} -document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'wheel'</span><span class="punctuation token">,</span> preventCancelableEvents<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +document.addEventListener('wheel', preventCancelableEvents);</pre> <p> </p> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <p>Si l'événement peut être annulé, ou non, est déterminé au moment de l'initialisation de celui-ci.</p> <p>Pour annuler un événement, utiliser la méthode {{domxref("event.preventDefault", "preventDefault()")}} sur celui-ci. Cela permet d'empêcher l'action par défaut associée à l'événement de s'exécuter.</p> -<h2 id="Specifications" name="Specifications">Spécifications</h2> +<h2 id="Specifications">Spécifications</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/api/event/cancelbubble/index.html b/files/fr/web/api/event/cancelbubble/index.html index fad1a2ca95..07d891daed 100644 --- a/files/fr/web/api/event/cancelbubble/index.html +++ b/files/fr/web/api/event/cancelbubble/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Event/cancelBubble <p>La propriété <code><strong>Event.cancelBubble</strong></code> est un alias historique de {{domxref("Event.stopPropagation()")}}. Définir sa valeur à <code>true</code> (vrai) avant le renvoi à partir d'un gestionnaire d'évènements empêche la propagation de l'évènement. Dans les implémentations les plus tardives, cette définition à false (<em>faux</em>) ne fait rien. Voir {{anch("Compatibilité des navigateurs")}} pour plus de détails. </p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox">event.cancelBubble = <em>bool;</em> <em>var bool</em> = event.cancelBubble; @@ -44,10 +44,6 @@ translation_of: Web/API/Event/cancelBubble </tbody> </table> -<h2 id="Compatibilité_des_navigateurs"><a id="Compatibilité des navigateurs" name="Compatibilité des navigateurs"></a>Compatibilité des navigateurs</h2> - - +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> <p>{{Compat("api.Event.cancelBubble")}}</p> - -<div id="compat-desktop"> </div> diff --git a/files/fr/web/api/event/comparison_of_event_targets/index.html b/files/fr/web/api/event/comparison_of_event_targets/index.html index 5ffc759a23..1c4262776f 100644 --- a/files/fr/web/api/event/comparison_of_event_targets/index.html +++ b/files/fr/web/api/event/comparison_of_event_targets/index.html @@ -10,7 +10,7 @@ original_slug: Web/API/Event/Comparaison_des_cibles_d_évènements --- <p>{{ ApiRef() }}</p> -<h3 id="Event_targets" name="Event_targets">Cibles d'évènements</h3> +<h3 id="Event_targets">Cibles d'évènements</h3> <p>Il est facile de s'interroger sur la cible à examiner lors de l'écriture d'un gestionnaire d'événements. Cet article devrait clarifier l'utilisation des propriétés de la cible.</p> @@ -24,8 +24,8 @@ original_slug: Web/API/Event/Comparaison_des_cibles_d_évènements <th>Objectif</th> </tr> <tr> - <td><a href="/en/DOM/event.target" title="en/DOM/event.target">event.target</a></td> - <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-interface">DOM Event Interface</a></td> + <td><a href="/en/DOM/event.target">event.target</a></td> + <td><a href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-interface">DOM Event Interface</a></td> <td> <p>L'élément DOM sur le côté gauche de l'appel qui a déclenché cet événement, par exemple :</p> @@ -35,34 +35,34 @@ original_slug: Web/API/Event/Comparaison_des_cibles_d_évènements </td> </tr> <tr> - <td><a href="/en/DOM/event.currentTarget" title="en/DOM/event.currentTarget">event.currentTarget</a></td> - <td><a class="external" href="https://www.w3.org/TR/DOM-Level-2/events.html#Events-interface">DOM Event Interface</a></td> - <td>La <a class="external" href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-EventTarget"><code>EventTarget</code></a> (<em>cible d'évènement</em>) que les <a class="external" href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-EventListener"><code>EventListeners</code></a> traitent actuellement. Au fur et à mesure de la capture et de la diffusion des évènements, cette valeur change.</td> + <td><a href="/en/DOM/event.currentTarget">event.currentTarget</a></td> + <td><a href="https://www.w3.org/TR/DOM-Level-2/events.html#Events-interface">DOM Event Interface</a></td> + <td>La <a href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-EventTarget"><code>EventTarget</code></a> (<em>cible d'évènement</em>) que les <a href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-EventListener"><code>EventListeners</code></a> traitent actuellement. Au fur et à mesure de la capture et de la diffusion des évènements, cette valeur change.</td> </tr> <tr> - <td><a href="/en/DOM/event.relatedTarget" title="en/DOM/event.relatedTarget">event.relatedTarget</a></td> - <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-MouseEvent">DOM MouseEvent Interface</a></td> + <td><a href="/en/DOM/event.relatedTarget">event.relatedTarget</a></td> + <td><a href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-MouseEvent">DOM MouseEvent Interface</a></td> <td>Identifie une cible secondaire pour l'évènement.</td> </tr> <tr> - <td><a href="/en/DOM/event.explicitOriginalTarget" title="en/DOM/event.explicitOriginalTarget">event.explicitOriginalTarget</a></td> + <td><a href="/en/DOM/event.explicitOriginalTarget">event.explicitOriginalTarget</a></td> <td>{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}</td> <td>{{ Non-standard_inline() }} Si l'évènement a été reciblé pour quelque raison autre que un passage de limite anonyme, il sera défini sur la cible avant le reciblage. Par exemple, les évènements de souris sont reciblés vers leur noeud parent quand ils surviennent sur des noeuds de texte ({{ Bug("185889") }}), et, dans ce cas, <code>.target</code> affichera le parent <code>.explicitOriginalTarget</code> et le noeud de texte.<br> Contrairement à <code>.originalTarget</code>, <code>.explicitOriginalTarget</code> n'aura jamais de contenu anonyme.</td> </tr> <tr> - <td><a href="/en/DOM/event.originalTarget" title="en/DOM/event.originalTarget">event.originalTarget</a></td> + <td><a href="/en/DOM/event.originalTarget">event.originalTarget</a></td> <td>{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}</td> - <td>{{ Non-standard_inline() }} La cible originale de l'évènement, avant tout reciblage. Voir <a href="/en-US/docs/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting" title="en/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting">Anonymous Content#Event_Flow_and_Targeting</a> pour plus de détails.</td> + <td>{{ Non-standard_inline() }} La cible originale de l'évènement, avant tout reciblage. Voir <a href="/en-US/docs/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting">Anonymous Content#Event_Flow_and_Targeting</a> pour plus de détails.</td> </tr> </tbody> </table> -<h3 id="Use_of_explicitOriginalTarget_and_originalTarget" name="Use_of_explicitOriginalTarget_and_originalTarget">Utilisation de <code>explicitOriginalTarget</code> et <code>originalTarget</code></h3> +<h3 id="Use_of_explicitOriginalTarget_and_originalTarget">Utilisation de <code>explicitOriginalTarget</code> et <code>originalTarget</code></h3> <p>Problème : Seulement disponible dans un navigateur basé sur Mozilla ? Problème : Convient uniquement aux développeurs d'extensions ?</p> -<h3 id="Examples" name="Examples">Exemples</h3> +<h3 id="Examples">Exemples</h3> <pre><!DOCTYPE html> <html> @@ -130,7 +130,7 @@ original_slug: Web/API/Event/Comparaison_des_cibles_d_évènements </body> </html></pre> -<h3 id="Use_of_target_and_relatedTarget" name="Use_of_target_and_relatedTarget">Utilisation de <code>target</code> et <code>relatedTarget</code></h3> +<h3 id="Use_of_target_and_relatedTarget">Utilisation de <code>target</code> et <code>relatedTarget</code></h3> <p>La propriété <code>relatedTarget</code> (<em>cible associée</em>) pour l'évènement <code>mouseover</code> détient le noeud que la souris avait précédemment atteint. Pour l'évènement <code>mouseout</code>, il détient le noeud que la souris a déplacé à.</p> @@ -138,8 +138,8 @@ original_slug: Web/API/Event/Comparaison_des_cibles_d_évènements <tbody> <tr> <th>Type d'évènement</th> - <th><a href="/en/DOM/event.target" title="en/DOM/event.target">event.target</a></th> - <th><a href="/en/DOM/event.relatedTarget" title="en/DOM/event.relatedTarget">event.relatedTarget</a></th> + <th><a href="/en/DOM/event.target">event.target</a></th> + <th><a href="/en/DOM/event.relatedTarget">event.relatedTarget</a></th> </tr> <tr> <td><code>mouseover</code></td> @@ -156,7 +156,7 @@ original_slug: Web/API/Event/Comparaison_des_cibles_d_évènements <p>Problème : A également besoin de descriptions sur les évènements <code>dragenter</code> et <code>dragexit</code>.</p> -<h4 id="Example" name="Example">Exemple</h4> +<h4 id="Example">Exemple</h4> <pre class="eval"><hbox id="outer"> <hbox id="inner" diff --git a/files/fr/web/api/event/currenttarget/index.html b/files/fr/web/api/event/currenttarget/index.html index 996b6748fa..d70ad8d00f 100644 --- a/files/fr/web/api/event/currenttarget/index.html +++ b/files/fr/web/api/event/currenttarget/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/Event/currentTarget <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">var <em>currentEventTarget</em> = <em>event</em>.currentTarget;</pre> +<pre class="syntaxbox">var <em>currentEventTarget</em> = <em>event</em>.currentTarget;</pre> <h3 id="Valeur">Valeur</h3> @@ -25,7 +25,7 @@ translation_of: Web/API/Event/currentTarget <p><code>Event.currentTarget</code> peut s'avérer utile lorsqu'on attache le même gestionnaire d'évènement à plusieurs éléments.</p> -<pre class="brush: js notranslate">// Cette fonction masque la cible courante de l'évènement +<pre class="brush: js">// Cette fonction masque la cible courante de l'évènement // et l'affiche dans la console. function hide(e){ e.currentTarget.style.visibility = 'hidden'; @@ -46,7 +46,7 @@ document.body.addEventListener('click', hide, false); </pre> <div class="note"> -<p><strong>Note : </strong>La valeur de <code>event.currentTarget</code> est <strong>uniquement</strong> disponible lorsque l'évènement est géré. Ainsi, on ne pourra pas observer la valeur de <code>currentTarget</code> <em>a posteriori</em> (ex. si on a stocké la valeur d'<code>event</code> dans une variable lors de la gestion de l'évènement puis qu'on utilise celle-ci plus tard, <code>event.currentTarget</code> aura la valeur <code>null</code>).</p> +<p><strong>Note :</strong> La valeur de <code>event.currentTarget</code> est <strong>uniquement</strong> disponible lorsque l'évènement est géré. Ainsi, on ne pourra pas observer la valeur de <code>currentTarget</code> <em>a posteriori</em> (ex. si on a stocké la valeur d'<code>event</code> dans une variable lors de la gestion de l'évènement puis qu'on utilise celle-ci plus tard, <code>event.currentTarget</code> aura la valeur <code>null</code>).</p> </div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/event/defaultprevented/index.html b/files/fr/web/api/event/defaultprevented/index.html index 395c353226..f5b25e7c7d 100644 --- a/files/fr/web/api/event/defaultprevented/index.html +++ b/files/fr/web/api/event/defaultprevented/index.html @@ -14,7 +14,9 @@ translation_of: Web/API/Event/defaultPrevented <p>Retourne un booléen indiquant si {{domxref("event.preventDefault()")}} a été appelée sur l'évènement ou non.</p> -<div class="note"><strong>Note :</strong> Cette propriété doit etre utilisée au lieu de la méthode <code>getPreventDefault()</code> qui n'est pas standard et est désormais dépréciée (voir {{bug(691151)}}).</div> +<div class="note"> + <p><strong>Note :</strong> Cette propriété doit etre utilisée au lieu de la méthode <code>getPreventDefault()</code> qui n'est pas standard et est désormais dépréciée (voir {{bug(691151)}}).</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/api/event/event/index.html b/files/fr/web/api/event/event/index.html index 464a126f19..8a6992dc29 100644 --- a/files/fr/web/api/event/event/index.html +++ b/files/fr/web/api/event/event/index.html @@ -21,16 +21,12 @@ translation_of: Web/API/Event/Event <dl> <dt><em>typeArg</em></dt> <dd>C'est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant le nom de l'évènement.</dd> - <dt><em>eventInit </em>{{optional_inline}}</dt> -</dl> - -<dl> - <dd>C'est un dictionnaire <code>EventInit</code> ayant les champs suivants : - + <dt><em>eventInit</em>{{optional_inline}}</dt> + <dd><p>C'est un dictionnaire <code>EventInit</code> ayant les champs suivants :</p> <ul> <li><code>bubbles</code>: (facultatif) un {{jsxref("Boolean")}} indiquant si les événements sont propagés . Par défaut est <code>false</code> (<em>faux</em>).</li> <li><code>cancelable</code>: (facultatif) un {{jsxref("Boolean")}} indiquant si l'évènement peut être annulé. Par défaut est <code>false</code> (<em>faux</em>) .</li> - <li><code>composed</code>: ( facultatif ) un {{jsxref("Boolean")}} indiquant si l'évènement déclenchera les écouteurs en dehors d'une racine shadow (voir {{domxref("Event.composed")}} pour plus de détails). Par défaut est <code>false</code> (<em>faux</em>) .<span class="hidden"> </span></li> + <li><code>composed</code>: ( facultatif ) un {{jsxref("Boolean")}} indiquant si l'évènement déclenchera les écouteurs en dehors d'une racine shadow (voir {{domxref("Event.composed")}} pour plus de détails). Par défaut est <code>false</code> (<em>faux</em>) .</li> </ul> </dd> </dl> @@ -47,7 +43,7 @@ myDiv.dispatchEvent(evt); <h2 id="Spécifications">Spécifications</h2> -<table class="standard-table" style="height: 49px; width: 1000px;"> +<table class="standard-table"> <thead> <tr> <th scope="col">Spécification</th> diff --git a/files/fr/web/api/event/eventphase/index.html b/files/fr/web/api/event/eventphase/index.html index 439f769f0a..290a0e6659 100644 --- a/files/fr/web/api/event/eventphase/index.html +++ b/files/fr/web/api/event/eventphase/index.html @@ -23,7 +23,7 @@ translation_of: Web/API/Event/eventPhase <h2 id="Constantes">Constantes</h2> -<h3 id="Constantes_de_phase_d'événement"><a id="Constantes de phase d'événement" name="Constantes de phase d'événement"></a>Constantes de phase d'événement</h3> +<h3 id="Constantes_de_phase_d'événement">Constantes de phase d'événement</h3> <p>Ces valeurs décrivent quelle est la phase du flux d'événements actuellement évalué.</p> @@ -63,9 +63,9 @@ translation_of: Web/API/Event/eventPhase </tbody> </table> -<p>Pour plus de détails, voir <a class="external" 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> +<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" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <h3 id="HTML">HTML</h3> @@ -106,59 +106,59 @@ translation_of: Web/API/Event/eventPhase <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> clear <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">,</span> divInfo <span class="operator token">=</span> <span class="keyword token">null</span><span class="punctuation token">,</span> divs <span class="operator token">=</span> <span class="keyword token">null</span><span class="punctuation token">,</span> useCapture <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">;</span> -window<span class="punctuation token">.</span>onload <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - divInfo <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"divInfo"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - divs <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">'div'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - chCapture <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"chCapture"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - chCapture<span class="punctuation token">.</span>onclick <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="function token">RemoveListeners</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="function token">AddListeners</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="function token">Clear</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="function token">AddListeners</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="keyword token">function</span> <span class="function token">RemoveListeners</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token"><</span> divs<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> d <span class="operator token">=</span> divs<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">;</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>d<span class="punctuation token">.</span>id <span class="operator token">!=</span> <span class="string token">"divInfo"</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - d<span class="punctuation token">.</span><span class="function token">removeEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> OnDivClick<span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - d<span class="punctuation token">.</span><span class="function token">removeEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> OnDivClick<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span> - -<span class="keyword token">function</span> <span class="function token">AddListeners</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token"><</span> divs<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> d <span class="operator token">=</span> divs<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">;</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>d<span class="punctuation token">.</span>id <span class="operator token">!=</span> <span class="string token">"divInfo"</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>chCapture<span class="punctuation token">.</span>checked<span class="punctuation token">)</span> - d<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> OnDivClick<span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">else</span> - d<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> OnDivClick<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - d<span class="punctuation token">.</span>onmousemove <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> clear <span class="operator token">=</span> <span class="keyword token">true</span><span class="punctuation token">;</span> <span class="punctuation token">}</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span> - -<span class="keyword token">function</span> <span class="function token">OnDivClick</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>clear<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="function token">Clear</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> clear <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>eventPhase <span class="operator token">==</span> <span class="number token">2</span><span class="punctuation token">)</span> - e<span class="punctuation token">.</span>currentTarget<span class="punctuation token">.</span>style<span class="punctuation token">.</span>backgroundColor <span class="operator token">=</span> <span class="string token">'red'</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> level <span class="operator token">=</span> e<span class="punctuation token">.</span>eventPhase <span class="operator token">==</span> <span class="number token">0</span> <span class="operator token">?</span> <span class="string token">"none"</span> <span class="punctuation token">:</span> e<span class="punctuation token">.</span>eventPhase <span class="operator token">==</span> <span class="number token">1</span> <span class="operator token">?</span> <span class="string token">"capturing"</span> <span class="punctuation token">:</span> e<span class="punctuation token">.</span>eventPhase <span class="operator token">==</span> <span class="number token">2</span> <span class="operator token">?</span> <span class="string token">"target"</span> <span class="punctuation token">:</span> e<span class="punctuation token">.</span>eventPhase <span class="operator token">==</span> <span class="number token">3</span> <span class="operator token">?</span> <span class="string token">"bubbling"</span> <span class="punctuation token">:</span> <span class="string token">"error"</span><span class="punctuation token">;</span> - divInfo<span class="punctuation token">.</span>innerHTML <span class="operator token">+</span><span class="operator token">=</span> e<span class="punctuation token">.</span>currentTarget<span class="punctuation token">.</span>id <span class="operator token">+</span> <span class="string token">"; eventPhase: "</span> <span class="operator token">+</span> level <span class="operator token">+</span> <span class="string token">"<br/>"</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="keyword token">function</span> <span class="function token">Clear</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token"><</span> divs<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>divs<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>id <span class="operator token">!=</span> <span class="string token">"divInfo"</span><span class="punctuation token">)</span> - divs<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>style<span class="punctuation token">.</span>backgroundColor <span class="operator token">=</span> <span class="punctuation token">(</span>i <span class="operator token">&</span> <span class="number token">1</span><span class="punctuation token">)</span> <span class="operator token">?</span> <span class="string token">"#f6eedb"</span> <span class="punctuation token">:</span> <span class="string token">"#cceeff"</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - divInfo<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> <span class="string token">''</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> +<pre class="brush: js">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 = ''; +}</pre> <p>{{ EmbedLiveSample('Example', '', '700', '', 'Web/API/Event/eventPhase') }}</p> diff --git a/files/fr/web/api/event/index.html b/files/fr/web/api/event/index.html index b8c7a25d24..a85599f14b 100644 --- a/files/fr/web/api/event/index.html +++ b/files/fr/web/api/event/index.html @@ -26,7 +26,6 @@ translation_of: Web/API/Event <p>On notera que l'ensemble des interfaces d'évènements ont un nom qui termine par <i>Event</i> (« évènement » en anglais).</p> -<div class="index"> <ul> <li><a href="/fr/docs/Web/API/AnimationEvent"><code>AnimationEvent</code></a></li> <li><a href="/fr/docs/Web/API/AudioProcessingEvent"><code>AudioProcessingEvent</code></a></li> @@ -79,12 +78,11 @@ translation_of: Web/API/Event <li><a href="/fr/docs/Web/API/WebGLContextEvent"><code>WebGLContextEvent</code></a></li> <li><a href="/fr/docs/Web/API/WheelEvent"><code>WheelEvent</code></a></li> </ul> -</div> <h2 id="constructor">Constructeur</h2> <dl> - <dt><a href="/fr/docs/Web/API/Event/Event"><code>Event()</code></dt> + <dt><a href="/fr/docs/Web/API/Event/Event"><code>Event()</code></a></dt> <dd>Crée un objet <code>Event</code> et le renvoie à l'appelant.</dd> </dl> diff --git a/files/fr/web/api/event/initevent/index.html b/files/fr/web/api/event/initevent/index.html index 983a23e130..6f06e8b7f3 100644 --- a/files/fr/web/api/event/initevent/index.html +++ b/files/fr/web/api/event/initevent/index.html @@ -13,15 +13,15 @@ translation_of: Web/API/Event/initEvent <p>La méthode <strong><code>Event.initEvent()</code></strong> est utilisée pour initialiser la valeur d'un objet {{domxref("event")}} créé à l'aide de {{domxref("Document.createEvent()")}}.</p> -<p>Les évènements initialisés par ce moyen ont été créés par la méthode {{domxref("Document.createEvent()")}}. Celle-ci doit être appelée à définir l'évènement avant qu'il ne soit distribué, en utilisant {{domxref("EventTarget.dispatchEvent()")}}. <span class="short_text" id="result_box" lang="fr"><span>Une fois l'évènement transmis, la méthode ne fait plus rien.</span></span></p> +<p>Les évènements initialisés par ce moyen ont été créés par la méthode {{domxref("Document.createEvent()")}}. Celle-ci doit être appelée à définir l'évènement avant qu'il ne soit distribué, en utilisant {{domxref("EventTarget.dispatchEvent()")}}. Une fois l'évènement transmis, la méthode ne fait plus rien.</p> <div class="note"> -<p><strong><span class="short_text" lang="fr"><span>Note : Ne pas utiliser cette méthode qui est dépréciée</span></span></strong></p> +<p><strong>Note :</strong> Ne pas utiliser cette méthode qui est dépréciée.</p> -<p>À la place, utilisez un constructeur d'évènements spécifique comme {{domxref("Event.Event", "Event()")}} . La page <a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Création et déclenchement d'évènements</a> vous donne plus d'informations sur la manière de les utiliser.</p> +<p>À la place, utilisez un constructeur d'évènements spécifique comme {{domxref("Event.Event", "Event()")}} . La page <a href="/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Création et déclenchement d'évènements</a> vous donne plus d'informations sur la manière de les utiliser.</p> </div> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="eval"><em>event</em>.initEvent(<em>type</em>, <em>bubbles</em>, <em>cancelable</em>) </pre> @@ -35,7 +35,7 @@ translation_of: Web/API/Event/initEvent <dd>Une valeur booléenne définissant si l'évènement peut être annulé. Une fois déterminé, la propriété en lecture seule {{ domxref("Event.cancelable") }} donnera sa valeur.</dd> </dl> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<h2 id="Exemple">Exemple</h2> <pre><code>// Crée un évènement. var event = document.createEvent('Event'); @@ -64,7 +64,7 @@ elem.dispatchEvent(event);</code> <tr> <td>{{SpecName('DOM WHATWG', '#dom-event-initevent','Event.initEvent()')}}</td> <td>{{Spec2("DOM WHATWG")}}</td> - <td>Depuis {{SpecName('DOM2 Events')}}, dépréciée, <span class="short_text" id="result_box" lang="fr"><span>remplacée par les constructeurs d'événements.</span></span></td> + <td>Depuis {{SpecName('DOM2 Events')}}, dépréciée, remplacée par les constructeurs d'événements.</td> </tr> <tr> <td>{{SpecName('DOM2 Events','##Events-Event-initEvent','Event.initEvent()')}}</td> diff --git a/files/fr/web/api/event/istrusted/index.html b/files/fr/web/api/event/istrusted/index.html index 65df2eb716..0267223d10 100644 --- a/files/fr/web/api/event/istrusted/index.html +++ b/files/fr/web/api/event/istrusted/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Event/isTrusted <p>La propriété en lecture seule isTrusted, de l'interface {{domxref("Event")}}, est un booléen qui vaut true lorsque l'événement est généré par une action de l'utilisateur, et false, quand l'événement est créé ou modifié par un script ou envoyé par dispatchEvent.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox">var bool = event.isTrusted; </pre> diff --git a/files/fr/web/api/event/originaltarget/index.html b/files/fr/web/api/event/originaltarget/index.html index ad65cdc914..810c8276a5 100644 --- a/files/fr/web/api/event/originaltarget/index.html +++ b/files/fr/web/api/event/originaltarget/index.html @@ -12,23 +12,19 @@ translation_of: Web/API/Event/originalTarget --- <div>{{ ApiRef("DOM") }} {{Non-standard_header}}</div> -<div> </div> - -<h2 id="Summary" name="Summary">Résumé</h2> - <p>La cible d'origine de l'évènement avant tout reciblage. (spécifique à Mozilla)</p> -<p>En présence de contenu anonyme <a href="https://developer.mozilla.org/fr/docs/XBL" title="XBL">XBL</a>, ce sera le nœud anonyme sur lequel l'événement a été déclenché à l'origine. Voir <a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting" title="XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting">Anonymous Content#Event_Flow_and_Targeting</a> pour plus de détails.</p> +<p>En présence de contenu anonyme <a href="/fr/docs/XBL">XBL</a>, ce sera le nœud anonyme sur lequel l'événement a été déclenché à l'origine. Voir <a href="/fr/docs/Mozilla/Tech/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting">Anonymous Content#Event_Flow_and_Targeting</a> pour plus de détails.</p> <p><strong>Note :</strong> <code>originalTarget</code> peut aussi être un contenu anonyme natif (voir {{Bug("208427")}}), dans ce cas, il est inutile pour le code non privilégié.</p> -<p>Voir aussi <a href="https://developer.mozilla.org/fr/docs/Web/API/Event/Comparaison_des_cibles_d_%C3%A9v%C3%A8nements" title="DOM/event/Comparison_of_Event_Targets">Comparaison des cibles d'évènements.</a></p> +<p>Voir aussi <a href="/fr/docs/Web/API/Event/Comparaison_des_cibles_d_%C3%A9v%C3%A8nements">Comparaison des cibles d'évènements.</a></p> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <p><em>Besoin d'un exemple qui ait du sens ici. ^^</em></p> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <p>C'est une propriété propre à Mozilla. Définie dans {{Source("/dom/public/idl/events/nsIDOMNSEvent.idl")}}</p> diff --git a/files/fr/web/api/event/returnvalue/index.html b/files/fr/web/api/event/returnvalue/index.html index 98863439b0..97654470d7 100644 --- a/files/fr/web/api/event/returnvalue/index.html +++ b/files/fr/web/api/event/returnvalue/index.html @@ -14,10 +14,10 @@ translation_of: Web/API/Event/returnValue <p>La propriété <code><strong>Event.returnValue</strong></code> indique si l'action par défaut pour cet évènement a été empêchée ou non. Elle est définie à <code>true</code> (<em>vrai</em>) par défaut, permettant à l'action par défaut de se produire. La définition de cette propriété à <code>false</code> (<em>faux</em>) empêche le déclenchement de l'action par défaut.</p> <div class="note"> -<p>Utilisez {{domxref("Event.preventDefault()")}} à la place de cette méthode non standard.</p> +<p><strong>Note :</strong> Utilisez {{domxref("Event.preventDefault()")}} à la place de cette méthode non standard.</p> </div> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox">event.returnValue = <em>bool;</em> <em>var bool</em> = event.returnValue; @@ -27,10 +27,6 @@ translation_of: Web/API/Event/returnValue <p>Bien qu'elle ait été inclue <a href="https://www.w3.org/TR/1999/WD-DOM-Level-2-19990304/events.html#attribute-returnValue">dans l'ancien brouillon de travail de W3C DOM niveau 2</a><em>, cette propriété ne fait partie d'aucune spécification.</em></p> -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2> - - +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("api.Event.returnValue")}}</p> - -<div id="compat-mobile"> </div> diff --git a/files/fr/web/api/event/srcelement/index.html b/files/fr/web/api/event/srcelement/index.html index 94328eecf1..6b0ab681b4 100644 --- a/files/fr/web/api/event/srcelement/index.html +++ b/files/fr/web/api/event/srcelement/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Event/srcElement <p>{{ Non-standard_header() }}</p> -<p><strong><code>Event.srcElement</code></strong> est un alias propriétaire (implémenté dans Internet Explorer) pour la propriété standard {{domxref("Event.target")}} <span id="result_box" lang="fr"><span>qui commence à être pris en charge dans d'autres navigateurs à des fins de compatibilité Web.</span></span></p> +<p><strong><code>Event.srcElement</code></strong> est un alias propriétaire (implémenté dans Internet Explorer) pour la propriété standard {{domxref("Event.target")}} qui commence à être pris en charge dans d'autres navigateurs à des fins de compatibilité Web.</p> <h2 id="Spécification">Spécification</h2> diff --git a/files/fr/web/api/event/stoppropagation/index.html b/files/fr/web/api/event/stoppropagation/index.html index 5956fc1e5b..1f8dd6e09f 100644 --- a/files/fr/web/api/event/stoppropagation/index.html +++ b/files/fr/web/api/event/stoppropagation/index.html @@ -9,25 +9,25 @@ tags: - Reference translation_of: Web/API/Event/stopPropagation --- -<p id="Summary">{{APIRef("DOM")}}</p> +<div>{{APIRef("DOM")}}</div> <p>Évite que l'évènement courant ne se propage plus loin dans les phases de capture et de déploiement.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>event</em>.stopPropagation();</pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> -<p>Voir la section Exemple 5 : <a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Exemples#Exemple_5_:_propagation_d%27%C3%A9v%C3%A8nements" title="https://developer.mozilla.org/en-US/docs/Gecko_DOM_Reference/Examples#Example_5.3A_Event_Propagation">Propagation d'évènements</a> dans le chapitre Exemples pour un exemple plus détaillé de cette méthode et de la propagation d'évènements dans le DOM.</p> +<p>Voir la section Exemple 5 : <a href="/fr/docs/Web/API/Document_Object_Model/Exemples#Exemple_5_:_propagation_d%27%C3%A9v%C3%A8nements">Propagation d'évènements</a> dans le chapitre Exemples pour un exemple plus détaillé de cette méthode et de la propagation d'évènements dans le DOM.</p> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> -<p>Voir <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-capture">DOM specification</a> (en) pour une explication du flux d'évènements. (Une illustration est disponible dans le brouillon <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow" title="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM Level 3 Event draft</a> (en)).</p> +<p>Voir <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-capture">DOM specification</a> (en) pour une explication du flux d'évènements. (Une illustration est disponible dans le brouillon <a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM Level 3 Event draft</a> (en)).</p> -<p><a href="/fr/docs/Web/API/Event/preventDefault" title="DOM/event.preventDefault">preventDefault</a> est une méthode complémentaire qui peut être utilisée pour empêcher l'action par défaut de l'évènement.</p> +<p><a href="/fr/docs/Web/API/Event/preventDefault">preventDefault</a> est une méthode complémentaire qui peut être utilisée pour empêcher l'action par défaut de l'évènement.</p> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <table class="standard-table"> <tbody> @@ -56,10 +56,4 @@ translation_of: Web/API/Event/stopPropagation <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - - -<p>{{Compat("api.Event.stopPropagation")}}</p> - -<div id="compat-desktop"> -<div id="compat-mobile"> </div> -</div> +<p>{{Compat("api.Event.stopPropagation")}}</p>
\ No newline at end of file diff --git a/files/fr/web/api/event/target/index.html b/files/fr/web/api/event/target/index.html index b624041ab6..2ab12c5de0 100644 --- a/files/fr/web/api/event/target/index.html +++ b/files/fr/web/api/event/target/index.html @@ -13,32 +13,32 @@ translation_of: Web/API/Event/target <p>C'est une référence à l'objet qui a envoyé l'événement. C'est une propriété différente de {{domxref("event.currentTarget")}} lorsque le gestionnaire d'événements est appelé au cours de la phase de propagation ou de la phase de capture de l'événement.</p> -<h2 id="Example" name="Example">Syntaxe</h2> +<h2 id="Example">Syntaxe</h2> <pre><code><code>laCible = event.target</code></code></pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <p>La propriété <code>event.target</code> peut être utilisée pour implémenter la <strong>délégation d'événements</strong>.</p> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// Produit une liste</span> -<span class="keyword token">var</span> ul <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'ul'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>ul<span class="punctuation token">)</span><span class="punctuation token">;</span> +<pre class="brush: js">// Produit une liste +var ul = document.createElement('ul'); +document.body.appendChild(ul); -<span class="keyword token">var</span> li1 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'li'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> li2 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'li'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -ul<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>li1<span class="punctuation token">)</span><span class="punctuation token">;</span> -ul<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>li2<span class="punctuation token">)</span><span class="punctuation token">;</span> +var li1 = document.createElement('li'); +var li2 = document.createElement('li'); +ul.appendChild(li1); +ul.appendChild(li2); -<span class="keyword token">function</span> <span class="function token">hide</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">{</span> - <span class="comment token">// e.target se réfère à l'élément <li> cliqué</span> - <span class="comment token">// C'est différent de e.currentTarget qui doit faire référence au parent <ul> dans ce contexte</span> - e<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>visibility <span class="operator token">=</span> <span class="string token">'hidden'</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> +function hide(e){ + // e.target se réfère à l'élément <li> cliqué + // C'est différent de e.currentTarget qui doit faire référence au parent <ul> dans ce contexte + e.target.style.visibility = 'hidden'; +} -<span class="comment token">// Attache l'écouteur à la liste</span> -<span class="comment token">// Il se déclenche pour chaque <li> clické</span> -ul<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> hide<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +// Attache l'écouteur à la liste +// Il se déclenche pour chaque <li> clické +ul.addEventListener('click', hide, false);</pre> <h2 id="Spécifications">Spécifications</h2> @@ -75,9 +75,9 @@ ul<span class="punctuation token">.</span><span class="function token">addEventL <h2 id="Notes_concernant_la_compatibilité">Notes concernant la compatibilité</h2> -<p>Sur IE6-8, le modèle d'événement est différent. Les écouteurs sont attachés avec la méthode non standard <code>{{domxref('EventTarget.attachEvent')}}</code> . Dans ce modèle, l'objet événement a une propriété <code>{{domxref('Event.srcElement')}}</code>, à la place de la propriété <code>target</code>, avec la même sémantique que<span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">event.target</code><span style="line-height: 1.5;">.</span></p> +<p>Sur IE6-8, le modèle d'événement est différent. Les écouteurs sont attachés avec la méthode non standard <code>{{domxref('EventTarget.attachEvent')}}</code> . Dans ce modèle, l'objet événement a une propriété <code>{{domxref('Event.srcElement')}}</code>, à la place de la propriété <code>target</code>, avec la même sémantique que <code>event.target</code>.</p> -<pre class="brush: js" style="font-size: 14px;">function hide(e) { +<pre class="brush: js">function hide(e) { // Support IE6-8 var target = e.target || e.srcElement; target.style.visibility = 'hidden'; @@ -86,4 +86,4 @@ ul<span class="punctuation token">.</span><span class="function token">addEventL <h2 id="Voir_aussi">Voir aussi</h2> -<p><a href="https://developer.mozilla.org/fr/docs/Web/API/Event/Comparaison_des_cibles_d_%C3%A9v%C3%A8nements" title="en/DOM/event/Comparison_of_Event_Targets">Comparaison des cibles d'évènements</a></p> +<p><a href="/fr/docs/Web/API/Event/Comparaison_des_cibles_d_%C3%A9v%C3%A8nements">Comparaison des cibles d'évènements</a></p> diff --git a/files/fr/web/api/event/timestamp/index.html b/files/fr/web/api/event/timestamp/index.html index b3e2333120..c4bc3ffe6a 100644 --- a/files/fr/web/api/event/timestamp/index.html +++ b/files/fr/web/api/event/timestamp/index.html @@ -14,65 +14,65 @@ translation_of: Web/API/Event/timeStamp <p>Retourne le temps (en millisecondes) à partir duquel l'événement a été créé.</p> <div class="note"> -<p>Note : Cette propriété fonctionne seulement si le système d'évènements le prend en charge pour des évènements particuliers.</p> +<p><strong>Note :</strong> Cette propriété fonctionne seulement si le système d'évènements le prend en charge pour des évènements particuliers.</p> </div> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox">event.timeStamp </pre> -<h3 id="Examples" name="Examples">Valeur</h3> +<h3 id="Examples">Valeur</h3> <p>Cette valeur est un nombre de millisecondes écoulées depuis le début du temps de vie du document courant jusqu'à la création de l'évènement.</p> <p>Dans les nouvelles implémentations, la valeur est un {{domxref("DOMHighResTimeStamp")}} dont la précision est de 5 microsecondes (0,005 ms). Dans les implémentations plus anciennes, la valeur est un {{domxref("DOMTimeStamp")}} de précision d'une milliseconde.</p> -<h2 id="Examples" name="Examples">Exemple</h2> +<h2 id="Examples">Exemple</h2> <h3 id="HTML">HTML</h3> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> +<pre class="brush: html"><p> Focus this iframe and press any key to get the current timestamp for the keypress event. -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>timeStamp: <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>span</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>time<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>-<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>span</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span></code></pre> +</p> +<p>timeStamp: <span id="time">-</span></p></pre> <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">getTime</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> time <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"time"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - time<span class="punctuation token">.</span>firstChild<span class="punctuation token">.</span>nodeValue <span class="operator token">=</span> event<span class="punctuation token">.</span>timeStamp<span class="punctuation token">;</span> -<span class="punctuation token">}</span> -document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"keypress"</span><span class="punctuation token">,</span> getTime<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">function getTime(event) { + var time = document.getElementById("time"); + time.firstChild.nodeValue = event.timeStamp; +} +document.body.addEventListener("keypress", getTime);</pre> <h3 id="Résultat">Résultat</h3> <p>{{EmbedLiveSample("Example", "100%", 100)}}</p> -<h2 id="Notes" name="Notes">Précision du temps réduite</h2> +<h2 id="Notes">Précision du temps réduite</h2> <p>Pour offrir une protection contre les attaques de synchronisation et les empreintes digitales, la précision de <code>event.timeStamp</code> peut être arrondie en fonction des paramètres du navigateur.<br> Dans Firefox, la préférence <code>privacy.reduceTimerPrecision</code> est activée et à 20 us par défaut dans Firefox 59 ; en version 60 ce sera 2 ms.</p> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// Précision du temps réduite (2ms) dans Firefox 60</span> -event<span class="punctuation token">.</span>timeStamp<span class="punctuation token">;</span> -<span class="comment token">// 1519211809934</span> -<span class="comment token">// 1519211810362</span> -<span class="comment token">// 1519211811670</span> -<span class="comment token">// ...</span> +<pre class="brush: js">// Précision du temps réduite (2ms) dans Firefox 60 +event.timeStamp; +// 1519211809934 +// 1519211810362 +// 1519211811670 +// ... -<span class="comment token">// Précision du temps réduite avec `privacy.resistFingerprinting` activé</span> -event<span class="punctuation token">.</span>timeStamp<span class="punctuation token">;</span> -<span class="comment token">// 1519129853500</span> -<span class="comment token">// 1519129858900</span> -<span class="comment token">// 1519129864400</span> -<span class="comment token">// ...</span></code></pre> +// Précision du temps réduite avec `privacy.resistFingerprinting` activé +event.timeStamp; +// 1519129853500 +// 1519129858900 +// 1519129864400 +// ...</pre> <p>Dans Firefox, vous pouvez aussi activer <code>privacy.resistFingerprinting</code>, la précision sera de 100 ms ou la valeur de <code>privacy.resistFingerprinting.reduceTimerPrecision.microseconds</code>, selon la valeur la plus grande.</p> -<h2 id="Specifications" name="Specifications">Spécifications</h2> +<h2 id="Specifications">Spécifications</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/api/event/type/index.html b/files/fr/web/api/event/type/index.html index c50dcb0fea..7931a24a5a 100644 --- a/files/fr/web/api/event/type/index.html +++ b/files/fr/web/api/event/type/index.html @@ -15,63 +15,63 @@ translation_of: Web/API/Event/type <p>L'argument <code><em>event</em></code> de {{ domxref("EventTarget.addEventListener()") }} et {{ domxref("EventTarget.removeEventListener()") }} n'est pas sensible à la casse.</p> -<p>Pour une liste des types d'événements disponibles, aller voir la page <a href="https://developer.mozilla.org/fr/docs/Web/Events">Référence des évènements</a>.</p> +<p>Pour une liste des types d'événements disponibles, aller voir la page <a href="/fr/docs/Web/Events">Référence des évènements</a>.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox">event.type </pre> -<h2 id="Example" name="Example">Exemples</h2> +<h2 id="Example">Exemples</h2> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>utf-8<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> +<pre class="brush: html"><!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>Event.type Example<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> + <title>Event.type Example</title> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span><span class="punctuation token">></span></span><span class="language-javascript script token"> - <span class="keyword token">var</span> currEvent<span class="punctuation token">;</span> - <span class="keyword token">function</span> <span class="function token">getEvtType</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">group</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <script> + var currEvent; + function getEvtType(evt) { + console.group(); - currEvent <span class="operator token">=</span> evt<span class="punctuation token">.</span>type<span class="punctuation token">;</span> - console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>currEvent<span class="punctuation token">)</span><span class="punctuation token">;</span> + currEvent = evt.type; + console.log(currEvent); - document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"Etype"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> currEvent<span class="punctuation token">;</span> + document.getElementById("Etype").innerHTML = currEvent; - console<span class="punctuation token">.</span><span class="function token">groupEnd</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> + console.groupEnd(); + } - <span class="comment token">//Évènements du clavier</span> - document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"keypress"</span><span class="punctuation token">,</span> getEvtType<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">//[second] </span> + //Évènements du clavier + document.addEventListener("keypress", getEvtType, false); //[second] - document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"keydown"</span><span class="punctuation token">,</span> getEvtType<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">//premier</span> - document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"keyup"</span><span class="punctuation token">,</span> getEvtType<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">//troisième</span> + document.addEventListener("keydown", getEvtType, false); //premier + document.addEventListener("keyup", getEvtType, false); //troisième - <span class="comment token">//Évènements de la souris</span> - document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> getEvtType<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// troisième</span> + //Évènements de la souris + document.addEventListener("click", getEvtType, false); // troisième - document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"mousedown"</span><span class="punctuation token">,</span> getEvtType<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">//premier</span> - document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"mouseup"</span><span class="punctuation token">,</span> getEvtType<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">//second</span> + document.addEventListener("mousedown", getEvtType, false); //premier + document.addEventListener("mouseup", getEvtType, false); //second - </span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> + </script> +</head> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> +<body> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Press any key or click the mouse to get the event type.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Event type: <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>span</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Etype<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">color</span><span class="punctuation token">:</span>red</span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span>-<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>span</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> +<p>Press any key or click the mouse to get the event type.</p> +<p>Event type: <span id="Etype" style="color:red">-</span></p> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> +</body> +</html></pre> -<h3 id="Specifications" name="Specifications">Résultat</h3> +<h3 id="Specifications">Résultat</h3> <p>{{EmbedLiveSample('Example')}}</p> -<h2 id="Specifications" name="Specifications">Spécifications</h2> +<h2 id="Specifications">Spécifications</h2> <table class="standard-table"> <thead> |