diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/fr/web/api/event | |
parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip |
initial commit
Diffstat (limited to 'files/fr/web/api/event')
22 files changed, 1996 insertions, 0 deletions
diff --git a/files/fr/web/api/event/bubbles/index.html b/files/fr/web/api/event/bubbles/index.html new file mode 100644 index 0000000000..0c59b8b0f6 --- /dev/null +++ b/files/fr/web/api/event/bubbles/index.html @@ -0,0 +1,83 @@ +--- +title: Event.bubbles +slug: Web/API/Event/bubbles +tags: + - API + - DOM + - Propagation + - Propriétés + - évènements +translation_of: Web/API/Event/bubbles +--- +<p>{{ ApiRef("DOM") }}</p> + +<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> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre>event.bubbles</pre> + +<h3 id="Valeur">Valeur</h3> + +<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> + +<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> + +<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> +</div> + +<h2 id="Specifications" name="Specifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-event-bubbles', 'Event.bubbles')}}</td> + <td>{{ Spec2('DOM WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM4', '#dom-event-bubbles', 'Event.bubbles')}}</td> + <td>{{ Spec2('DOM4') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM2 Events', '#Events-Event-canBubble', 'Event.bubbles')}}</td> + <td>{{ Spec2('DOM2 Events') }}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Event.bubbles")}}</p> + +<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> +</ul> diff --git a/files/fr/web/api/event/cancelable/index.html b/files/fr/web/api/event/cancelable/index.html new file mode 100644 index 0000000000..0d17c1107e --- /dev/null +++ b/files/fr/web/api/event/cancelable/index.html @@ -0,0 +1,90 @@ +--- +title: Event.cancelable +slug: Web/API/Event/cancelable +tags: + - API + - Annulable + - DOM + - Propriétés + - évènements +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> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox"><var>bool</var> = <em>event</em>.cancelable +</pre> + +<ul> + <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> + +<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> + +<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> + +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> + +<p> </p> + +<h2 id="Notes" name="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> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-event-cancelable', 'Event.cancelable')}}</td> + <td>{{ Spec2('DOM WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM4', '#dom-event-cancelable', 'Event.cancelable')}}</td> + <td>{{ Spec2('DOM4') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM2 Events', '#Events-Event-canCancel', 'Event.cancelable')}}</td> + <td>{{ Spec2('DOM2 Events') }}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Event.cancelable")}}</p> diff --git a/files/fr/web/api/event/cancelbubble/index.html b/files/fr/web/api/event/cancelbubble/index.html new file mode 100644 index 0000000000..fad1a2ca95 --- /dev/null +++ b/files/fr/web/api/event/cancelbubble/index.html @@ -0,0 +1,53 @@ +--- +title: Event.cancelBubble +slug: Web/API/Event/cancelBubble +tags: + - API + - Annulation + - DOM + - Evènement + - Propagation + - Propriétés +translation_of: Web/API/Event/cancelBubble +--- +<p>{{APIRef("DOM Events")}}</p> + +<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> + +<pre class="syntaxbox">event.cancelBubble = <em>bool;</em> +<em>var bool</em> = event.cancelBubble; +</pre> + +<h2 id="Exemple">Exemple</h2> + +<pre>elem.onclick = function(e) { + // fais des choses sympas ici + e.cancelBubble = true; +}</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-event-cancelbubble', 'cancelBubble')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs"><a id="Compatibilité des navigateurs" name="Compatibilité des navigateurs"></a>Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Event.cancelBubble")}}</p> + +<div id="compat-desktop"> </div> diff --git a/files/fr/web/api/event/comparaison_des_cibles_d_évènements/index.html b/files/fr/web/api/event/comparaison_des_cibles_d_évènements/index.html new file mode 100644 index 0000000000..f938d0cff5 --- /dev/null +++ b/files/fr/web/api/event/comparaison_des_cibles_d_évènements/index.html @@ -0,0 +1,168 @@ +--- +title: Comparaison des cibles d'évènements +slug: Web/API/Event/Comparaison_des_cibles_d_évènements +tags: + - Cibles + - DOM + - évènements +translation_of: Web/API/Event/Comparison_of_Event_Targets +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Event_targets" name="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> + +<p>Il y a 5 cibles à considérer :</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Propriété</th> + <th>Définie dans</th> + <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> + <p>L'élément DOM sur le côté gauche de l'appel qui a déclenché cet événement, par exemple :</p> + + <pre class="eval"> +<em>element</em>.dispatchEvent(<em>event</em>) +</pre> + </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> + </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>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>{{ 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>{{ 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> + </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> + +<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> + +<pre><!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <title>Comparison of Event Targets</title> + <style> + table { + border-collapse: collapse; + height: 150px; + width: 100%; + } + td { + border: 1px solid #ccc; + font-weight: bold; + padding: 5px; + min-height: 30px; + } + .standard { + background-color: #99ff99; + } + .non-standard { + background-color: #902D37; + } + </style> +</head> +<body> + <table> + <thead> + <tr> + <td class="standard">Original target dispatching the event <small>event.target</small></td> + <td class="standard">Target who's event listener is being processed <small>event.currentTarget</small></td> + <td class="standard">Identify other element (if any) involved in the event <small>event.relatedTarget</small></td> + <td class="non-standard">If there was a retargetting of the event for some reason <small> event.explicitOriginalTarget</small> contains the target before retargetting (never contains anonymous targets)</td> + <td class="non-standard">If there was a retargetting of the event for some reason <small> event.originalTarget</small> contains the target before retargetting (may contain anonymous targets)</td> + </tr> + </thead> + <tr> + <td id="target"></td> + <td id="currentTarget"></td> + <td id="relatedTarget"></td> + <td id="explicitOriginalTarget"></td> + <td id="originalTarget"></td> + </tr> +</table> +<p>Clicking on the text will show the difference between explicitOriginalTarget, originalTarget and target</p> +<script> + function handleClicks(e) { + document.getElementById('target').innerHTML = e.target; + document.getElementById('currentTarget').innerHTML = e.currentTarget; + document.getElementById('relatedTarget').innerHTML = e.relatedTarget; + document.getElementById('explicitOriginalTarget').innerHTML = e.explicitOriginalTarget; + document.getElementById('originalTarget').innerHTML = e.originalTarget; + } + + function handleMouseover(e) { + document.getElementById('target').innerHTML = e.target; + document.getElementById('relatedTarget').innerHTML = e.relatedTarget; + } + + document.addEventListener('click', handleClicks, false); + document.addEventListener('mouseover', handleMouseover, false); +</script> +</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> + +<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> + +<table class="standard-table"> + <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> + </tr> + <tr> + <td><code>mouseover</code></td> + <td>La EventTarget (<em>cible d'évènement</em>) entré par le périphérique de pointage.</td> + <td>La EventTarget (<em>cible d'évènement</em>) dont le périphérique de pointage est sorti.</td> + </tr> + <tr> + <td><code>mouseout</code></td> + <td>La EventTarget (<em>cible d'évènement</em>) dont le périphérique de pointage est sorti.</td> + <td>the EventTarget (<em>cible d'évènement</em>) entré par le périphérique de pointage.</td> + </tr> + </tbody> +</table> + +<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> + +<pre class="eval"><hbox id="outer"> + <hbox id="inner" + onmouseover="dump('mouseover ' + event.relatedTarget.id + ' > ' + event.target.id + '\n');" + onmouseout="dump('mouseout ' + event.target.id + ' > ' + event.relatedTarget.id + '\n');" + style="margin: 100px; border: 10px solid black; width: 100px; height: 100px;" /> +</hbox> +</pre> + +<p> </p> diff --git a/files/fr/web/api/event/createevent/index.html b/files/fr/web/api/event/createevent/index.html new file mode 100644 index 0000000000..21d1c7adca --- /dev/null +++ b/files/fr/web/api/event/createevent/index.html @@ -0,0 +1,40 @@ +--- +title: Event.createEvent() +slug: Web/API/Event/createEvent +tags: + - API + - DOM + - Evènement + - Méthodes +translation_of: Web/API/Document/createEvent +--- +<p>{{APIRef("DOM")}}</p> + +<p>Crée un nouvel évènement, qui doit alors être initialisé en appelant sa méthode <code>initEvent()</code> .</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre><code>document.createEvent(type) </code></pre> + +<dl> + <dt><code>type</code></dt> + <dd>Une chaîne de caractère indiquant le type de l'évènement à créer.</dd> +</dl> + +<p>Cette méthode renvoie un nouvel objet DOM {{ domxref("Event") }} du type spécifié, qui doit être initialisé avant utilisation.</p> + +<h2 id="Exemple">Exemple</h2> + +<pre>var newEvent = document.createEvent("UIEvents");</pre> + +<h2 id="Spécification">Spécification</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-document" title="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-document">DOM Level 2 Events</a></li> +</ul> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Event.createEvent")}}</p> diff --git a/files/fr/web/api/event/currenttarget/index.html b/files/fr/web/api/event/currenttarget/index.html new file mode 100644 index 0000000000..e62854942c --- /dev/null +++ b/files/fr/web/api/event/currenttarget/index.html @@ -0,0 +1,94 @@ +--- +title: Event.currentTarget +slug: Web/API/Event/currentTarget +tags: + - API + - Cible + - DOM + - Evènement + - Propriété +translation_of: Web/API/Event/currentTarget +--- +<div>{{APIRef("DOM")}}</div> + +<p>La propriété <code><strong>currentTarget</strong></code>, accessible en lecture seule et rattachée à l'interface {{domxref("Event")}}, identifie la cible courante pour l'évènement lorsque celui-ci traverse le DOM. Elle fait toujours référence à l'élément sur lequel le gestionnaire d'évènement a été attaché tandis que {{domxref("Event.target")}} identifie l'élément à partir duquel l'évènement s'est produit (<code>event.target</code> peut donc être un descendant de <code>event.currentTarget</code>).</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox notranslate">var <em>currentEventTarget</em> = <em>event</em>.currentTarget;</pre> + +<h3 id="Valeur">Valeur</h3> + +<p>{{domxref("EventTarget")}}</p> + +<h2 id="Exemples">Exemples</h2> + +<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 +// et l'affiche dans la console. +function hide(e){ + e.currentTarget.style.visibility = 'hidden'; + console.log(e.currentTarget); + // Lorsque cette fonction est utilisée en gestionnaire d'évènement + // on aura this === e.currentTarget +} + +var ps = document.getElementsByTagName('p'); + +for(var i = 0; i < ps.length; i++){ + // On affiche l'élément <p> qui a été cliqué dans la console + ps[i].addEventListener('click', hide, false); +} +// On affiche l'élément <body> dans la console +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> +</div> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Spécification</th> + <th>État</th> + <th>Commentaires</th> + </tr> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-event-currenttarget", "Event.currentTarget")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-event-currenttarget", "Event.currentTarget")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("DOM3 Events", "#dfn-current-event-target", "current event target")}}</td> + <td>{{Spec2("DOM3 Events")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("DOM2 Events", "#Events-Event-currentTarget", "Event.currentTarget")}}</td> + <td>{{Spec2("DOM2 Events")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("api.Event.currentTarget")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/API/Event/Comparaison_des_cibles_d_évènements">Comparaison des différentes cibles pour les évènements</a></li> +</ul> diff --git a/files/fr/web/api/event/defaultprevented/index.html b/files/fr/web/api/event/defaultprevented/index.html new file mode 100644 index 0000000000..395c353226 --- /dev/null +++ b/files/fr/web/api/event/defaultprevented/index.html @@ -0,0 +1,56 @@ +--- +title: event.defaultPrevented +slug: Web/API/Event/defaultPrevented +tags: + - API + - DOM + - Evènement + - Propriété +translation_of: Web/API/Event/defaultPrevented +--- +<p>{{APIRef("DOM")}}</p> + +<h2 id="Résumé">Résumé</h2> + +<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> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="eval">bool = event.defaultPrevented </pre> + +<h2 id="Exemple">Exemple</h2> + +<pre> if (e.defaultPrevented) { + /* Le comportement par défaut a été inhibé */ + } +</pre> + +<h2 id="Spécification">Spécification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-event-defaultprevented', 'Event.defaultPrevented()')}}</td> + <td>{{ Spec2('DOM WHATWG') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Event.defaultPrevented")}}</p> + +<ul> +</ul> diff --git a/files/fr/web/api/event/event/index.html b/files/fr/web/api/event/event/index.html new file mode 100644 index 0000000000..aeb96638d8 --- /dev/null +++ b/files/fr/web/api/event/event/index.html @@ -0,0 +1,77 @@ +--- +title: Event() +slug: Web/API/Event/Event +tags: + - API + - Constructeur + - DOM + - évènements +translation_of: Web/API/Event/Event +--- +<p>{{APIRef("DOM")}}</p> + +<p>Le constructeur <code><strong>Event()</strong></code> crée un nouvel {{domxref("Event")}} (<em>évènement</em>).</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"> <em>event</em> = new Event(<em>typeArg</em>, <em>eventInit</em>);</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<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 : + + <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 style="display: none;"> </span></li> + </ul> + </dd> +</dl> + +<h2 id="Exemple">Exemple</h2> + +<pre class="brush: js">// crée un évènement "look" qui est diffusé et ne peut être annulé +var evt = new Event("look", {"bubbles":true, "cancelable":false}); +document.dispatchEvent(evt); + +// l'événement peut être envoyé à partir de n'importe quel élément, pas seulement le document +myDiv.dispatchEvent(evt); +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table" style="height: 49px; width: 1000px;"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG','#interface-event','Event()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Event.Event")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("Event")}}</li> +</ul> diff --git a/files/fr/web/api/event/eventphase/index.html b/files/fr/web/api/event/eventphase/index.html new file mode 100644 index 0000000000..439f769f0a --- /dev/null +++ b/files/fr/web/api/event/eventphase/index.html @@ -0,0 +1,196 @@ +--- +title: Event.eventPhase +slug: Web/API/Event/eventPhase +tags: + - API + - DOM + - Evènement + - Flux + - Phase + - Propriétés +translation_of: Web/API/Event/eventPhase +--- +<p>{{ApiRef("DOM")}}</p> + +<p>Indique quelle phase du flux d'événements est actuellement évaluée.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: js"><em>var phase</em> = event.eventPhase; +</pre> + +<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> + +<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> + +<p>Ces valeurs décrivent quelle est la phase du flux d'événements actuellement évalué.</p> + +<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> +</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> + +<h2 id="Example" name="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 { + margin: 20px; + padding: 4px; + border: thin black solid; +} + +#divInfo { + margin: 18px; + padding: 8px; + background-color:white; + font-size:80%; +}</pre> + +<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> + +<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> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Event.eventPhase")}}</p> diff --git a/files/fr/web/api/event/explicitoriginaltarget/index.html b/files/fr/web/api/event/explicitoriginaltarget/index.html new file mode 100644 index 0000000000..9844a934bf --- /dev/null +++ b/files/fr/web/api/event/explicitoriginaltarget/index.html @@ -0,0 +1,49 @@ +--- +title: Event.explicitOriginalTarget +slug: Web/API/Event/explicitOriginalTarget +tags: + - API + - DOM + - Gecko + - Non-standard + - Propriété + - Reference +translation_of: Web/API/Event/explicitOriginalTarget +--- +<div>{{ApiRef("DOM")}}{{Non-standard_header}}</div> + +<p>Cette propriété représente la cible originale de l'évènement. Elle est spécifique à Mozilla.</p> + +<p>Si l'évènement a été déporté pour une autre raison qu'une traverséee de frontière anonyme, cette propriété correspondra à la cible avant la déportation de l'évènement. Par exemples, les évènements de la souris sont déportés vers leur nœud parent lorsqu'ils se produisent sur des nœuds texte (cf. {{Bug(185889)}}). Dans ce cas <code><a href="/fr/docs/Web/API/Event/currentTarget">currentTarget</a></code> pointera vers le parent et <code>explicitOriginalTarget</code> vers le nœud texte.</p> + +<p>À la différence de <code><a href="/fr/docs/Web/API/Event/originalTarget">originalTarget</a></code>, <code>explicitOriginalTarget</code> ne contiendra jamais de contenu anonyme.</p> + +<p>Voir aussi une <a href="/fr/docs/DOM/event/Comparison_of_Event_Targets">comparaison des cibles pour les évènements</a>.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Cette propriété peut être utiliséee avec <code><command></code> afin d'obtenir les détails de l'évènement de l'objet qui a invoqué la commande.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><command id="my-cmd-anAction" + oncommand="myCommand(event);"/> +<menulist> + <menupopup> + <menuitem label="Get my element name!" + command="my-cmd-anAction"/> + </menupopup> +</menulist></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">function myCommand(ev) { + console.log(ev.explicitOriginalTarget.nodeName); + // affichera 'menuitem' +}</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<p>Cette propriété est spécifique à Mozilla. Elle est définie dans l'IDL {{Source("/dom/public/idl/events/nsIDOMNSEvent.idl")}}</p> + +<p>Cette propriété <strong>n'est pas définie</strong> dans la spécification <a href="https://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM Level 2 Events</a></p> diff --git a/files/fr/web/api/event/index.html b/files/fr/web/api/event/index.html new file mode 100644 index 0000000000..bf5ecf5351 --- /dev/null +++ b/files/fr/web/api/event/index.html @@ -0,0 +1,183 @@ +--- +title: Event +slug: Web/API/Event +tags: + - API + - DOM + - Evènement + - Interface + - Reference + - interface utilisateur +translation_of: Web/API/Event +--- +<p>{{APIRef("DOM")}}</p> + +<p>L'interface <code><strong>Event</strong></code> <span id="result_box" lang="fr"><span>représente tout événement qui a lieu dans le DOM ;</span> <span>certains sont générés par l'utilisateur (tels que des événements de souris ou de clavier), tandis que d'autres sont générés par des API (par exemple, des événements indiquant qu'une animation est terminée, qu'une vidéo a été suspendue, etc.).</span> <span>Il existe plusieurs types d'événements, dont certains utilisent d'autres interfaces basées sur l'interface principale <code>Event</code>.</span> <code>Event</code><span> elle-même contient les propriétés et méthodes communes à tous les événements.</span></span></p> + +<h2 id="Interfaces_basées_sur_Event"><span lang="fr"><span>Interfaces basées sur <code>Event</code></span></span></h2> + +<p> <span id="result_box" lang="fr"><span>Voici une liste d'interfaces basées sur l'interface principale </span></span> <code>Event</code> <span lang="fr"><span>, avec des liens vers leur documentation respective dans la référence de l'API MDN.</span> <span>Notez que toutes les interfaces d'événements ont des noms qui se terminent par "Event".</span></span></p> + +<div class="index"> +<ul> + <li>{{domxref("AnimationEvent")}}</li> + <li>{{domxref("AudioProcessingEvent")}}</li> + <li>{{domxref("BeforeInputEvent")}}</li> + <li>{{domxref("BeforeUnloadEvent")}}</li> + <li>{{domxref("BlobEvent")}}</li> + <li>{{domxref("ClipboardEvent")}}</li> + <li>{{domxref("CloseEvent")}}</li> + <li>{{domxref("CompositionEvent")}}</li> + <li>{{domxref("CSSFontFaceLoadEvent")}}</li> + <li>{{domxref("CustomEvent")}}</li> + <li>{{domxref("DeviceLightEvent")}}</li> + <li>{{domxref("DeviceMotionEvent")}}</li> + <li>{{domxref("DeviceOrientationEvent")}}</li> + <li>{{domxref("DeviceProximityEvent")}}</li> + <li>{{domxref("DOMTransactionEvent")}}</li> + <li>{{domxref("DragEvent")}}</li> + <li>{{domxref("EditingBeforeInputEvent")}}</li> + <li>{{domxref("ErrorEvent")}}</li> + <li>{{domxref("FetchEvent")}}</li> + <li>{{domxref("FocusEvent")}}</li> + <li>{{domxref("GamepadEvent")}}</li> + <li>{{domxref("HashChangeEvent")}}</li> + <li>{{domxref("IDBVersionChangeEvent")}}</li> + <li>{{domxref("InputEvent")}}</li> + <li>{{domxref("KeyboardEvent")}}</li> + <li>{{domxref("MediaStreamEvent")}}</li> + <li>{{domxref("MessageEvent")}}</li> + <li>{{domxref("MouseEvent")}}</li> + <li>{{domxref("MutationEvent")}}</li> + <li>{{domxref("OfflineAudioCompletionEvent")}}</li> + <li>{{domxref("PageTransitionEvent")}}</li> + <li>{{domxref("PointerEvent")}}</li> + <li>{{domxref("PopStateEvent")}}</li> + <li>{{domxref("ProgressEvent")}}</li> + <li>{{domxref("RelatedEvent")}}</li> + <li>{{domxref("RTCDataChannelEvent")}}</li> + <li>{{domxref("RTCIdentityErrorEvent")}}</li> + <li>{{domxref("RTCIdentityEvent")}}</li> + <li>{{domxref("RTCPeerConnectionIceEvent")}}</li> + <li>{{domxref("SensorEvent")}}</li> + <li>{{domxref("StorageEvent")}}</li> + <li>{{domxref("SVGEvent")}}</li> + <li>{{domxref("SVGZoomEvent")}}</li> + <li>{{domxref("TimeEvent")}}</li> + <li>{{domxref("TouchEvent")}}</li> + <li>{{domxref("TrackEvent")}}</li> + <li>{{domxref("TransitionEvent")}}</li> + <li>{{domxref("UIEvent")}}</li> + <li>{{domxref("UserProximityEvent")}}</li> + <li>{{domxref("WebGLContextEvent")}}</li> + <li>{{domxref("WheelEvent")}}</li> +</ul> +</div> + +<h2 id="L.27interface_DOM_Event" name="L.27interface_DOM_Event">Constructeur</h2> + +<p><span class="comment">L'interface DOM <code>event</code> est exposée dans les objets <code>event</code> qui sont passés aux gestionnaires d'évènements sur divers éléments du DOM.</span></p> + +<dl> + <dt>{{domxref("Event.Event", "Event()")}}</dt> + <dd>Crée un objet Event le retournant à l'appelant.</dd> +</dl> + +<h2 id="Propri.C3.A9t.C3.A9s" name="Propri.C3.A9t.C3.A9s">Propriétés</h2> + +<dl> + <dt>{{domxref("Event.bubbles")}} {{readonlyinline}}</dt> + <dd>un booléen indiquant si l'évènement se propage vers le haut dans le DOM ou non.</dd> + <dt>{{domxref("Event.cancelBubble")}}</dt> + <dd>u<span id="result_box" lang="fr"><span>n alias historique de {{domxref ("Event.stopPropagation ()")}}.</span> <span>Définir sa valeur sur <code>true,</code> avant qu'elle revienne d'un gestionnaire d'événements, empêche la propagation de l'événement.</span></span></dd> + <dt>{{domxref("Event.cancelable")}} {{readonlyinline}}</dt> + <dd>Un booléen indiquant si l'évènement est annulable.</dd> + <dt>{{domxref("Event.composed")}} {{ReadOnlyInline}}</dt> + <dd><span id="result_box" lang="fr"><span>Un booléen indiquant si l'événement peut ou non traverser la frontière entre le DOM shadow et le DOM normal.</span></span></dd> + <dt>{{domxref("Event.currentTarget")}} {{readonlyinline}}</dt> + <dd><span id="result_box" lang="fr"><span>Une référence à la cible actuellement enregistrée pour l'événement.</span> <span>C'est l'objet auquel l'événement doit actuellement être envoyé ;</span> <span>il est possible que cela ait été modifié au cours du reciblage.</span></span></dd> + <dt>{{domxref("Event.deepPath")}} {{non-standard_inline}}</dt> + <dd>Un {{jsxref("Array")}} (<em>tableau</em>) de {{domxref("Node")}} DOM à travers lesquels l'event a été propagé.</dd> + <dt>{{domxref("Event.defaultPrevented")}} {{readonlyinline}}</dt> + <dd>indique si {{domxref("event.preventDefault()")}} a été appelé ou non dans l'événement.</dd> + <dt>{{domxref("Event.eventPhase")}} {{readonlyinline}}</dt> + <dd>indique dans quelle phase de l'évènement on se trouve actuellement.</dd> + <dt>{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt> + <dd>La cible explicite originale de l'évènement (spécifique à Mozilla).</dd> + <dt>{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt> + <dd>La cible originale de l'évènement, avant toute modification de celle-ci (spécifique à Mozilla).</dd> + <dt>{{domxref("Event.returnValue")}} {{non-standard_inline}}</dt> + <dd>une alternative non standard (de versions anciennes de MS IE) de {{domxref("Event.preventDefault()")}} et {{domxref("Event.defaultPrevented")}}.</dd> + <dt>{{domxref("Event.srcElement")}} {{non-standard_inline}}</dt> + <dd>Un alias non standard (d'anciennes versions de MS IE) pour {{domxref("Event.target")}}.</dd> + <dt>{{domxref("Event.target")}} {{readonlyinline}}</dt> + <dd>une référence à la cible vers laquelle l'évènement était originellement destiné.</dd> + <dt>{{domxref("Event.timeStamp")}} {{readonlyinline}}</dt> + <dd>Le moment de création de l'évènement, en millisecondes. <span id="result_box" lang="fr"><span>Par spécification, cette valeur est le temps écoulé depuis le moment, mais en réalité les définitions des navigateurs varient ;</span> <span>en outre, le travail est en cours pour le changer en </span></span> {{domxref("DOMHighResTimeStamp")}}.</dd> + <dt>{{domxref("Event.type")}} {{readonlyinline}}</dt> + <dd>Le nom de l'évènement (insensible à la casse).</dd> + <dt>{{domxref("Event.isTrusted")}} {{readonlyinline}}</dt> + <dd>indique si l'évènement est initié par le navigateur ou non (après un click d'utilisateur ou par un script utilisant une méthode de création d'évènement comme <a href="https://developer.mozilla.org/fr/docs/Web/API/Event/initEvent">event.initEvent</a>)</dd> +</dl> + +<h3 id="Propriétés_obsolètes">Propriétés obsolètes</h3> + +<dl> + <dt>{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}</dt> + <dd>un {{jsxref("Boolean")}} indiquant si l'événement donné peut être propagé à travers la racine shadow dans le DOM standard. Cette propriété a été renommée {{domxref("Event.composed", "composed")}}.</dd> +</dl> + +<h2 id="M.C3.A9thodes" name="M.C3.A9thodes">Méthodes</h2> + +<dl> + <dt>{{domxref("Event.createEvent()")}} </dt> + <dd>Crée un nouvel <code>Event</code> (<em>évènement</em>) qui doit alors être initialisé par l'appel à la méthode <code>initEvent()</code>.</dd> + <dt>{{domxref("Event.composedPath()")}}</dt> + <dd>Renvoie le chemin de l'événement (objets sur lesquels les écouteurs seront appelés). Cela n'inclut pas les noeuds dans les arbres shadow si la racine shadow a été créée avec son {{domxref("ShadowRoot.mode")}} fermé.</dd> + <dt>{{domxref("Event.initEvent()")}} {{deprecated_inline}}</dt> + <dd>initialise la valeur d'un évènement créé. Si l'évènement a déjà été propagé, la méthode ne produit rien.</dd> + <dt>{{domxref("Event.preventDefault()")}}</dt> + <dd>Annule l'évènement (s'il est annulable).</dd> + <dt>{{domxref("Event.stopImmediatePropagation()")}}</dt> + <dd>Pour cet évènement particulier, aucun autre écouteur ne peut être appelé. <span id="result_box" lang="fr"><span>Ni ceux attachés au même élément, ni ceux attachés aux éléments qui seront traversés plus tard (en phase de capture, par exemple)</span></span></dd> + <dt>{{domxref("Event.stopPropagation()")}}</dt> + <dd>Arrête la propagation ultérieure d'évènements dans le DOM.</dd> +</dl> + +<h3 id="Méthodes_obsolètes">Méthodes obsolètes</h3> + +<dl> + <dt>{{domxref("Event.preventBubble()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt> + <dd>Empêche l'évènement de se propager. Obsolète, utilisez la méthode {{domxref("event.stopPropagation")}} à la place.</dd> + <dt>{{domxref("Event.preventCapture()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt> + <dd>Obsolète, utilisez la méthode {{domxref("event.stopPropagation")}} à la place.</dd> +</dl> + +<dl> + <dt>{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}</dt> + <dd>Non standard. Retourne la valeur de {{domxref("Event.defaultPrevented")}}. Utilisez à la place {{domxref("Event.defaultPrevented")}} .</dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<p>Spécification Statut Commentaire {{SpecName('DOM WHATWG', '#interface-event', 'Event')}} {{Spec2('DOM WHATWG')}} </p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Event")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Types d'évènements disponibles : <a href="https://developer.mozilla.org/fr/docs/Web/Events">Référence Event</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Event/Comparison_of_Event_Targets">Comparaison des cibles d'Event</a> (<span id="result_box" lang="fr"><span>target vs currentTarget vs relatedTarget vs originalTarget</span></span> )</li> + <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Création et déclenchement d'évènements personnalisés</a></li> + <li><span class="short_text" id="result_box" lang="fr"><span>Pour les développeurs de Firefox :</span></span> + <ul> + <li><a href="https://developer.mozilla.org/fr/docs/Listening_to_events_in_Firefox_extensions">Écouter des évènements dans les extensions Firefox</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Listening_to_events_on_all_tabs">Écouter des événements sur tous les onglets</a></li> + </ul> + </li> +</ul> diff --git a/files/fr/web/api/event/initevent/index.html b/files/fr/web/api/event/initevent/index.html new file mode 100644 index 0000000000..ae5a5fabce --- /dev/null +++ b/files/fr/web/api/event/initevent/index.html @@ -0,0 +1,93 @@ +--- +title: event.initEvent +slug: Web/API/Event/initEvent +tags: + - API + - DOM + - Evènement + - Méthode + - Reference +translation_of: Web/API/Event/initEvent +--- +<p>{{ApiRef("DOM")}}{{deprecated_header}}</p> + +<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> + +<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>À 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> +</div> + +<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> + +<pre class="eval"><em>event</em>.initEvent(<em>type</em>, <em>bubbles</em>, <em>cancelable</em>) +</pre> + +<dl> + <dt><code>type</code></dt> + <dd>est une {{domxref("DOMString")}} qui définit le type d'évènement.</dd> + <dt><code>bubbles</code></dt> + <dd>est un {{jsxref("Boolean")}} indiquant si l'évènement doit se propager vers le haut dans la chaîne des évènements ou non. Une fois déterminé, la propriété en lecture seule {{domxref("Event.bubbles")}} donnera sa valeur.</dd> + <dt><code>cancelable</code></dt> + <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> + +<pre><code>// Crée un évènement. +var event = document.createEvent('Event'); +</code> +// Crée un évènement click qui doit se propager vers le haut +// et ne peut être annulé<code> +event.initEvent('click', true, false); + +// Écoute les évènements. +elem.addEventListener('click', function (e) { + // e.target matches elem +}, false); + +elem.dispatchEvent(event);</code> +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <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> + </tr> + <tr> + <td>{{SpecName('DOM2 Events','##Events-Event-initEvent','Event.initEvent()')}}</td> + <td>{{Spec2('DOM2 Events')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> + + +<p>{{Compat("api.Event.initEvent")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Le constructeur à utiliser à la place de cette méthode dépréciée : {{domxref("Event.Event","Event()")}}. <span id="result_box" lang="fr"><span>Des constructeurs plus spécifiques peuvent aussi être utilisés</span></span> .</li> +</ul> + +<p> </p> diff --git a/files/fr/web/api/event/istrusted/index.html b/files/fr/web/api/event/istrusted/index.html new file mode 100644 index 0000000000..59ffc29342 --- /dev/null +++ b/files/fr/web/api/event/istrusted/index.html @@ -0,0 +1,117 @@ +--- +title: Event.isTrusted +slug: Web/API/Event/isTrusted +tags: + - API + - Event + - Property + - Read-only + - Référence(2) +translation_of: Web/API/Event/isTrusted +--- +<p>{{APIRef("DOM")}}</p> + +<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> + +<pre class="syntaxbox">var bool = event.isTrusted; +</pre> + +<h2 id="Exemple">Exemple</h2> + +<pre> if (e.isTrusted) { + /* The event is trusted. */ + } else { + /* The event is not trusted. */ + } +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-event-istrusted', 'Event.isTrusted')}}</td> + <td>{{ Spec2('DOM WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM3 Events', '#trusted-events', 'Trusted events')}}</td> + <td>{{Spec2('DOM3 Events')}}</td> + <td> + <p>Ajoute des conditions à propos des événement trusted et untrusted. Cependant, cela ne défini pas la propriété isTrusted.</p> + </td> + </tr> + <tr> + <td>{{SpecName('DOM4', '#dom-event-istrusted', 'Event.isTrusted')}}</td> + <td>{{Spec2('DOM4')}}</td> + <td>Première définition.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(46.0)}} [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}} [2]</td> + <td>{{CompatOpera(33)}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(46.0)}} [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOperaMobile(33)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(46.0)}} [1]</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Commence avec Chrome 53, les événements untrusted n'invoquent pas l'action par défaut. </p> + +<p>[2] Avec Internet Explorer, tous les événements sont trusted, excepté ceux créés avec la méthode <code>createEvent().</code></p> diff --git a/files/fr/web/api/event/originaltarget/index.html b/files/fr/web/api/event/originaltarget/index.html new file mode 100644 index 0000000000..ad65cdc914 --- /dev/null +++ b/files/fr/web/api/event/originaltarget/index.html @@ -0,0 +1,41 @@ +--- +title: Event.originalTarget +slug: Web/API/Event/originalTarget +tags: + - API + - Cible + - DOM + - Evènement + - Propriétés + - origine +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><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> + +<h2 id="Example" name="Example">Exemple</h2> + +<p><em>Besoin d'un exemple qui ait du sens ici. ^^</em></p> + +<h2 id="Specification" name="Specification">Spécification</h2> + +<p>C'est une propriété propre à Mozilla. Définie dans {{Source("/dom/public/idl/events/nsIDOMNSEvent.idl")}}</p> + +<p>Cette propriété d'évènements <strong>n'est pas définie</strong> dans la spécification <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">W3.org DOM niveau 2 Events</a></p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Event.originalTarget")}}</p> diff --git a/files/fr/web/api/event/preventdefault/index.html b/files/fr/web/api/event/preventdefault/index.html new file mode 100644 index 0000000000..0290a49d70 --- /dev/null +++ b/files/fr/web/api/event/preventdefault/index.html @@ -0,0 +1,180 @@ +--- +title: event.preventDefault +slug: Web/API/Event/preventDefault +tags: + - API + - DOM + - Evènement + - Gecko + - Méthodes +translation_of: Web/API/Event/preventDefault +--- +<div>{{ ApiRef("DOM") }}</div> + +<div> </div> + +<p>La méthode <strong><code>preventDefault()</code></strong> de l 'interface {{domxref("Event")}} <span id="result_box" lang="fr"><span>indique à l'{{Glossary("user agent","agent utilisateur")}} que si l'événement n'est pas traité explicitement, son action par défaut ne doit pas être prise en compte comme elle le serait normalement.</span> <span>L'événement continue à se propager comme d'habitude, sauf si l'un de ses écouteurs appelle </span></span> {{domxref("Event.stopPropagation", "stopPropagation()")}} <span lang="fr"><span> ou </span></span> {{domxref("Event.stopImmediatePropagation", "stopImmediatePropagation()")}} <span lang="fr"><span>, dont l'un ou l'autre termine la propagation.</span></span></p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox"><em>Event</em>.preventDefault();</pre> + +<h3 id="Example" name="Example">Paramètres</h3> + +<p>None (<em>aucun</em>)</p> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<p><code>undefined</code>.</p> + +<h2 id="Example" name="Example">Exemples</h2> + +<h3 id="Bloquer_la_gestion_des_clics_par_défaut"><span class="short_text" id="result_box" lang="fr"><span>Bloquer la gestion des clics par défaut</span></span></h3> + +<p>L'action par défaut du clic sur une case à cocher est le changement de son état. Cet exemple montre comment annuler cette action :</p> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js line-numbers language-js"><code class="language-js">document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"#id-checkbox"</span><span class="punctuation token">)</span><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> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> + document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"output-box"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>innerHTML <span class="operator token">+</span><span class="operator token">=</span> <span class="string token">"Sorry! <code>preventDefault()</code> won't let you check this!<br>"</span><span class="punctuation token">;</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="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<h4 id="HTML">HTML</h4> + +<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>Please click on the checkbox control.<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>form</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>id-checkbox<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Checkbox:<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>checkbox<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>id-checkbox<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>form</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>output-box<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>div</span><span class="punctuation token">></span></span></code></pre> + +<h4 id="Résultat">Résultat</h4> + +<p>Vous pouvez voir <code>preventDefault</code> en action ici (anglais) :</p> + +<p>{{EmbedLiveSample("Blocking_default_click_handling")}}</p> + +<h3 id="Arrêter_les_frappes_de_touches_pour_atteindre_un_champ_d'édition"><span id="result_box" lang="fr"><span>Arrêter les frappes de touches pour atteindre un champ d'édition</span></span></h3> + +<p>L'exemple suivant montre comment bloquer la saisie de texte invalide dans un champ input avec <code>preventDefault()</code>. <span id="result_box" lang="fr"><span>Actuellement, vous devriez normalement utiliser la validation de forme HTML native à la place.</span></span></p> + +<h4 id="HTML_2"><span lang="fr"><span>HTML</span></span></h4> + +<p><span lang="fr"><span>Ici le formulaire :</span></span></p> + +<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>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>container<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>p</span><span class="punctuation token">></span></span>Please enter your name using lowercase letters only.<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>form</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>my-textbox<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>form</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> + +<h4 id="CSS">CSS</h4> + +<p><span id="result_box" lang="fr"><span>Nous utilisons un peu de CSS pour la boîte d'avertissement qui sera dessinée lorsque l'utilisateur appuie sur une touche non valide :</span></span></p> + +<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token"><span class="class token">.warning</span> </span><span class="punctuation token">{</span> + <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">2</span>px solid <span class="hexcode token">#f39389</span><span class="punctuation token">;</span> + <span class="property token">border-radius</span><span class="punctuation token">:</span> <span class="number token">2</span>px<span class="punctuation token">;</span> + <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">10</span>px<span class="punctuation token">;</span> + <span class="property token">position</span><span class="punctuation token">:</span> absolute<span class="punctuation token">;</span> + <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="hexcode token">#fbd8d4</span><span class="punctuation token">;</span> + <span class="property token">color</span><span class="punctuation token">:</span> <span class="hexcode token">#3b3c40</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<h4 id="JavaScript_2">JavaScript</h4> + +<p><span id="result_box" lang="fr"><span>Et voici le code JavaScript qui fait le travail.</span> <span>Tout d'abord, écoutez les événements {{event("keypress")}}:</span></span></p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> myTextbox <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">'my-textbox'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +myTextbox<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> checkName<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>La fonction <code>checkName()</code>, <span id="result_box" lang="fr"><span>qui regarde la touche enfoncée et décide de l'autoriser :</span></span></p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">checkName</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> charCode <span class="operator token">=</span> evt<span class="punctuation token">.</span>charCode<span class="punctuation token">;</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>charCode <span class="operator token">!=</span> <span class="number token">0</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>charCode <span class="operator token"><</span> <span class="number token">97</span> <span class="operator token">||</span> charCode <span class="operator token">></span> <span class="number token">122</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + evt<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="function token">displayWarning</span><span class="punctuation token">(</span> + <span class="string token">"Please use lowercase letters only."</span> + <span class="operator token">+</span> <span class="string token">"\n"</span> <span class="operator token">+</span> <span class="string token">"charCode: "</span> <span class="operator token">+</span> charCode <span class="operator token">+</span> <span class="string token">"\n"</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></code></pre> + +<p>La fonction <code>displayWarning()</code> <span id="result_box" lang="fr"><span>présente une notification d'un problème.</span> <span>Ce n'est pas une fonction élégante mais elle fait le travail nécessaire à cet exemple :</span></span></p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> warningTimeout<span class="punctuation token">;</span> +<span class="keyword token">var</span> warningBox<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">"div"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +warningBox<span class="punctuation token">.</span>className <span class="operator token">=</span> <span class="string token">"warning"</span><span class="punctuation token">;</span> + +<span class="keyword token">function</span> <span class="function token">displayWarning</span><span class="punctuation token">(</span>msg<span class="punctuation token">)</span> <span class="punctuation token">{</span> + warningBox<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> msg<span class="punctuation token">;</span> + + <span class="keyword token">if</span> <span class="punctuation token">(</span>warningBox<span class="punctuation token">)</span> <span class="punctuation token">{</span> + window<span class="punctuation token">.</span><span class="function token">clearTimeout</span><span class="punctuation token">(</span>warningTimeout<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> + myTextbox<span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">insertBefore</span><span class="punctuation token">(</span>warningBox<span class="punctuation token">,</span> myTextbox<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + warningTimeout <span class="operator token">=</span> window<span class="punctuation token">.</span><span class="function token">setTimeout</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + warningBox<span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>warningBox<span class="punctuation token">)</span><span class="punctuation token">;</span> + warningTimeout <span class="operator token">=</span> <span class="operator token">-</span><span class="number token">1</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="number token">2000</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<h4 id="Résultat_2">Résultat</h4> + +<p>Ici le résultat du code précédent :</p> + +<p>{{ EmbedLiveSample('Stopping_keystrokes_from_reaching_an_edit_field', 600, 200) }}</p> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p><code>Appeler preventDefault</code> pendant chaque étape de la propagation de l'évènement annule celui-ci, ce qui signifie que chaque action par défaut se produisant normalement ne se produira pas.</p> + +<div class="note"> +<p><strong>Note :</strong> Depuis {{Gecko("6.0")}}, appeler <code>preventDefault()</code> passe la valeur de la propriété {{domxref("event.defaultPrevented")}} à <code>true</code>.</p> +</div> + +<p>Vous pouvez utiliser {{domxref("Event.cancelable")}} pour vérifier que l'évènement peut être annulé. Appeler <code>preventDefault</code> sur un évènement qui ne peut pas être annulé n'a aucun effet.</p> + +<h2 id="Specification" name="Specification">Spécification</h2> + +<article class="approved text-content"> +<div class="boxed translate-rendered"> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-event-preventdefault', 'Event.preventDefault()')}}</td> + <td>{{ Spec2('DOM WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM2 Events', '#Events-Event-preventDefault', 'Event.preventDefault()')}}</td> + <td>{{ Spec2('DOM2 Events') }}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> +</div> +</article> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Event.preventDefault")}}</p> diff --git a/files/fr/web/api/event/returnvalue/index.html b/files/fr/web/api/event/returnvalue/index.html new file mode 100644 index 0000000000..98863439b0 --- /dev/null +++ b/files/fr/web/api/event/returnvalue/index.html @@ -0,0 +1,36 @@ +--- +title: Event.returnValue +slug: Web/API/Event/returnValue +tags: + - API + - DOM + - Propriétés + - action + - évènements +translation_of: Web/API/Event/returnValue +--- +<p>{{APIRef("DOM Events")}}{{Non-standard_header}}{{ Deprecated_header() }}</p> + +<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> +</div> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox">event.returnValue = <em>bool;</em> +<em>var bool</em> = event.returnValue; +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<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> + + + +<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 new file mode 100644 index 0000000000..94328eecf1 --- /dev/null +++ b/files/fr/web/api/event/srcelement/index.html @@ -0,0 +1,32 @@ +--- +title: Event.srcElement +slug: Web/API/Event/srcElement +tags: + - API + - DOM + - Evènement + - Propriétés + - Éléments SRC +translation_of: Web/API/Event/srcElement +--- +<p>{{ApiRef("DOM")}}</p> + +<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> + +<h2 id="Spécification">Spécification</h2> + +<p>Ne fait partie d'aucune spécification.</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Event.srcElement")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("Window.event")}}</li> +</ul> diff --git a/files/fr/web/api/event/stopimmediatepropagation/index.html b/files/fr/web/api/event/stopimmediatepropagation/index.html new file mode 100644 index 0000000000..e360493937 --- /dev/null +++ b/files/fr/web/api/event/stopimmediatepropagation/index.html @@ -0,0 +1,44 @@ +--- +title: Event.stopImmediatePropagation() +slug: Web/API/Event/stopImmediatePropagation +tags: + - API + - Event + - Méthode + - Reference +translation_of: Web/API/Event/stopImmediatePropagation +--- +<div>{{APIRef("DOM")}}</div> + +<p>La méthode <code><strong>stopImmediatePropagation()</strong></code>, rattachée à l'interface {{domxref("Event")}}, empêche les gestionnaires d'évènement, associés à ce même évènement, d'être appelés.</p> + +<p>Si plusieurs gestionnaires d'évènement sont attachés à un élément pour le même type d'évènement, ils sont appelés dans l'ordre dans lequel ils ont été ajoutés. Si <code>stopImmediatePropagation()</code> est appelé pendant un de ces appels, les gestionnaires restants ne sont pas invoqués.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><em>event</em>.stopImmediatePropagation();</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-event-stopimmediatepropagation', 'Event.stopImmediatePropagation()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("api.Event.stopImmediatePropagation")}}</p> diff --git a/files/fr/web/api/event/stoppropagation/index.html b/files/fr/web/api/event/stoppropagation/index.html new file mode 100644 index 0000000000..5956fc1e5b --- /dev/null +++ b/files/fr/web/api/event/stoppropagation/index.html @@ -0,0 +1,65 @@ +--- +title: Event.stopPropagation() +slug: Web/API/Event/stopPropagation +tags: + - API + - DOM + - Evènement + - Méthode + - Reference +translation_of: Web/API/Event/stopPropagation +--- +<p id="Summary">{{APIRef("DOM")}}</p> + +<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> + +<pre class="syntaxbox"><em>event</em>.stopPropagation();</pre> + +<h2 id="Example" name="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> + +<h2 id="Notes" name="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><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> + +<h2 id="Specification" name="Specification">Spécification</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-stoppropagation", "Event.stopPropagation()")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-event-stoppropagation", "Event.stopPropagation()")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 Events", "#Events-Event-stopPropagation", "Event.stopPropagation()")}}</td> + <td>{{Spec2("DOM2 Events")}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<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> diff --git a/files/fr/web/api/event/target/index.html b/files/fr/web/api/event/target/index.html new file mode 100644 index 0000000000..b624041ab6 --- /dev/null +++ b/files/fr/web/api/event/target/index.html @@ -0,0 +1,89 @@ +--- +title: Event.target +slug: Web/API/Event/target +tags: + - API + - Cible + - DOM + - Evènement + - Propriétés +translation_of: Web/API/Event/target +--- +<p>{{ ApiRef("DOM") }}</p> + +<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> + +<pre><code><code>laCible = event.target</code></code></pre> + +<h2 id="Example" name="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> + +<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> + +<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> + +<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> + +<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-target", "Event.target")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-event-target", "Event.target")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}}</td> + <td>{{Spec2("DOM2 Events")}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Event.target")}}</p> + +<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> + +<pre class="brush: js" style="font-size: 14px;">function hide(e) { + // Support IE6-8 + var target = e.target || e.srcElement; + target.style.visibility = 'hidden'; +} +</pre> + +<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> diff --git a/files/fr/web/api/event/timestamp/index.html b/files/fr/web/api/event/timestamp/index.html new file mode 100644 index 0000000000..b3e2333120 --- /dev/null +++ b/files/fr/web/api/event/timestamp/index.html @@ -0,0 +1,108 @@ +--- +title: Event.timeStamp +slug: Web/API/Event/timeStamp +tags: + - API + - DOM + - Evènement + - Propriétés + - temps +translation_of: Web/API/Event/timeStamp +--- +<div>{{ApiRef("DOM")}}</div> + +<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> +</div> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox">event.timeStamp +</pre> + +<h3 id="Examples" name="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> + +<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> + 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> + +<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> + +<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> + +<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> + + +<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> + +<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> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-event-timestamp', 'Event.timeStamp')}}</td> + <td>{{ Spec2('DOM WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM4', '#dom-event-timestamp', 'Event.timeStamp')}}</td> + <td>{{ Spec2('DOM4') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM2 Events', '#Events-Event-timeStamp', 'Event.timeStamp')}}</td> + <td>{{ Spec2('DOM2 Events') }}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Event.timeStamp")}}</p> diff --git a/files/fr/web/api/event/type/index.html b/files/fr/web/api/event/type/index.html new file mode 100644 index 0000000000..c50dcb0fea --- /dev/null +++ b/files/fr/web/api/event/type/index.html @@ -0,0 +1,102 @@ +--- +title: Event.type +slug: Web/API/Event/type +tags: + - API + - DOM + - Evènement + - Propriétés + - Type +translation_of: Web/API/Event/type +--- +<p>{{APIRef}}</p> + +<p>La propriété en lecture seule<strong> Event.type </strong>retourne une chaîne de caractères (<em>string</em>) contenant le type de l'événement. Le type est défini lors de la construction de l'événement et est le nom d'usage pour se référer à celui-ci, tel que <code>click</code>, <code>load</code> ou <code>error</code>.</p> + +<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> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox">event.type +</pre> + +<h2 id="Example" name="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> + + <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> + + <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> + + 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> + + 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> + + 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> + + <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> + + 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> + + <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> + + 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> + + </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> + +<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>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> + +<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> + +<h3 id="Specifications" name="Specifications">Résultat</h3> + +<p>{{EmbedLiveSample('Example')}}</p> + +<h2 id="Specifications" name="Specifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-event-type', 'Event.type')}}</td> + <td>{{ Spec2('DOM WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM2 Events', '#Events-Event-type', 'Event.type')}}</td> + <td>{{ Spec2('DOM2 Events') }}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Event.type")}}</p> |