diff options
Diffstat (limited to 'files/fr/web/api/event')
21 files changed, 895 insertions, 1095 deletions
diff --git a/files/fr/web/api/event/bubbles/index.md b/files/fr/web/api/event/bubbles/index.md index 6c9a6b68fc..2c869ea435 100644 --- a/files/fr/web/api/event/bubbles/index.md +++ b/files/fr/web/api/event/bubbles/index.md @@ -9,25 +9,24 @@ tags: - évènements translation_of: Web/API/Event/bubbles --- -<p>{{ ApiRef("DOM") }}</p> +{{ ApiRef("DOM") }} -<p>Indique si l'événement donné se propage à travers le DOM ou non.</p> +Indique si l'événement donné se propage à travers le DOM ou non. -<div class="note"> -<p><strong>Note :</strong> Voir <a href="/fr/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture">Propagation et capture des évènements</a> pour plus d'informations sur la propagation.</p> -</div> +> **Note :** Voir [Propagation et capture des évènements](/fr/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture) pour plus d'informations sur la propagation. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre>event.bubbles</pre> + event.bubbles -<h3 id="Valeur">Valeur</h3> +### Valeur -<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> +Retourne un booléen dont la valeur est `true` (_vraie_) si l'événement se propage à travers le DOM. -<h2 id="Syntax">Exemple</h2> +## Exemple -<pre class="brush: js">function goInput(e) { +```js +function goInput(e) { // vérifie la propagation et if (!e.bubbles) { // la lance si elle ne l'a pas été @@ -35,49 +34,23 @@ translation_of: Web/API/Event/bubbles } // déjà propagé doOutput(e) -}</pre> +} +``` -<div class="note"> -<p><strong>Note :</strong> Certains évènements seulement peuvent se propager. Ceux dont cette propriété est définie à <code>true</code>. Vous pouvez utiliser cette propriété pour vérifier si un évènement est autorisé à se propager ou non.</p> -</div> +> **Note :** Certains évènements seulement peuvent se propager. Ceux dont cette propriété est définie à `true`. Vous pouvez utiliser cette propriété pour vérifier si un évènement est autorisé à se propager ou non. -<h2 id="Specifications">Spécifications</h2> +## Spécifications -<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> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | +| {{SpecName('DOM WHATWG', '#dom-event-bubbles', 'Event.bubbles')}} | {{ Spec2('DOM WHATWG') }} | | +| {{SpecName('DOM4', '#dom-event-bubbles', 'Event.bubbles')}} | {{ Spec2('DOM4') }} | | +| {{SpecName('DOM2 Events', '#Events-Event-canBubble', 'Event.bubbles')}} | {{ Spec2('DOM2 Events') }} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs +{{Compat("api.Event.bubbles")}} +## Voir aussi -<p>{{Compat("api.Event.bubbles")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Event/stopPropagation">stopPropagation</a> pour empêcher la propagation</li> -</ul> +- [stopPropagation](/en-US/docs/Web/API/Event/stopPropagation) pour empêcher la propagation diff --git a/files/fr/web/api/event/cancelable/index.md b/files/fr/web/api/event/cancelable/index.md index 3f3b86744b..5d073dca6b 100644 --- a/files/fr/web/api/event/cancelable/index.md +++ b/files/fr/web/api/event/cancelable/index.md @@ -9,28 +9,26 @@ tags: - évènements translation_of: Web/API/Event/cancelable --- -<div>{{ ApiRef("DOM") }}</div> +{{ ApiRef("DOM") }} -<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> +La propriété _`cancelable`_ (_annulable_) 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é `cancelable` est à `false` (_faux_) et l'écouteur d'événement ne peut pas l'arrêter. -<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> +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 `cancelable` avant d'appeler leurs méthodes `preventDefault()`. -<p>La plupart des événements natifs du navigateur qui peuvent être annulés sont ceux qui résultent de l'interaction de l'utilisateur avec la page. L'annulation des événements <a href="/fr/docs/Web/Events/click">click</a>, <a href="/fr/docs/Web/Events/scroll">scroll</a> ou <a href="/fr/docs/Web/Events/beforeunload">beforeunload</a> empêcherait l'utilisateur de cliquer sur un élément, de faire défiler la page ou de la quitter, respectivement.</p> +La plupart des événements natifs du navigateur qui peuvent être annulés sont ceux qui résultent de l'interaction de l'utilisateur avec la page. L'annulation des événements [click](/fr/docs/Web/Events/click), [scroll](/fr/docs/Web/Events/scroll) ou [beforeunload](/fr/docs/Web/Events/beforeunload) empêcherait l'utilisateur de cliquer sur un élément, de faire défiler la page ou de la quitter, respectivement. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>bool</var> = <em>event</em>.cancelable -</pre> + bool = event.cancelable -<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> +- Le résultat est un `booléen` qui est `true` (_vrai_) si l'événement peut être annulé. -<h2 id="Example">Exemple</h2> +## Exemple -<p>Par exemple, les vendeurs de navigateurs proposent que l'<a href="/fr/docs/Web/Events/wheel">évènement wheel </a>puisse être annulable seulement <a href="https://github.com/WICG/interventions/issues/33">la première fois que l'écouteur est appelé</a> (en) ; les évènements <code>wheel</code> suivants ne peuvent être annulés.</p> +Par exemple, les vendeurs de navigateurs proposent que l'[évènement wheel ](/fr/docs/Web/Events/wheel)puisse être annulable seulement [la première fois que l'écouteur est appelé](https://github.com/WICG/interventions/issues/33) (en) ; les évènements `wheel` suivants ne peuvent être annulés. -<pre class="brush:js">function preventScrollWheel(event) { +```js +function preventScrollWheel(event) { if (typeof event.cancelable !== 'boolean' || event.cancelable) { // L'événement peut être annulé, alors nous le faisons. event.preventDefault(); @@ -42,47 +40,25 @@ translation_of: Web/API/Event/cancelable } } -document.addEventListener('wheel', preventCancelableEvents);</pre> +document.addEventListener('wheel', preventCancelableEvents); +``` -<p> </p> -<h2 id="Notes">Notes</h2> -<p>Si l'événement peut être annulé, ou non, est déterminé au moment de l'initialisation de celui-ci.</p> +## Notes -<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> +Si l'événement peut être annulé, ou non, est déterminé au moment de l'initialisation de celui-ci. -<h2 id="Specifications">Spécifications</h2> +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. -<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> +## Spécifications -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName('DOM WHATWG', '#dom-event-cancelable', 'Event.cancelable')}} | {{ Spec2('DOM WHATWG') }} | | +| {{SpecName('DOM4', '#dom-event-cancelable', 'Event.cancelable')}} | {{ Spec2('DOM4') }} | | +| {{SpecName('DOM2 Events', '#Events-Event-canCancel', 'Event.cancelable')}} | {{ Spec2('DOM2 Events') }} | Définition initiale. | +## Compatibilité des navigateurs - -<p>{{Compat("api.Event.cancelable")}}</p> +{{Compat("api.Event.cancelable")}} diff --git a/files/fr/web/api/event/cancelbubble/index.md b/files/fr/web/api/event/cancelbubble/index.md index 07d891daed..c6cb47bf5d 100644 --- a/files/fr/web/api/event/cancelbubble/index.md +++ b/files/fr/web/api/event/cancelbubble/index.md @@ -10,40 +10,28 @@ tags: - Propriétés translation_of: Web/API/Event/cancelBubble --- -<p>{{APIRef("DOM Events")}}</p> +{{APIRef("DOM Events")}} -<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> +La propriété **`Event.cancelBubble`** est un alias historique de {{domxref("Event.stopPropagation()")}}. Définir sa valeur à `true` (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 (_faux_) ne fait rien. Voir {{anch("Compatibilité des navigateurs")}} pour plus de détails. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">event.cancelBubble = <em>bool;</em> -<em>var bool</em> = event.cancelBubble; -</pre> + event.cancelBubble = bool; + var bool = event.cancelBubble; -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre>elem.onclick = function(e) { - // fais des choses sympas ici - e.cancelBubble = true; -}</pre> + elem.onclick = function(e) { + // fais des choses sympas ici + e.cancelBubble = true; + } -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<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> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('DOM WHATWG', '#dom-event-cancelbubble', 'cancelBubble')}} | {{Spec2('DOM WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Event.cancelBubble")}}</p> +{{Compat("api.Event.cancelBubble")}} diff --git a/files/fr/web/api/event/comparison_of_event_targets/index.md b/files/fr/web/api/event/comparison_of_event_targets/index.md index 506a981aef..efba95d88c 100644 --- a/files/fr/web/api/event/comparison_of_event_targets/index.md +++ b/files/fr/web/api/event/comparison_of_event_targets/index.md @@ -8,69 +8,121 @@ tags: translation_of: Web/API/Event/Comparison_of_Event_Targets original_slug: Web/API/Event/Comparaison_des_cibles_d_évènements --- -<p>{{ ApiRef() }}</p> +{{ ApiRef() }} -<h3 id="Event_targets">Cibles d'évènements</h3> +### Cibles d'évènements -<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> +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>Il y a 5 cibles à considérer :</p> +Il y a 5 cibles à considérer : <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">event.target</a></td> - <td><a href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-interface">DOM Event Interface</a></td> - <td> - <p>L'élément DOM sur le côté gauche de l'appel qui a déclenché cet événement, par exemple :</p> - - <pre class="eval"> -<em>element</em>.dispatchEvent(<em>event</em>) + <tbody> + <tr> + <th>Propriété</th> + <th>Définie dans</th> + <th>Objectif</th> + </tr> + <tr> + <td><a href="/en/DOM/event.target">event.target</a></td> + <td> + <a href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-interface" + >DOM Event Interface</a + > + </td> + <td> + <p> + L'élément DOM sur le côté gauche de l'appel qui a déclenché cet + événement, par exemple : + </p> + <pre class="eval"><em>element</em>.dispatchEvent(<em>event</em>) </pre> - </td> - </tr> - <tr> - <td><a href="/en/DOM/event.currentTarget">event.currentTarget</a></td> - <td><a href="https://www.w3.org/TR/DOM-Level-2/events.html#Events-interface">DOM Event Interface</a></td> - <td>La <a href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-EventTarget"><code>EventTarget</code></a> (<em>cible d'évènement</em>) que les <a href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-EventListener"><code>EventListeners</code></a> traitent actuellement. Au fur et à mesure de la capture et de la diffusion des évènements, cette valeur change.</td> - </tr> - <tr> - <td><a href="/en/DOM/event.relatedTarget">event.relatedTarget</a></td> - <td><a href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-MouseEvent">DOM MouseEvent Interface</a></td> - <td>Identifie une cible secondaire pour l'évènement.</td> - </tr> - <tr> - <td><a href="/en/DOM/event.explicitOriginalTarget">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">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">Anonymous Content#Event_Flow_and_Targeting</a> pour plus de détails.</td> - </tr> - </tbody> + </td> + </tr> + <tr> + <td><a href="/en/DOM/event.currentTarget">event.currentTarget</a></td> + <td> + <a href="https://www.w3.org/TR/DOM-Level-2/events.html#Events-interface" + >DOM Event Interface</a + > + </td> + <td> + La + <a + href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-EventTarget" + ><code>EventTarget</code></a + > + (<em>cible d'évènement</em>) que les + <a + href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-EventListener" + ><code>EventListeners</code></a + > + traitent actuellement. Au fur et à mesure de la capture et de la + diffusion des évènements, cette valeur change. + </td> + </tr> + <tr> + <td><a href="/en/DOM/event.relatedTarget">event.relatedTarget</a></td> + <td> + <a href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-MouseEvent" + >DOM MouseEvent Interface</a + > + </td> + <td>Identifie une cible secondaire pour l'évènement.</td> + </tr> + <tr> + <td> + <a href="/en/DOM/event.explicitOriginalTarget" + >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">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" + >Anonymous Content#Event_Flow_and_Targeting</a + > + pour plus de détails. + </td> + </tr> + </tbody> </table> -<h3 id="Use_of_explicitOriginalTarget_and_originalTarget">Utilisation de <code>explicitOriginalTarget</code> et <code>originalTarget</code></h3> +### Utilisation de `explicitOriginalTarget` et `originalTarget` -<p>Problème : Seulement disponible dans un navigateur basé sur Mozilla ? Problème : Convient uniquement aux développeurs d'extensions ?</p> +Problème : Seulement disponible dans un navigateur basé sur Mozilla ? Problème : Convient uniquement aux développeurs d'extensions ? -<h3 id="Examples">Exemples</h3> +### Exemples -<pre class="brush: html"><!DOCTYPE html> -<html> -<head> - <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <title>Comparison of Event Targets</title> - <style> +```html +<!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; @@ -88,29 +140,29 @@ original_slug: Web/API/Event/Comparaison_des_cibles_d_évènements .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> + </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; @@ -126,44 +178,27 @@ original_slug: Web/API/Event/Comparaison_des_cibles_d_évènements document.addEventListener('click', handleClicks, false); document.addEventListener('mouseover', handleMouseover, false); -</script> -</body> -</html></pre> +</script> +</body> +</html> +``` -<h3 id="Use_of_target_and_relatedTarget">Utilisation de <code>target</code> et <code>relatedTarget</code></h3> +### Utilisation de `target` et `relatedTarget` -<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> +La propriété `relatedTarget` (_cible associée_) pour l'évènement `mouseover` détient le noeud que la souris avait précédemment atteint. Pour l'évènement `mouseout`, il détient le noeud que la souris a déplacé à. -<table class="standard-table"> - <tbody> - <tr> - <th>Type d'évènement</th> - <th><a href="/en/DOM/event.target">event.target</a></th> - <th><a href="/en/DOM/event.relatedTarget">event.relatedTarget</a></th> - </tr> - <tr> - <td><code>mouseover</code></td> - <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> +| Type d'évènement | [event.target](/en/DOM/event.target) | [event.relatedTarget](/en/DOM/event.relatedTarget) | +| ---------------- | -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | +| `mouseover` | La EventTarget (_cible d'évènement_) entré par le périphérique de pointage. | La EventTarget (_cible d'évènement_) dont le périphérique de pointage est sorti. | +| `mouseout` | La EventTarget (_cible d'évènement_) dont le périphérique de pointage est sorti. | the EventTarget (_cible d'évènement_) entré par le périphérique de pointage. | -<p>Problème : A également besoin de descriptions sur les évènements <code>dragenter</code> et <code>dragexit</code>.</p> +Problème : A également besoin de descriptions sur les évènements `dragenter` et `dragexit`. -<h4 id="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> +#### Exemple -<p> </p> + <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> diff --git a/files/fr/web/api/event/currenttarget/index.md b/files/fr/web/api/event/currenttarget/index.md index d70ad8d00f..d1abd29fdc 100644 --- a/files/fr/web/api/event/currenttarget/index.md +++ b/files/fr/web/api/event/currenttarget/index.md @@ -9,23 +9,24 @@ tags: - Propriété translation_of: Web/API/Event/currentTarget --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<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> +La propriété **`currentTarget`**, 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 (`event.target` peut donc être un descendant de `event.currentTarget`). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var <em>currentEventTarget</em> = <em>event</em>.currentTarget;</pre> + var currentEventTarget = event.currentTarget; -<h3 id="Valeur">Valeur</h3> +### Valeur -<p>{{domxref("EventTarget")}}</p> +{{domxref("EventTarget")}} -<h2 id="Exemples">Exemples</h2> +## Exemples -<p><code>Event.currentTarget</code> peut s'avérer utile lorsqu'on attache le même gestionnaire d'évènement à plusieurs éléments.</p> +`Event.currentTarget` peut s'avérer utile lorsqu'on attache le même gestionnaire d'évènement à plusieurs éléments. -<pre class="brush: js">// Cette fonction masque la cible courante de l'évènement +```js +// Cette fonction masque la cible courante de l'évènement // et l'affiche dans la console. function hide(e){ e.currentTarget.style.visibility = 'hidden'; @@ -36,57 +37,29 @@ function hide(e){ 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 +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 +// 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> - -<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> +> **Note :** La valeur de `event.currentTarget` est **uniquement** disponible lorsque l'évènement est géré. Ainsi, on ne pourra pas observer la valeur de `currentTarget` _a posteriori_ (ex. si on a stocké la valeur d'`event` dans une variable lors de la gestion de l'évènement puis qu'on utilise celle-ci plus tard, `event.currentTarget` aura la valeur `null`). + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------ | +| {{SpecName("DOM WHATWG", "#dom-event-currenttarget", "Event.currentTarget")}} | {{Spec2("DOM WHATWG")}} | | +| {{SpecName("DOM4", "#dom-event-currenttarget", "Event.currentTarget")}} | {{Spec2("DOM4")}} | | +| {{SpecName("DOM3 Events", "#dfn-current-event-target", "current event target")}} | {{Spec2("DOM3 Events")}} | | +| {{SpecName("DOM2 Events", "#Events-Event-currentTarget", "Event.currentTarget")}} | {{Spec2("DOM2 Events")}} | Initial definition | + +## Compatibilité des navigateurs + +{{Compat("api.Event.currentTarget")}} + +## Voir aussi + +- [Comparaison des différentes cibles pour les évènements](/fr/docs/Web/API/Event/Comparaison_des_cibles_d_évènements) diff --git a/files/fr/web/api/event/defaultprevented/index.md b/files/fr/web/api/event/defaultprevented/index.md index f5b25e7c7d..4ff41dfd07 100644 --- a/files/fr/web/api/event/defaultprevented/index.md +++ b/files/fr/web/api/event/defaultprevented/index.md @@ -8,51 +8,30 @@ tags: - Propriété translation_of: Web/API/Event/defaultPrevented --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Retourne un booléen indiquant si {{domxref("event.preventDefault()")}} a été appelée sur l'évènement ou non.</p> +Retourne un booléen indiquant si {{domxref("event.preventDefault()")}} a été appelée sur l'évènement ou non. -<div class="note"> - <p><strong>Note :</strong> Cette propriété doit etre utilisée au lieu de la méthode <code>getPreventDefault()</code> qui n'est pas standard et est désormais dépréciée (voir {{bug(691151)}}).</p> -</div> +> **Note :** Cette propriété doit etre utilisée au lieu de la méthode `getPreventDefault()` qui n'est pas standard et est désormais dépréciée (voir {{bug(691151)}}). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="eval">bool = event.defaultPrevented </pre> + bool = event.defaultPrevented -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre> if (e.defaultPrevented) { - /* Le comportement par défaut a été inhibé */ - } -</pre> + if (e.defaultPrevented) { + /* Le comportement par défaut a été inhibé */ + } -<h2 id="Spécification">Spécification</h2> +## Spécification -<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> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('DOM WHATWG', '#dom-event-defaultprevented', 'Event.defaultPrevented()')}} | {{ Spec2('DOM WHATWG') }} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs - - -<p>{{Compat("api.Event.defaultPrevented")}}</p> - -<ul> -</ul> +{{Compat("api.Event.defaultPrevented")}} diff --git a/files/fr/web/api/event/event/index.md b/files/fr/web/api/event/event/index.md index 8a6992dc29..2636ab0c3b 100644 --- a/files/fr/web/api/event/event/index.md +++ b/files/fr/web/api/event/event/index.md @@ -8,66 +8,47 @@ tags: - évènements translation_of: Web/API/Event/Event --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<p>Le constructeur <code><strong>Event()</strong></code> crée un nouvel {{domxref("Event")}} (<em>évènement</em>).</p> +Le constructeur **`Event()`** crée un nouvel {{domxref("Event")}} (_évènement_). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"> <em>event</em> = new Event(<em>typeArg</em>, <em>eventInit</em>);</pre> + event = new Event(typeArg, eventInit); -<h3 id="Valeurs">Valeurs</h3> +### Valeurs -<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> - <dd><p>C'est un dictionnaire <code>EventInit</code> ayant les champs suivants :</p> - <ul> - <li><code>bubbles</code>: (facultatif) un {{jsxref("Boolean")}} indiquant si les événements sont propagés . Par défaut est <code>false</code> (<em>faux</em>).</li> - <li><code>cancelable</code>: (facultatif) un {{jsxref("Boolean")}} indiquant si l'évènement peut être annulé. Par défaut est <code>false</code> (<em>faux</em>) .</li> - <li><code>composed</code>: ( facultatif ) un {{jsxref("Boolean")}} indiquant si l'évènement déclenchera les écouteurs en dehors d'une racine shadow (voir {{domxref("Event.composed")}} pour plus de détails). Par défaut est <code>false</code> (<em>faux</em>) .</li> - </ul> - </dd> -</dl> +- _typeArg_ + - : C'est une {{domxref("DOMString")}} (_chaîne de caractères_) représentant le nom de l'évènement. +- _eventInit_{{optional_inline}} -<h2 id="Exemple">Exemple</h2> + - : C'est un dictionnaire `EventInit` ayant les champs suivants : -<pre class="brush: js">// crée un évènement "look" qui est diffusé et ne peut être annulé + - `bubbles`: (facultatif) un {{jsxref("Boolean")}} indiquant si les événements sont propagés . Par défaut est `false` (_faux_). + - `cancelable`: (facultatif) un {{jsxref("Boolean")}} indiquant si l'évènement peut être annulé. Par défaut est `false` (_faux_) . + - `composed`: ( 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 `false` (_faux_) . + +## Exemple + +```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"> - <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> +## Spécifications +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName('DOM WHATWG','#interface-event','Event()')}} | {{Spec2('DOM WHATWG')}} | Définition initiale. | +## Compatibilité des navigateurs -<p>{{Compat("api.Event.Event")}}</p> +{{Compat("api.Event.Event")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("Event")}}</li> -</ul> +- {{domxref("Event")}} diff --git a/files/fr/web/api/event/eventphase/index.md b/files/fr/web/api/event/eventphase/index.md index 290a0e6659..f6721c8a8d 100644 --- a/files/fr/web/api/event/eventphase/index.md +++ b/files/fr/web/api/event/eventphase/index.md @@ -10,88 +10,114 @@ tags: - Propriétés translation_of: Web/API/Event/eventPhase --- -<p>{{ApiRef("DOM")}}</p> +{{ApiRef("DOM")}} -<p>Indique quelle phase du flux d'événements est actuellement évaluée.</p> +Indique quelle phase du flux d'événements est actuellement évaluée. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js"><em>var phase</em> = event.eventPhase; -</pre> +```js +var phase = event.eventPhase; +``` -<p>Retourne un entier qui spécifie la phase courante d'évaluation du flux d'événements. Les valeurs possibles sont listées dans {{anch("Constantes de phase d'événement")}}.</p> +Retourne un entier qui spécifie la phase courante d'évaluation du flux d'événements. Les valeurs possibles sont listées dans {{anch("Constantes de phase d'événement")}}. -<h2 id="Constantes">Constantes</h2> +## Constantes -<h3 id="Constantes_de_phase_d'événement">Constantes de phase d'événement</h3> +### Constantes de phase d'événement -<p>Ces valeurs décrivent quelle est la phase du flux d'événements actuellement évalué.</p> +Ces valeurs décrivent quelle est la phase du flux d'événements actuellement évalué. <table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>Event.NONE</code></td> - <td>0</td> - <td> - <p>Aucun événement n'est actuellement traité.</p> - </td> - </tr> - <tr> - <td><code>Event.CAPTURING_PHASE</code></td> - <td>1</td> - <td> - <p>L'événement se propage à travers les objets ancêtres de la cible. Ce processus commence avec {{domxref("Window")}}, puis {{domxref("Document")}}, ensuite {{domxref("HTMLHtmlElement")}} et ainsi de suite à travers les éléments jusqu'à ce que le parent de la cible soit atteint. {{domxref("EventListener", "Event listeners", "", 1)}} sont enregistrés pour le mode capture lorsque {{domxref("EventTarget.addEventListener()")}} est appelé durant cette phase.</p> - </td> - </tr> - <tr> - <td><code>Event.AT_TARGET</code></td> - <td>2</td> - <td>L'événement est arrivé à {{domxref("EventTarget", "the event's target", "", 1)}}. Les écouteurs d'événements enregistrés pour cette phase sont appelés à ce moment. Si {{domxref("Event.bubbles")}} vaut <code>false</code> (<em>faux</em>), le traitement de l'événement est terminé une fois la phase complète.</td> - </tr> - <tr> - <td><code>Event.BUBBLING_PHASE</code></td> - <td>3</td> - <td>L'événement se propage à rebours à travers les ancêtres de la cible dans l'ordre inverse, commençant avec le parent, et atteignant finalement le contenant {{domxref("Window")}}. Ceci est connu comme propagation et arrive seulement si {{domxref("Event.bubbles")}} vaut <code>true</code> (<em>vrai</em>). Les {{domxref("EventListener", "Event listeners", "", 1)}} enregistrés pour cette phase sont déclenchés durant ce traitement.</td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Constant</th> + <th scope="col">Value</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>Event.NONE</code></td> + <td>0</td> + <td><p>Aucun événement n'est actuellement traité.</p></td> + </tr> + <tr> + <td><code>Event.CAPTURING_PHASE</code></td> + <td>1</td> + <td> + <p> + L'événement se propage à travers les objets ancêtres de la cible. Ce + processus commence avec {{domxref("Window")}}, puis + {{domxref("Document")}}, ensuite + {{domxref("HTMLHtmlElement")}} et ainsi de suite à travers + les éléments jusqu'à ce que le parent de la cible soit atteint. + {{domxref("EventListener", "Event listeners", "", 1)}} + sont enregistrés pour le mode capture lorsque + {{domxref("EventTarget.addEventListener()")}} est + appelé durant cette phase. + </p> + </td> + </tr> + <tr> + <td><code>Event.AT_TARGET</code></td> + <td>2</td> + <td> + L'événement est arrivé à + {{domxref("EventTarget", "the event's target", "", 1)}}. + Les écouteurs d'événements enregistrés pour cette phase sont appelés à + ce moment. Si {{domxref("Event.bubbles")}} vaut + <code>false</code> (<em>faux</em>), le traitement de l'événement est + terminé une fois la phase complète. + </td> + </tr> + <tr> + <td><code>Event.BUBBLING_PHASE</code></td> + <td>3</td> + <td> + L'événement se propage à rebours à travers les ancêtres de la cible dans + l'ordre inverse, commençant avec le parent, et atteignant finalement le + contenant {{domxref("Window")}}. Ceci est connu comme propagation + et arrive seulement si {{domxref("Event.bubbles")}} vaut + <code>true</code> (<em>vrai</em>). Les + {{domxref("EventListener", "Event listeners", "", 1)}} + enregistrés pour cette phase sont déclenchés durant ce traitement. + </td> + </tr> + </tbody> </table> -<p>Pour plus de détails, voir <a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">section 3.1, Event dispatch and DOM event flow</a> (en) de la spécification du DOM niveau 3 sur les évènements .</p> - -<h2 id="Example">Exemple</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><h4>Event Propagation Chain</h4> -<ul> - <li>Click 'd1'</li> - <li>Analyse event propagation chain</li> - <li>Click next div and repeat the experience</li> - <li>Change Capturing mode</li> - <li>Repeat the experience</li> -</ul> -<input type="checkbox" id="chCapture" /> -<label for="chCapture">Use Capturing</label> - <div id="d1">d1 - <div id="d2">d2 - <div id="d3">d3 - <div id="d4">d4</div> - </div> - </div> - </div> - <div id="divInfo"></div> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">div { +Pour plus de détails, voir [section 3.1, Event dispatch and DOM event flow](http://www.w3.org/TR/DOM-Level-3-Events/#event-flow) (en) de la spécification du DOM niveau 3 sur les évènements . + +## Exemple + +### HTML + +```html +<h4>Event Propagation Chain</h4> +<ul> + <li>Click 'd1'</li> + <li>Analyse event propagation chain</li> + <li>Click next div and repeat the experience</li> + <li>Change Capturing mode</li> + <li>Repeat the experience</li> +</ul> +<input type="checkbox" id="chCapture" /> +<label for="chCapture">Use Capturing</label> + <div id="d1">d1 + <div id="d2">d2 + <div id="d3">d3 + <div id="d4">d4</div> + </div> + </div> + </div> + <div id="divInfo"></div> +``` + +### CSS + +```css +div { margin: 20px; padding: 4px; border: thin black solid; @@ -102,11 +128,13 @@ translation_of: Web/API/Event/eventPhase padding: 8px; background-color:white; font-size:80%; -}</pre> +} +``` -<h3 id="JavaScript">JavaScript</h3> +### JavaScript -<pre class="brush: js">var clear = false, divInfo = null, divs = null, useCapture = false; +```js +var clear = false, divInfo = null, divs = null, useCapture = false; window.onload = function () { divInfo = document.getElementById("divInfo"); divs = document.getElementsByTagName('div'); @@ -120,7 +148,7 @@ window.onload = function () { } function RemoveListeners() { - for (var i = 0; i < divs.length; i++) { + for (var i = 0; i < divs.length; i++) { var d = divs[i]; if (d.id != "divInfo") { d.removeEventListener("click", OnDivClick, true); @@ -130,7 +158,7 @@ function RemoveListeners() { } function AddListeners() { - for (var i = 0; i < divs.length; i++) { + for (var i = 0; i < divs.length; i++) { var d = divs[i]; if (d.id != "divInfo") { if (chCapture.checked) @@ -149,48 +177,28 @@ function OnDivClick(e) { if (e.eventPhase == 2) e.currentTarget.style.backgroundColor = 'red'; var level = e.eventPhase == 0 ? "none" : e.eventPhase == 1 ? "capturing" : e.eventPhase == 2 ? "target" : e.eventPhase == 3 ? "bubbling" : "error"; - divInfo.innerHTML += e.currentTarget.id + "; eventPhase: " + level + "<br/>"; + divInfo.innerHTML += e.currentTarget.id + "; eventPhase: " + level + "<br/>"; } function Clear() { - for (var i = 0; i < divs.length; i++) { + for (var i = 0; i < divs.length; i++) { if (divs[i].id != "divInfo") - divs[i].style.backgroundColor = (i & 1) ? "#f6eedb" : "#cceeff"; + divs[i].style.backgroundColor = (i & 1) ? "#f6eedb" : "#cceeff"; } divInfo.innerHTML = ''; -}</pre> - -<p>{{ EmbedLiveSample('Example', '', '700', '', 'Web/API/Event/eventPhase') }}</p> - -<h2 id="Spécifications">Spécifications</h2> +} +``` -<table class="standard-table"> - <tbody> - <tr> - <th>Spécification</th> - <th>Statut</th> - <th>Commentaire</th> - </tr> - <tr> - <td>{{SpecName("DOM WHATWG", "#dom-event-eventphase", "Event.eventPhase")}}</td> - <td>{{Spec2("DOM WHATWG")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("DOM4", "#dom-event-eventphase", "Event.eventPhase")}}</td> - <td>{{Spec2("DOM4")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("DOM2 Events", "#Events-Event-eventPhase", "Event.eventPhase")}}</td> - <td>{{Spec2("DOM2 Events")}}</td> - <td>Première définition</td> - </tr> - </tbody> -</table> +{{ EmbedLiveSample('Example', '', '700', '', 'Web/API/Event/eventPhase') }} -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Spécifications +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName("DOM WHATWG", "#dom-event-eventphase", "Event.eventPhase")}} | {{Spec2("DOM WHATWG")}} | | +| {{SpecName("DOM4", "#dom-event-eventphase", "Event.eventPhase")}} | {{Spec2("DOM4")}} | | +| {{SpecName("DOM2 Events", "#Events-Event-eventPhase", "Event.eventPhase")}} | {{Spec2("DOM2 Events")}} | Première définition | +## Compatibilité des navigateurs -<p>{{Compat("api.Event.eventPhase")}}</p> +{{Compat("api.Event.eventPhase")}} diff --git a/files/fr/web/api/event/explicitoriginaltarget/index.md b/files/fr/web/api/event/explicitoriginaltarget/index.md index 9844a934bf..cc0bf70366 100644 --- a/files/fr/web/api/event/explicitoriginaltarget/index.md +++ b/files/fr/web/api/event/explicitoriginaltarget/index.md @@ -10,40 +10,44 @@ tags: - Reference translation_of: Web/API/Event/explicitOriginalTarget --- -<div>{{ApiRef("DOM")}}{{Non-standard_header}}</div> +{{ApiRef("DOM")}}{{Non-standard_header}} -<p>Cette propriété représente la cible originale de l'évènement. Elle est spécifique à Mozilla.</p> +Cette propriété représente la cible originale de l'évènement. Elle est spécifique à Mozilla. -<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> +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 [`currentTarget`](/fr/docs/Web/API/Event/currentTarget) pointera vers le parent et `explicitOriginalTarget` vers le nœud texte. -<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> +À la différence de [`originalTarget`](/fr/docs/Web/API/Event/originalTarget), `explicitOriginalTarget` ne contiendra jamais de contenu anonyme. -<p>Voir aussi une <a href="/fr/docs/DOM/event/Comparison_of_Event_Targets">comparaison des cibles pour les évènements</a>.</p> +Voir aussi une [comparaison des cibles pour les évènements](/fr/docs/DOM/event/Comparison_of_Event_Targets). -<h2 id="Exemples">Exemples</h2> +## Exemples -<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> +Cette propriété peut être utiliséee avec `<command>` afin d'obtenir les détails de l'évènement de l'objet qui a invoqué la commande. -<h3 id="HTML">HTML</h3> +### HTML -<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> +```html +<command id="my-cmd-anAction" + oncommand="myCommand(event);"/> +<menulist> + <menupopup> + <menuitem label="Get my element name!" + command="my-cmd-anAction"/> + </menupopup> +</menulist> +``` -<h3 id="JavaScript">JavaScript</h3> +### JavaScript -<pre class="brush: js">function myCommand(ev) { +```js +function myCommand(ev) { console.log(ev.explicitOriginalTarget.nodeName); // affichera 'menuitem' -}</pre> +} +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<p>Cette propriété est spécifique à Mozilla. Elle est définie dans l'IDL {{Source("/dom/public/idl/events/nsIDOMNSEvent.idl")}}</p> +Cette propriété est spécifique à Mozilla. Elle est définie dans l'IDL {{Source("/dom/public/idl/events/nsIDOMNSEvent.idl")}} -<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> +Cette propriété **n'est pas définie** dans la spécification [DOM Level 2 Events](https://www.w3.org/TR/DOM-Level-2-Events/events.html) diff --git a/files/fr/web/api/event/index.md b/files/fr/web/api/event/index.md index a85599f14b..40a67b6565 100644 --- a/files/fr/web/api/event/index.md +++ b/files/fr/web/api/event/index.md @@ -1,167 +1,151 @@ --- title: Event slug: Web/API/Event -browser-compat: api.Event translation_of: Web/API/Event +browser-compat: api.Event --- -<p>{{APIRef("DOM")}}</p> - -<p>L'interface <code><strong>Event</strong></code> interface représente un évènement qui se produit dans le DOM.</p> - -<p>Un évènement peut être déclenché par une action humaine (clic avec la souris, appui sur une touche du clavier) ou généré par des API pour représenter la progression d'une tâche asynchrone. Il est également possible de déclencher un évènement à partir d'un programme, en appelant par exemple la méthode <a href="/fr/docs/Web/API/HTMLElement/click"><code>HTMLElement.click()</code></a> sur un élément ou en définissant l'évènement avant de l'envoyer sur une cible avec la méthode <a href="/fr/docs/Web/API/EventTarget/dispatchEvent"><code>EventTarget.dispatchEvent()</code></a>.</p> - -<p>Il existe de nombreux types d'évènements dont certains utilisent d'autres interfaces basées sur <code>Event</code>. L'interface <code>Event</code> contient les propriétés et méthodes qui sont communes à l'ensemble des évènements.</p> - -<p>De nombreux éléments DOM peuvent être paramétrés afin d'accepter (« d'écouter ») ces évènements et d'exécuter du code en réaction afin de les traiter (« gérer »). Les gestionnaires d'évènements sont généralement connectés (« attachés ») aux <a href="/fr/docs/Web/HTML/Element">éléments HTML</a> (tels que <code><button></code>, <code><div></code>, <code><span></code>, etc.) grâce à la méthode <a href="/fr/docs/Web/API/EventTarget/addEventListener"><code>EventTarget.addEventListener()</code></a> qui remplace les anciens <a href="/fr/docs/Web/HTML/Global_attributes">attributs de gestion d'évènement</a> qui étaient auparavant utilisés en HTML. Avec cette méthode d'ajout plus récente, les gestionnaires peuvent également être déconnectés/détachés si besoin via la méthode <a href="/fr/docs/Web/API/EventTarget/removeEventListener"><code>EventTarget.removeEventListener()</code></a>.</p> - -<div class="notecard note"> -<p><strong>Note :</strong> Il est tout à fait possible d'attacher plusieurs gestionnaires d'évènement à un seul élément, y compris pour la gestion d'un évènement particulier. Ainsi, des modules de code indépendant peuvent attacher leurs gestionnaires de façon indépendante (par exemple, sur une page web, un module de publicité et un autre module d'analyse pourront tout à fait attacher des gestionnaires pour étudier la consultation d'une vidéo).</p> -</div> - -<p>Lorsqu'il y a de nombreux éléments imbriqués, chacun ayant ses propres gestionnaires d'évènement, le traitement des évènements peut se révéler compliqué, notamment lorsqu'un élément parent reçoit le même évènement que ses éléments enfants (par exemple pour des évènements qui se déclenchent sur la surface visuelle de l'élément enfant). Dans ce cas, l'ordre du traitement de ces évènements dépend des paramètres <a href="/fr/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling_and_capture">de bouillonnement (<i>bubbling</i>) et de capture</a> définis sur chaque gestionnaire ainsi déclenché.</p> - -<h2 id="introduction">Interfaces basées sur Event</h2> - -<p>Voici une liste des interfaces basées sur <code>Event</code> avec un lien vers leur documentation dans la référence MDN.</p> - -<p>On notera que l'ensemble des interfaces d'évènements ont un nom qui termine par <i>Event</i> (« évènement » en anglais).</p> - -<ul> - <li><a href="/fr/docs/Web/API/AnimationEvent"><code>AnimationEvent</code></a></li> - <li><a href="/fr/docs/Web/API/AudioProcessingEvent"><code>AudioProcessingEvent</code></a></li> - <li><a href="/fr/docs/Web/API/BeforeInputEvent"><code>BeforeInputEvent</code></a></li> - <li><a href="/fr/docs/Web/API/BeforeUnloadEvent"><code>BeforeUnloadEvent</code></a></li> - <li><a href="/fr/docs/Web/API/BlobEvent"><code>BlobEvent</code></a></li> - <li><a href="/fr/docs/Web/API/ClipboardEvent"><code>ClipboardEvent</code></a></li> - <li><a href="/fr/docs/Web/API/CloseEvent"><code>CloseEvent</code></a></li> - <li><a href="/fr/docs/Web/API/CompositionEvent"><code>CompositionEvent</code></a></li> - <li><a href="/fr/docs/Web/API/CSSFontFaceLoadEvent"><code>CSSFontFaceLoadEvent</code></a></li> - <li><a href="/fr/docs/Web/API/CustomEvent"><code>CustomEvent</code></a></li> - <li><a href="/fr/docs/Web/API/DeviceMotionEvent"><code>DeviceMotionEvent</code></a></li> - <li><a href="/fr/docs/Web/API/DeviceOrientationEvent"><code>DeviceOrientationEvent</code></a></li> - <li><a href="/fr/docs/Web/API/DeviceProximityEvent"><code>DeviceProximityEvent</code></a></li> - <li><a href="/fr/docs/Web/API/DOMTransactionEvent"><code>DOMTransactionEvent</code></a></li> - <li><a href="/fr/docs/Web/API/DragEvent"><code>DragEvent</code></a></li> - <li><a href="/fr/docs/Web/API/EditingBeforeInputEvent"><code>EditingBeforeInputEvent</code></a></li> - <li><a href="/fr/docs/Web/API/ErrorEvent"><code>ErrorEvent</code></a></li> - <li><a href="/fr/docs/Web/API/FetchEvent"><code>FetchEvent</code></a></li> - <li><a href="/fr/docs/Web/API/FocusEvent"><code>FocusEvent</code></a></li> - <li><a href="/fr/docs/Web/API/GamepadEvent"><code>GamepadEvent</code></a></li> - <li><a href="/fr/docs/Web/API/HashChangeEvent"><code>HashChangeEvent</code></a></li> - <li><a href="/fr/docs/Web/API/IDBVersionChangeEvent"><code>IDBVersionChangeEvent</code></a></li> - <li><a href="/fr/docs/Web/API/InputEvent"><code>InputEvent</code></a></li> - <li><a href="/fr/docs/Web/API/KeyboardEvent"><code>KeyboardEvent</code></a></li> - <li><a href="/fr/docs/Web/API/MediaStreamEvent"><code>MediaStreamEvent</code></a></li> - <li><a href="/fr/docs/Web/API/MessageEvent"><code>MessageEvent</code></a></li> - <li><a href="/fr/docs/Web/API/MouseEvent"><code>MouseEvent</code></a></li> - <li><a href="/fr/docs/Web/API/MutationEvent"><code>MutationEvent</code></a></li> - <li><a href="/fr/docs/Web/API/OfflineAudioCompletionEvent"><code>OfflineAudioCompletionEvent</code></a></li> - <li><a href="/fr/docs/Web/API/OverconstrainedError"><code>OverconstrainedError</code></a></li> - <li><a href="/fr/docs/Web/API/PageTransitionEvent"><code>PageTransitionEvent</code></a></li> - <li><a href="/fr/docs/Web/API/PaymentRequestUpdateEvent"><code>PaymentRequestUpdateEvent</code></a></li> - <li><a href="/fr/docs/Web/API/PointerEvent"><code>PointerEvent</code></a></li> - <li><a href="/fr/docs/Web/API/PopStateEvent"><code>PopStateEvent</code></a></li> - <li><a href="/fr/docs/Web/API/ProgressEvent"><code>ProgressEvent</code></a></li> - <li><a href="/fr/docs/Web/API/RelatedEvent"><code>RelatedEvent</code></a></li> - <li><a href="/fr/docs/Web/API/RTCDataChannelEvent"><code>RTCDataChannelEvent</code></a></li> - <li><a href="/fr/docs/Web/API/RTCPeerConnectionIceEvent"><code>RTCPeerConnectionIceEvent</code></a></li> - <li><a href="/fr/docs/Web/API/SensorEvent"><code>SensorEvent</code></a></li> - <li><a href="/fr/docs/Web/API/StorageEvent"><code>StorageEvent</code></a></li> - <li><a href="/fr/docs/Web/API/SVGEvent"><code>SVGEvent</code></a></li> - <li><a href="/fr/docs/Web/API/SVGZoomEvent"><code>SVGZoomEvent</code></a></li> - <li><a href="/fr/docs/Web/API/TimeEvent"><code>TimeEvent</code></a></li> - <li><a href="/fr/docs/Web/API/TouchEvent"><code>TouchEvent</code></a></li> - <li><a href="/fr/docs/Web/API/TrackEvent"><code>TrackEvent</code></a></li> - <li><a href="/fr/docs/Web/API/TransitionEvent"><code>TransitionEvent</code></a></li> - <li><a href="/fr/docs/Web/API/UIEvent"><code>UIEvent</code></a></li> - <li><a href="/fr/docs/Web/API/UserProximityEvent"><code>UserProximityEvent</code></a></li> - <li><a href="/fr/docs/Web/API/WebGLContextEvent"><code>WebGLContextEvent</code></a></li> - <li><a href="/fr/docs/Web/API/WheelEvent"><code>WheelEvent</code></a></li> -</ul> - -<h2 id="constructor">Constructeur</h2> - -<dl> - <dt><a href="/fr/docs/Web/API/Event/Event"><code>Event()</code></a></dt> - <dd>Crée un objet <code>Event</code> et le renvoie à l'appelant.</dd> -</dl> - -<h2 id="properties">Propriétés</h2> - -<dl> - <dt><a href="/fr/docs/Web/API/Event/bubbles"><code>Event.bubbles</code></a> {{readonlyinline}}</dt> - <dd>Un booléen qui indique si l'évènement bouillonne/remonte vers le haut dans l'arbre du DOM.</dd> - <dt><a href="/fr/docs/Web/API/Event/cancelBubble"><code>Event.cancelBubble</code></a></dt> - <dd>Un alias historique de <a href="/fr/docs/Web/API/Event/stopPropagation"><code>Event.stopPropagation()</code></a>. Définir sa valeur à <code>true</code> avant le retour d'un gestionnaire d'évènement empêchera la propagation de l'évènement.</dd> - <dt><a href="/fr/docs/Web/API/Event/cancelable"><code>Event.cancelable</code></a> {{readonlyinline}}</dt> - <dd>Un booléen qui indique si l'évènement peut être annulé.</dd> - <dt><a href="/fr/docs/Web/API/Event/composed"><code>Event.composed</code></a> {{ReadOnlyInline}}</dt> - <dd>Un booléen qui indique si l'évènement peut bouillonner entre l'arbre du shadow DOM et le DOM standard.</dd> - <dt><a href="/fr/docs/Web/API/Event/currentTarget"><code>Event.currentTarget</code></a> {{readonlyinline}}</dt> - <dd>Une référence vers la cible actuellement enregistrée pour l'évènement. Il s'agit de l'objet vers lequel l'évènement est présentement destiné à être envoyé. Cette cible peut avoir été modifiée pendant la vie de l'évènement via un reciblage.</dd> - <dt><a href="/fr/docs/Web/API/Event/deepPath"><code>Event.deepPath</code></a> {{non-standard_inline}}</dt> - <dd>Un tableau (<a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Array"><code>Array</code></a>) de nœuds (<a href="/fr/docs/Web/API/Node"><code>Node</code></a>) du DOM qui ont été parcourus lors du bouillonnement/de la remontée de l'évènement.</dd> - <dt><a href="/fr/docs/Web/API/Event/defaultPrevented"><code>Event.defaultPrevented</code></a> {{readonlyinline}}</dt> - <dd>Indique si un appel à <a href="/fr/docs/Web/API/Event/preventDefault"><code>Event.preventDefault()</code></a> a annulé l'évènement.</dd> - <dt><a href="/fr/docs/Web/API/Event/eventPhase"><code>Event.eventPhase</code></a> {{readonlyinline}}</dt> - <dd>Indique la phase du flux de l'évènement qui est en cours de traitement.</dd> - <dt><a href="/fr/docs/Web/API/Event/explicitOriginalTarget"><code>Event.explicitOriginalTarget</code></a> {{non-standard_inline}} {{readonlyinline}}</dt> - <dd>La cible explicite et originnelle de l'évènement (spécifique à Mozilla).</dd> - <dt><a href="/fr/docs/Web/API/Event/originalTarget"><code>Event.originalTarget</code></a> {{non-standard_inline}} {{readonlyinline}}</dt> - <dd>La cible originale de l'évènement avant tout reciblage (spécifique à Mozilla).</dd> - <dt><a href="/fr/docs/Web/API/Event/returnValue"><code>Event.returnValue</code></a> {{Deprecated_Inline}}</dt> - <dd>Une propriété historique, introduite par Internet Explorer puis adoptée au sein de la spécification du DOM pour la compatibilité des sites existants. À la place, on privilégiera l'usage de <a href="/fr/docs/Web/API/Event/preventDefault"><code>Event.preventDefault()</code></a> et <a href="/fr/docs/Web/API/Event/defaultPrevented"><code>Event.defaultPrevented</code></a>.</dd> - <dt><a href="/fr/docs/Web/API/Event/srcElement"><code>Event.srcElement</code></a> {{non-standard_inline}}</dt> - <dd>Un alias non-standard (provenant d'anciennes versions d'Internet Explorer) pour <a href="/fr/docs/Web/API/Event/target"><code>Event.target</code></a>. Certains navigateurs le prennent en charge à des fins de compatibilité web.</dd> - <dt><a href="/fr/docs/Web/API/Event/target"><code>Event.target</code></a> {{readonlyinline}}</dt> - <dd>Une référence à la cible à laquelle l'évènement était initialement destiné.</dd> - <dt><a href="/fr/docs/Web/API/Event/timeStamp"><code>Event.timeStamp</code></a> {{readonlyinline}}</dt> - <dd>Le temps auquel l'évènement a été créé (exprimé en millisecondes). La spécification indique que cette valeur est relative à l'epoch mais l'implémentation des navigateurs peut varier. Des travaux sont en cours afin que cette valeur devienne une valeur de type <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a>.</dd> - <dt><a href="/fr/docs/Web/API/Event/type"><code>Event.type</code></a> {{readonlyinline}}</dt> - <dd>Le nom de l'évènement, exprimé de façon insensible à la casse.</dd> - <dt><a href="/fr/docs/Web/API/Event/isTrusted"><code>Event.isTrusted</code></a> {{readonlyinline}}</dt> - <dd>Indique si l'évènement a été initié par le navigateur (suite à une action humaine comme un clic) ou par un script (en utilisant une méthode de création comme <a href="/fr/docs/Web/API/Event/initEvent"><code>Event.initEvent</code></a>).</dd> -</dl> - -<h3 id="deprecated_properties">Propriétés dépréciées</h3> - -<dl> - <dt><a href="/fr/docs/Web/API/Event/composed"><code>Event.scoped</code></a> {{readonlyinline}} {{deprecated_inline}}</dt> - <dd>Un booléen qui indique si l'évènement courant remontera de l'arbre du shadow DOM vers l'arbre du DOM classique. <a href="/fr/docs/Web/API/Event/composed"><code>Event.composed</code></a> doit être utilisé à la place.</dd> -</dl> - -<h2 id="methods">Méthodes</h2> - -<dl> - <dt><a href="/fr/docs/Web/API/Event/composedPath"><code>Event.composedPath()</code></a></dt> - <dd>Renvoie le chemin de l'évènement (c'est-à-dire les objets pour lesquels des gestionnaires d'évènements seront appelés). Ce chemin n'inclut pas les nœuds des arbres shadow si la racine shadow a été créée avec un <a href="/fr/docs/Web/API/ShadowRoot/mode"><code>ShadowRoot.mode</code></a>.</dd> - <dt><a href="/fr/docs/Web/API/Event/preventDefault"><code>Event.preventDefault()</code></a></dt> - <dd>Annule l'évènement (si celui-ci peut être annulé).</dd> - <dt><a href="/fr/docs/Web/API/Event/stopImmediatePropagation"><code>Event.stopImmediatePropagation</code></a></dt> - <dd>Pour l'évènement courant, empêche les autres gestionnaires d'évènements d'être appelés. Cela inclut les gestionnaires attachés au même élément ainsi que ceux attachés aux éléments qui seront parcourus ensuite (pendant la phase de capture par exemple).</dd> - <dt><a href="/fr/docs/Web/API/Event/stopPropagation"><code>Event.stopPropagation</code></a></dt> - <dd>Arrête la propagation des évènements plus loin dans le DOM.</dd> -</dl> - -<h3 id="deprecated_methods">Méthodes dépréciées</h3> - -<dl> - <dt><a href="/fr/docs/Web/API/Event/initEvent"><code>Event.initEvent()</code></a> {{deprecated_inline}}</dt> - <dd>Initialise la valeur d'un évènement créé. Si l'évènement a déjà diffusé, cette méthode n'a aucun effet.</dd> -</dl> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li>Les types d'évènement disponibles : <a href="/fr/docs/Web/Events">Référence des évènements</a></li> - <li><a href="/fr/docs/Web/API/Event/Comparison_of_Event_Targets">Comparaison des cibles d'évènements</a> (<code>target</code> vs <code>currentTarget</code> vs <code>relatedTarget</code> vs <code>originalTarget</code>)</li> - <li><a href="/fr/docs/Web/Events/Creating_and_triggering_events">Créer et déclencher des évènements personnalisés</a></li> -</ul> +{{APIRef("DOM")}} + +L'interface **`Event`** interface représente un évènement qui se produit dans le DOM. + +Un évènement peut être déclenché par une action humaine (clic avec la souris, appui sur une touche du clavier) ou généré par des API pour représenter la progression d'une tâche asynchrone. Il est également possible de déclencher un évènement à partir d'un programme, en appelant par exemple la méthode [`HTMLElement.click()`](/fr/docs/Web/API/HTMLElement/click) sur un élément ou en définissant l'évènement avant de l'envoyer sur une cible avec la méthode [`EventTarget.dispatchEvent()`](/fr/docs/Web/API/EventTarget/dispatchEvent). + +Il existe de nombreux types d'évènements dont certains utilisent d'autres interfaces basées sur `Event`. L'interface `Event` contient les propriétés et méthodes qui sont communes à l'ensemble des évènements. + +De nombreux éléments DOM peuvent être paramétrés afin d'accepter (« d'écouter ») ces évènements et d'exécuter du code en réaction afin de les traiter (« gérer »). Les gestionnaires d'évènements sont généralement connectés (« attachés ») aux [éléments HTML](/fr/docs/Web/HTML/Element) (tels que `<button>`, `<div>`, `<span>`, etc.) grâce à la méthode [`EventTarget.addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener) qui remplace les anciens [attributs de gestion d'évènement](/fr/docs/Web/HTML/Global_attributes) qui étaient auparavant utilisés en HTML. Avec cette méthode d'ajout plus récente, les gestionnaires peuvent également être déconnectés/détachés si besoin via la méthode [`EventTarget.removeEventListener()`](/fr/docs/Web/API/EventTarget/removeEventListener). + +> **Note :** Il est tout à fait possible d'attacher plusieurs gestionnaires d'évènement à un seul élément, y compris pour la gestion d'un évènement particulier. Ainsi, des modules de code indépendant peuvent attacher leurs gestionnaires de façon indépendante (par exemple, sur une page web, un module de publicité et un autre module d'analyse pourront tout à fait attacher des gestionnaires pour étudier la consultation d'une vidéo). + +Lorsqu'il y a de nombreux éléments imbriqués, chacun ayant ses propres gestionnaires d'évènement, le traitement des évènements peut se révéler compliqué, notamment lorsqu'un élément parent reçoit le même évènement que ses éléments enfants (par exemple pour des évènements qui se déclenchent sur la surface visuelle de l'élément enfant). Dans ce cas, l'ordre du traitement de ces évènements dépend des paramètres [de bouillonnement (_bubbling_) et de capture](/fr/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling_and_capture) définis sur chaque gestionnaire ainsi déclenché. + +## Interfaces basées sur Event + +Voici une liste des interfaces basées sur `Event` avec un lien vers leur documentation dans la référence MDN. + +On notera que l'ensemble des interfaces d'évènements ont un nom qui termine par _Event_ (« évènement » en anglais). + +- [`AnimationEvent`](/fr/docs/Web/API/AnimationEvent) +- [`AudioProcessingEvent`](/fr/docs/Web/API/AudioProcessingEvent) +- [`BeforeInputEvent`](/fr/docs/Web/API/BeforeInputEvent) +- [`BeforeUnloadEvent`](/fr/docs/Web/API/BeforeUnloadEvent) +- [`BlobEvent`](/fr/docs/Web/API/BlobEvent) +- [`ClipboardEvent`](/fr/docs/Web/API/ClipboardEvent) +- [`CloseEvent`](/fr/docs/Web/API/CloseEvent) +- [`CompositionEvent`](/fr/docs/Web/API/CompositionEvent) +- [`CSSFontFaceLoadEvent`](/fr/docs/Web/API/CSSFontFaceLoadEvent) +- [`CustomEvent`](/fr/docs/Web/API/CustomEvent) +- [`DeviceMotionEvent`](/fr/docs/Web/API/DeviceMotionEvent) +- [`DeviceOrientationEvent`](/fr/docs/Web/API/DeviceOrientationEvent) +- [`DeviceProximityEvent`](/fr/docs/Web/API/DeviceProximityEvent) +- [`DOMTransactionEvent`](/fr/docs/Web/API/DOMTransactionEvent) +- [`DragEvent`](/fr/docs/Web/API/DragEvent) +- [`EditingBeforeInputEvent`](/fr/docs/Web/API/EditingBeforeInputEvent) +- [`ErrorEvent`](/fr/docs/Web/API/ErrorEvent) +- [`FetchEvent`](/fr/docs/Web/API/FetchEvent) +- [`FocusEvent`](/fr/docs/Web/API/FocusEvent) +- [`GamepadEvent`](/fr/docs/Web/API/GamepadEvent) +- [`HashChangeEvent`](/fr/docs/Web/API/HashChangeEvent) +- [`IDBVersionChangeEvent`](/fr/docs/Web/API/IDBVersionChangeEvent) +- [`InputEvent`](/fr/docs/Web/API/InputEvent) +- [`KeyboardEvent`](/fr/docs/Web/API/KeyboardEvent) +- [`MediaStreamEvent`](/fr/docs/Web/API/MediaStreamEvent) +- [`MessageEvent`](/fr/docs/Web/API/MessageEvent) +- [`MouseEvent`](/fr/docs/Web/API/MouseEvent) +- [`MutationEvent`](/fr/docs/Web/API/MutationEvent) +- [`OfflineAudioCompletionEvent`](/fr/docs/Web/API/OfflineAudioCompletionEvent) +- [`OverconstrainedError`](/fr/docs/Web/API/OverconstrainedError) +- [`PageTransitionEvent`](/fr/docs/Web/API/PageTransitionEvent) +- [`PaymentRequestUpdateEvent`](/fr/docs/Web/API/PaymentRequestUpdateEvent) +- [`PointerEvent`](/fr/docs/Web/API/PointerEvent) +- [`PopStateEvent`](/fr/docs/Web/API/PopStateEvent) +- [`ProgressEvent`](/fr/docs/Web/API/ProgressEvent) +- [`RelatedEvent`](/fr/docs/Web/API/RelatedEvent) +- [`RTCDataChannelEvent`](/fr/docs/Web/API/RTCDataChannelEvent) +- [`RTCPeerConnectionIceEvent`](/fr/docs/Web/API/RTCPeerConnectionIceEvent) +- [`SensorEvent`](/fr/docs/Web/API/SensorEvent) +- [`StorageEvent`](/fr/docs/Web/API/StorageEvent) +- [`SVGEvent`](/fr/docs/Web/API/SVGEvent) +- [`SVGZoomEvent`](/fr/docs/Web/API/SVGZoomEvent) +- [`TimeEvent`](/fr/docs/Web/API/TimeEvent) +- [`TouchEvent`](/fr/docs/Web/API/TouchEvent) +- [`TrackEvent`](/fr/docs/Web/API/TrackEvent) +- [`TransitionEvent`](/fr/docs/Web/API/TransitionEvent) +- [`UIEvent`](/fr/docs/Web/API/UIEvent) +- [`UserProximityEvent`](/fr/docs/Web/API/UserProximityEvent) +- [`WebGLContextEvent`](/fr/docs/Web/API/WebGLContextEvent) +- [`WheelEvent`](/fr/docs/Web/API/WheelEvent) + +## Constructeur + +- [`Event()`](/fr/docs/Web/API/Event/Event) + - : Crée un objet `Event` et le renvoie à l'appelant. + +## Propriétés + +- [`Event.bubbles`](/fr/docs/Web/API/Event/bubbles) {{readonlyinline}} + - : Un booléen qui indique si l'évènement bouillonne/remonte vers le haut dans l'arbre du DOM. +- [`Event.cancelBubble`](/fr/docs/Web/API/Event/cancelBubble) + - : Un alias historique de [`Event.stopPropagation()`](/fr/docs/Web/API/Event/stopPropagation). Définir sa valeur à `true` avant le retour d'un gestionnaire d'évènement empêchera la propagation de l'évènement. +- [`Event.cancelable`](/fr/docs/Web/API/Event/cancelable) {{readonlyinline}} + - : Un booléen qui indique si l'évènement peut être annulé. +- [`Event.composed`](/fr/docs/Web/API/Event/composed) {{ReadOnlyInline}} + - : Un booléen qui indique si l'évènement peut bouillonner entre l'arbre du shadow DOM et le DOM standard. +- [`Event.currentTarget`](/fr/docs/Web/API/Event/currentTarget) {{readonlyinline}} + - : Une référence vers la cible actuellement enregistrée pour l'évènement. Il s'agit de l'objet vers lequel l'évènement est présentement destiné à être envoyé. Cette cible peut avoir été modifiée pendant la vie de l'évènement via un reciblage. +- [`Event.deepPath`](/fr/docs/Web/API/Event/deepPath) {{non-standard_inline}} + - : Un tableau ([`Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array)) de nœuds ([`Node`](/fr/docs/Web/API/Node)) du DOM qui ont été parcourus lors du bouillonnement/de la remontée de l'évènement. +- [`Event.defaultPrevented`](/fr/docs/Web/API/Event/defaultPrevented) {{readonlyinline}} + - : Indique si un appel à [`Event.preventDefault()`](/fr/docs/Web/API/Event/preventDefault) a annulé l'évènement. +- [`Event.eventPhase`](/fr/docs/Web/API/Event/eventPhase) {{readonlyinline}} + - : Indique la phase du flux de l'évènement qui est en cours de traitement. +- [`Event.explicitOriginalTarget`](/fr/docs/Web/API/Event/explicitOriginalTarget) {{non-standard_inline}} {{readonlyinline}} + - : La cible explicite et originnelle de l'évènement (spécifique à Mozilla). +- [`Event.originalTarget`](/fr/docs/Web/API/Event/originalTarget) {{non-standard_inline}} {{readonlyinline}} + - : La cible originale de l'évènement avant tout reciblage (spécifique à Mozilla). +- [`Event.returnValue`](/fr/docs/Web/API/Event/returnValue) {{Deprecated_Inline}} + - : Une propriété historique, introduite par Internet Explorer puis adoptée au sein de la spécification du DOM pour la compatibilité des sites existants. À la place, on privilégiera l'usage de [`Event.preventDefault()`](/fr/docs/Web/API/Event/preventDefault) et [`Event.defaultPrevented`](/fr/docs/Web/API/Event/defaultPrevented). +- [`Event.srcElement`](/fr/docs/Web/API/Event/srcElement) {{non-standard_inline}} + - : Un alias non-standard (provenant d'anciennes versions d'Internet Explorer) pour [`Event.target`](/fr/docs/Web/API/Event/target). Certains navigateurs le prennent en charge à des fins de compatibilité web. +- [`Event.target`](/fr/docs/Web/API/Event/target) {{readonlyinline}} + - : Une référence à la cible à laquelle l'évènement était initialement destiné. +- [`Event.timeStamp`](/fr/docs/Web/API/Event/timeStamp) {{readonlyinline}} + - : Le temps auquel l'évènement a été créé (exprimé en millisecondes). La spécification indique que cette valeur est relative à l'epoch mais l'implémentation des navigateurs peut varier. Des travaux sont en cours afin que cette valeur devienne une valeur de type [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp). +- [`Event.type`](/fr/docs/Web/API/Event/type) {{readonlyinline}} + - : Le nom de l'évènement, exprimé de façon insensible à la casse. +- [`Event.isTrusted`](/fr/docs/Web/API/Event/isTrusted) {{readonlyinline}} + - : Indique si l'évènement a été initié par le navigateur (suite à une action humaine comme un clic) ou par un script (en utilisant une méthode de création comme [`Event.initEvent`](/fr/docs/Web/API/Event/initEvent)). + +### Propriétés dépréciées + +- [`Event.scoped`](/fr/docs/Web/API/Event/composed) {{readonlyinline}} {{deprecated_inline}} + - : Un booléen qui indique si l'évènement courant remontera de l'arbre du shadow DOM vers l'arbre du DOM classique. [`Event.composed`](/fr/docs/Web/API/Event/composed) doit être utilisé à la place. + +## Méthodes + +- [`Event.composedPath()`](/fr/docs/Web/API/Event/composedPath) + - : Renvoie le chemin de l'évènement (c'est-à-dire les objets pour lesquels des gestionnaires d'évènements seront appelés). Ce chemin n'inclut pas les nœuds des arbres shadow si la racine shadow a été créée avec un [`ShadowRoot.mode`](/fr/docs/Web/API/ShadowRoot/mode). +- [`Event.preventDefault()`](/fr/docs/Web/API/Event/preventDefault) + - : Annule l'évènement (si celui-ci peut être annulé). +- [`Event.stopImmediatePropagation`](/fr/docs/Web/API/Event/stopImmediatePropagation) + - : Pour l'évènement courant, empêche les autres gestionnaires d'évènements d'être appelés. Cela inclut les gestionnaires attachés au même élément ainsi que ceux attachés aux éléments qui seront parcourus ensuite (pendant la phase de capture par exemple). +- [`Event.stopPropagation`](/fr/docs/Web/API/Event/stopPropagation) + - : Arrête la propagation des évènements plus loin dans le DOM. + +### Méthodes dépréciées + +- [`Event.initEvent()`](/fr/docs/Web/API/Event/initEvent) {{deprecated_inline}} + - : Initialise la valeur d'un évènement créé. Si l'évènement a déjà diffusé, cette méthode n'a aucun effet. + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- Les types d'évènement disponibles : [Référence des évènements](/fr/docs/Web/Events) +- [Comparaison des cibles d'évènements](/fr/docs/Web/API/Event/Comparison_of_Event_Targets) (`target` vs `currentTarget` vs `relatedTarget` vs `originalTarget`) +- [Créer et déclencher des évènements personnalisés](/fr/docs/Web/Events/Creating_and_triggering_events) diff --git a/files/fr/web/api/event/initevent/index.md b/files/fr/web/api/event/initevent/index.md index 6f06e8b7f3..fceca59b46 100644 --- a/files/fr/web/api/event/initevent/index.md +++ b/files/fr/web/api/event/initevent/index.md @@ -9,77 +9,54 @@ tags: - 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()")}}. Une fois l'évènement transmis, la méthode ne fait plus rien.</p> - -<div class="note"> -<p><strong>Note :</strong> Ne pas utiliser cette méthode qui est dépréciée.</p> - -<p>À la place, utilisez un constructeur d'évènements spécifique comme {{domxref("Event.Event", "Event()")}} . La page <a href="/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">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">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, remplacée par les constructeurs d'événements.</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">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Event.initEvent")}}</p> - -<h2 id="See_also">Voir aussi</h2> - -<ul> - <li>Le constructeur à utiliser à la place de cette méthode dépréciée : {{domxref("Event.Event","Event()")}}. Des constructeurs plus spécifiques peuvent aussi être utilisés.</li> -</ul> +{{ApiRef("DOM")}}{{deprecated_header}} + +La méthode **`Event.initEvent()`** est utilisée pour initialiser la valeur d'un objet {{domxref("event")}} créé à l'aide de {{domxref("Document.createEvent()")}}. + +Les évènements initialisés par ce moyen ont été créés par la méthode {{domxref("Document.createEvent()")}}. Celle-ci doit être appelée à définir l'évènement avant qu'il ne soit distribué, en utilisant {{domxref("EventTarget.dispatchEvent()")}}. Une fois l'évènement transmis, la méthode ne fait plus rien. + +> **Note :** Ne pas utiliser cette méthode qui est dépréciée. +> +> À la place, utilisez un constructeur d'évènements spécifique comme {{domxref("Event.Event", "Event()")}} . La page [Création et déclenchement d'évènements](/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events) vous donne plus d'informations sur la manière de les utiliser. + +## Syntaxe + + event.initEvent(type, bubbles, cancelable) + +- `type` + - : est une {{domxref("DOMString")}} qui définit le type d'évènement. +- `bubbles` + - : 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. +- `cancelable` + - : 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. + +## Exemple + + // Crée un évènement. + var event = document.createEvent('Event'); + + // Crée un évènement click qui doit se propager vers le haut + // et ne peut être annulé + event.initEvent('click', true, false); + + // Écoute les évènements. + elem.addEventListener('click', function (e) { + // e.target matches elem + }, false); + + elem.dispatchEvent(event); + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------------------------------------------------------- | +| {{SpecName('DOM WHATWG', '#dom-event-initevent','Event.initEvent()')}} | {{Spec2("DOM WHATWG")}} | Depuis {{SpecName('DOM2 Events')}}, dépréciée, remplacée par les constructeurs d'événements. | +| {{SpecName('DOM2 Events','##Events-Event-initEvent','Event.initEvent()')}} | {{Spec2('DOM2 Events')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.Event.initEvent")}} + +## Voir aussi + +- Le constructeur à utiliser à la place de cette méthode dépréciée : {{domxref("Event.Event","Event()")}}. Des constructeurs plus spécifiques peuvent aussi être utilisés. diff --git a/files/fr/web/api/event/istrusted/index.md b/files/fr/web/api/event/istrusted/index.md index 0267223d10..cdb9b49165 100644 --- a/files/fr/web/api/event/istrusted/index.md +++ b/files/fr/web/api/event/istrusted/index.md @@ -9,53 +9,60 @@ tags: - Référence(2) translation_of: Web/API/Event/isTrusted --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<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> +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. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var bool = event.isTrusted; -</pre> + var bool = event.isTrusted; -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre> if (e.isTrusted) { - /* The event is trusted. */ - } else { - /* The event is not trusted. */ - } -</pre> + if (e.isTrusted) { + /* The event is trusted. */ + } else { + /* The event is not trusted. */ + } -<h2 id="Spécifications">Spécifications</h2> +## Spécifications <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> + <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> +## Compatibilité des navigateurs -<p>{{Compat("api.Event.isTrusted")}}</p> +{{Compat("api.Event.isTrusted")}} diff --git a/files/fr/web/api/event/originaltarget/index.md b/files/fr/web/api/event/originaltarget/index.md index 810c8276a5..39e7d7b781 100644 --- a/files/fr/web/api/event/originaltarget/index.md +++ b/files/fr/web/api/event/originaltarget/index.md @@ -10,28 +10,26 @@ tags: - origine translation_of: Web/API/Event/originalTarget --- -<div>{{ ApiRef("DOM") }} {{Non-standard_header}}</div> +{{ ApiRef("DOM") }} {{Non-standard_header}} -<p>La cible d'origine de l'évènement avant tout reciblage. (spécifique à Mozilla)</p> +La cible d'origine de l'évènement avant tout reciblage. (spécifique à Mozilla) -<p>En présence de contenu anonyme <a href="/fr/docs/XBL">XBL</a>, ce sera le nœud anonyme sur lequel l'événement a été déclenché à l'origine. Voir <a href="/fr/docs/Mozilla/Tech/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting">Anonymous Content#Event_Flow_and_Targeting</a> pour plus de détails.</p> +En présence de contenu anonyme [XBL](/fr/docs/XBL), ce sera le nœud anonyme sur lequel l'événement a été déclenché à l'origine. Voir [Anonymous Content#Event_Flow_and_Targeting](/fr/docs/Mozilla/Tech/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting) pour plus de détails. -<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> +**Note :** `originalTarget` peut aussi être un contenu anonyme natif (voir {{Bug("208427")}}), dans ce cas, il est inutile pour le code non privilégié. -<p>Voir aussi <a href="/fr/docs/Web/API/Event/Comparaison_des_cibles_d_%C3%A9v%C3%A8nements">Comparaison des cibles d'évènements.</a></p> +Voir aussi [Comparaison des cibles d'évènements.](/fr/docs/Web/API/Event/Comparaison_des_cibles_d_%C3%A9v%C3%A8nements) -<h2 id="Example">Exemple</h2> +## Exemple -<p><em>Besoin d'un exemple qui ait du sens ici. ^^</em></p> +_Besoin d'un exemple qui ait du sens ici. ^^_ -<h2 id="Specification">Spécification</h2> +## Spécification -<p>C'est une propriété propre à Mozilla. Définie dans {{Source("/dom/public/idl/events/nsIDOMNSEvent.idl")}}</p> +C'est une propriété propre à Mozilla. Définie dans {{Source("/dom/public/idl/events/nsIDOMNSEvent.idl")}} -<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> +Cette propriété d'évènements **n'est pas définie** dans la spécification [W3.org DOM niveau 2 Events](http://www.w3.org/TR/DOM-Level-2-Events/events.html) -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs - - -<p>{{Compat("api.Event.originalTarget")}}</p> +{{Compat("api.Event.originalTarget")}} diff --git a/files/fr/web/api/event/preventdefault/index.md b/files/fr/web/api/event/preventdefault/index.md index db435939bb..7e8b7057f4 100644 --- a/files/fr/web/api/event/preventdefault/index.md +++ b/files/fr/web/api/event/preventdefault/index.md @@ -10,86 +10,98 @@ tags: translation_of: Web/API/Event/preventDefault browser-compat: api.Event.preventDefault --- -<div>{{apiref("DOM")}}</div> +{{apiref("DOM")}} -<p>La méthode <strong><code>preventDefault()</code></strong>, rattachée à l'interface <a href="/fr/docs/Web/API/Event"><code>Event</code></a>, indique à l'agent utilisateur que si l'évènement n'est pas explicitement géré, l'action par défaut ne devrait pas être exécutée comme elle l'est normalement.</p> +La méthode **`preventDefault()`**, rattachée à l'interface [`Event`](/fr/docs/Web/API/Event), indique à l'agent utilisateur que si l'évènement n'est pas explicitement géré, l'action par défaut ne devrait pas être exécutée comme elle l'est normalement. -<p>L'évènement continue sa propagation habituelle à moins qu'un des gestionnaires d'évènement invoque <a href="/fr/docs/Web/API/Event/stopPropagation"><code>stopPropagation()</code></a> ou <a href="/fr/docs/Web/API/Event/stopImmediatePropagation"><code>stopImmediatePropagation()</code></a> pour interrompre la propagation.</p> +L'évènement continue sa propagation habituelle à moins qu'un des gestionnaires d'évènement invoque [`stopPropagation()`](/fr/docs/Web/API/Event/stopPropagation) ou [`stopImmediatePropagation()`](/fr/docs/Web/API/Event/stopImmediatePropagation) pour interrompre la propagation. -<p>Comme indiqué ci-après, appeler <code><strong>preventDefault()</strong></code> n'aura aucun effet pour un évènement qui ne peut être annulé (comme ceux émis par <a href="/fr/docs/Web/API/EventTarget/dispatchEvent"><code>EventTarget.dispatchEvent()</code></a> sans avoir indiqué <code>cancelable: true</code>).</p> +Comme indiqué ci-après, appeler **`preventDefault()`** n'aura aucun effet pour un évènement qui ne peut être annulé (comme ceux émis par [`EventTarget.dispatchEvent()`](/fr/docs/Web/API/EventTarget/dispatchEvent) sans avoir indiqué `cancelable: true`). -<h2 id="syntax">Syntaxe</h2> +## Syntaxe -<pre class="brush: js"><var>event</var>.preventDefault();</pre> +```js +event.preventDefault(); +``` -<h2 id="examples">Exemples</h2> +## Exemples -<h3 id="blocking_default_click_handling">Bloquer la gestion du clic par défaut</h3> +### Bloquer la gestion du clic par défaut -<p>Lorsqu'on clique sur une case à cocher, par défaut, cela coche ou décoche la case. Dans cet exemple, on illustre comment bloquer ce comportement par défaut :</p> +Lorsqu'on clique sur une case à cocher, par défaut, cela coche ou décoche la case. Dans cet exemple, on illustre comment bloquer ce comportement par défaut : -<h4 id="javascript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">document.querySelector("#id-checkbox").addEventListener("click", function(event) { +```js +document.querySelector("#id-checkbox").addEventListener("click", function(event) { console.log("Désolé ! preventDefault() ne vous laissera pas cocher ceci."); event.preventDefault(); -}, false);</pre> +}, false); +``` -<h4 id="html">HTML</h4> +#### HTML -<pre class="brush: html"><p>Essayez de cliquer sur la case à cocher.</p> +```html +<p>Essayez de cliquer sur la case à cocher.</p> -<form> - <label for="id-checkbox">Checkbox:</label> - <input type="checkbox" id="id-checkbox"/> -</form></pre> +<form> + <label for="id-checkbox">Checkbox:</label> + <input type="checkbox" id="id-checkbox"/> +</form> +``` -<h4 id="result">Résultat</h4> +#### Résultat -<p>{{EmbedLiveSample("blocking_default_click_handling")}}</p> +{{EmbedLiveSample("blocking_default_click_handling")}} -<h3 id="stopping_keystrokes_from_reaching_an_edit_field">Empêcher les pressions du clavier sur un champ texte</h3> +### Empêcher les pressions du clavier sur un champ texte -<p>Dans l'exemple qui suit, on démontre comment empêcher d'écrire au clavier dans un champ texte grâce à <code>preventDefault()</code>.</p> +Dans l'exemple qui suit, on démontre comment empêcher d'écrire au clavier dans un champ texte grâce à `preventDefault()`. -<h4 id="html_2">HTML</h4> +#### HTML -<p>Voici le formulaire contenant le champ texte :</p> +Voici le formulaire contenant le champ texte : -<pre class="brush: html"><form> - <label>Un champ texte - <input type="text" id="mon-champ-texte"> - </label> -</form></pre> +```html +<form> + <label>Un champ texte + <input type="text" id="mon-champ-texte"> + </label> +</form> +``` -<h4 id="JavaScript_2">JavaScript</h4> +#### JavaScript -<p>Et voici le fragment de code JavaScript qui s'occupe de la logique principale. On commence par enregistrer un gestionnaire d'évènement pour <a href="/fr/docs/Web/API/Element/keypress_event"><code>keypress</code></a> :</p> +Et voici le fragment de code JavaScript qui s'occupe de la logique principale. On commence par enregistrer un gestionnaire d'évènement pour [`keypress`](/fr/docs/Web/API/Element/keypress_event) : -<pre class="brush: js">let monChampTexte = document.getElementById('mon-champ-texte'); -monChampTexte.addEventListener('keypress', bloqueSaisie, false);</pre> +```js +let monChampTexte = document.getElementById('mon-champ-texte'); +monChampTexte.addEventListener('keypress', bloqueSaisie, false); +``` -<p>La fonction <code>bloqueSaisie()</code> empêche toute saisie au clavier :</p> +La fonction `bloqueSaisie()` empêche toute saisie au clavier : -<pre class="brush: js">function bloqueSaisie(evt) { +```js +function bloqueSaisie(evt) { evt.preventDefault(); console.log("Une saisie a été empêchée."); -};</pre> +}; +``` -<h4 id="result_2">Résultat</h4> +#### Résultat -<p>{{EmbedLiveSample('stopping_keystrokes_from_reaching_an_edit_field', 600, 200)}}</p> +{{EmbedLiveSample('stopping_keystrokes_from_reaching_an_edit_field', 600, 200)}} -<h2 id="notes">Notes</h2> +## Notes -<p>Invoquer <code>preventDefault()</code> à n'importe quel moment du cycle de vie d'un évènement annulera cet évènement. Cela signifie que toute action par défaut, normalement exécutée par le navigateur, n'aura pas lieu.</p> +Invoquer `preventDefault()` à n'importe quel moment du cycle de vie d'un évènement annulera cet évènement. Cela signifie que toute action par défaut, normalement exécutée par le navigateur, n'aura pas lieu. -<p>On peut utiliser la propriété <a href="/fr/docs/Web/API/Event/cancelable"><code>Event.cancelable</code></a> afin de vérifier si un évènement est annulable. Invoquer <code>preventDefault()</code> sur un évènement non-annulable n'aura aucun effet.</p> +On peut utiliser la propriété [`Event.cancelable`](/fr/docs/Web/API/Event/cancelable) afin de vérifier si un évènement est annulable. Invoquer `preventDefault()` sur un évènement non-annulable n'aura aucun effet. -<h2 id="specifications">Spécifications</h2> +## Spécifications -<p>{{Specifications}}</p> +{{Specifications}} -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat}}</p> +{{Compat}} diff --git a/files/fr/web/api/event/returnvalue/index.md b/files/fr/web/api/event/returnvalue/index.md index 97654470d7..246177dc19 100644 --- a/files/fr/web/api/event/returnvalue/index.md +++ b/files/fr/web/api/event/returnvalue/index.md @@ -9,24 +9,21 @@ tags: - évènements translation_of: Web/API/Event/returnValue --- -<p>{{APIRef("DOM Events")}}{{Non-standard_header}}{{ Deprecated_header() }}</p> +{{APIRef("DOM Events")}}{{Non-standard_header}}{{ Deprecated_header() }} -<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> +La propriété **`Event.returnValue`** indique si l'action par défaut pour cet évènement a été empêchée ou non. Elle est définie à `true` (_vrai_) par défaut, permettant à l'action par défaut de se produire. La définition de cette propriété à `false` (_faux_) empêche le déclenchement de l'action par défaut. -<div class="note"> -<p><strong>Note :</strong> Utilisez {{domxref("Event.preventDefault()")}} à la place de cette méthode non standard.</p> -</div> +> **Note :** Utilisez {{domxref("Event.preventDefault()")}} à la place de cette méthode non standard. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">event.returnValue = <em>bool;</em> -<em>var bool</em> = event.returnValue; -</pre> + event.returnValue = bool; + var bool = event.returnValue; -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<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> +Bien qu'elle ait été inclue [dans l'ancien brouillon de travail de W3C DOM niveau 2](https://www.w3.org/TR/1999/WD-DOM-Level-2-19990304/events.html#attribute-returnValue)_, cette propriété ne fait partie d'aucune spécification._ -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Event.returnValue")}}</p> +{{Compat("api.Event.returnValue")}} diff --git a/files/fr/web/api/event/srcelement/index.md b/files/fr/web/api/event/srcelement/index.md index 6b0ab681b4..d6684e5cbe 100644 --- a/files/fr/web/api/event/srcelement/index.md +++ b/files/fr/web/api/event/srcelement/index.md @@ -9,24 +9,20 @@ tags: - Éléments SRC translation_of: Web/API/Event/srcElement --- -<p>{{ApiRef("DOM")}}</p> +{{ApiRef("DOM")}} -<p>{{ Non-standard_header() }}</p> +{{ Non-standard_header() }} -<p><strong><code>Event.srcElement</code></strong> est un alias propriétaire (implémenté dans Internet Explorer) pour la propriété standard {{domxref("Event.target")}} qui commence à être pris en charge dans d'autres navigateurs à des fins de compatibilité Web.</p> +**`Event.srcElement`** est un alias propriétaire (implémenté dans Internet Explorer) pour la propriété standard {{domxref("Event.target")}} qui commence à être pris en charge dans d'autres navigateurs à des fins de compatibilité Web. -<h2 id="Spécification">Spécification</h2> +## Spécification -<p>Ne fait partie d'aucune spécification.</p> +Ne fait partie d'aucune spécification. -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs +{{Compat("api.Event.srcElement")}} +## Voir aussi -<p>{{Compat("api.Event.srcElement")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{domxref("Window.event")}}</li> -</ul> +- {{domxref("Window.event")}} diff --git a/files/fr/web/api/event/stopimmediatepropagation/index.md b/files/fr/web/api/event/stopimmediatepropagation/index.md index 8770b808a0..8bd412ca1b 100644 --- a/files/fr/web/api/event/stopimmediatepropagation/index.md +++ b/files/fr/web/api/event/stopimmediatepropagation/index.md @@ -8,35 +8,22 @@ tags: - Reference translation_of: Web/API/Event/stopImmediatePropagation --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<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> +La méthode **`stopImmediatePropagation()`**, 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>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> +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 `stopImmediatePropagation()` est appelé pendant un de ces appels, les gestionnaires restants ne sont pas invoqués. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>event</em>.stopImmediatePropagation();</pre> + event.stopImmediatePropagation(); -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<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> +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | +| {{SpecName('DOM WHATWG', '#dom-event-stopimmediatepropagation', 'Event.stopImmediatePropagation()')}} | {{Spec2('DOM WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Event.stopImmediatePropagation")}}</p> +{{Compat("api.Event.stopImmediatePropagation")}} diff --git a/files/fr/web/api/event/stoppropagation/index.md b/files/fr/web/api/event/stoppropagation/index.md index 1f8dd6e09f..193691c866 100644 --- a/files/fr/web/api/event/stoppropagation/index.md +++ b/files/fr/web/api/event/stoppropagation/index.md @@ -9,51 +9,32 @@ tags: - Reference translation_of: Web/API/Event/stopPropagation --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<p>Évite que l'évènement courant ne se propage plus loin dans les phases de capture et de déploiement.</p> +Évite que l'évènement courant ne se propage plus loin dans les phases de capture et de déploiement. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>event</em>.stopPropagation();</pre> + event.stopPropagation(); -<h2 id="Example">Exemple</h2> +## Exemple -<p>Voir la section Exemple 5 : <a href="/fr/docs/Web/API/Document_Object_Model/Exemples#Exemple_5_:_propagation_d%27%C3%A9v%C3%A8nements">Propagation d'évènements</a> dans le chapitre Exemples pour un exemple plus détaillé de cette méthode et de la propagation d'évènements dans le DOM.</p> +Voir la section Exemple 5 : [Propagation d'évènements](/fr/docs/Web/API/Document_Object_Model/Exemples#Exemple_5_:_propagation_d%27%C3%A9v%C3%A8nements) dans le chapitre Exemples pour un exemple plus détaillé de cette méthode et de la propagation d'évènements dans le DOM. -<h2 id="Notes">Notes</h2> +## Notes -<p>Voir <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-capture">DOM specification</a> (en) pour une explication du flux d'évènements. (Une illustration est disponible dans le brouillon <a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM Level 3 Event draft</a> (en)).</p> +Voir [DOM specification](http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-capture) (en) pour une explication du flux d'évènements. (Une illustration est disponible dans le brouillon [DOM Level 3 Event draft](http://www.w3.org/TR/DOM-Level-3-Events/#event-flow) (en)). -<p><a href="/fr/docs/Web/API/Event/preventDefault">preventDefault</a> est une méthode complémentaire qui peut être utilisée pour empêcher l'action par défaut de l'évènement.</p> +[preventDefault](/fr/docs/Web/API/Event/preventDefault) est une méthode complémentaire qui peut être utilisée pour empêcher l'action par défaut de l'évènement. -<h2 id="Specification">Spécification</h2> +## Spécification -<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> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName("DOM WHATWG", "#dom-event-stoppropagation", "Event.stopPropagation()")}} | {{Spec2("DOM WHATWG")}} | | +| {{SpecName("DOM4", "#dom-event-stoppropagation", "Event.stopPropagation()")}} | {{Spec2("DOM4")}} | | +| {{SpecName("DOM2 Events", "#Events-Event-stopPropagation", "Event.stopPropagation()")}} | {{Spec2("DOM2 Events")}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Event.stopPropagation")}}</p>
\ No newline at end of file +{{Compat("api.Event.stopPropagation")}} diff --git a/files/fr/web/api/event/target/index.md b/files/fr/web/api/event/target/index.md index 2ab12c5de0..3e60e62d4a 100644 --- a/files/fr/web/api/event/target/index.md +++ b/files/fr/web/api/event/target/index.md @@ -9,19 +9,20 @@ tags: - Propriétés translation_of: Web/API/Event/target --- -<p>{{ ApiRef("DOM") }}</p> +{{ ApiRef("DOM") }} -<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> +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. -<h2 id="Example">Syntaxe</h2> +## Syntaxe -<pre><code><code>laCible = event.target</code></code></pre> + laCible = event.target -<h2 id="Example">Exemple</h2> +## Exemple -<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> +La propriété `event.target` peut être utilisée pour implémenter la **délégation d'événements**. -<pre class="brush: js">// Produit une liste +```js +// Produit une liste var ul = document.createElement('ul'); document.body.appendChild(ul); @@ -31,59 +32,40 @@ ul.appendChild(li1); ul.appendChild(li2); function hide(e){ - // e.target se réfère à l'élément <li> cliqué - // C'est différent de e.currentTarget qui doit faire référence au parent <ul> dans ce contexte + // e.target se réfère à l'élément <li> cliqué + // C'est différent de e.currentTarget qui doit faire référence au parent <ul> dans ce contexte e.target.style.visibility = 'hidden'; } // Attache l'écouteur à la liste -// Il se déclenche pour chaque <li> clické -ul.addEventListener('click', hide, false);</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<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 <code>event.target</code>.</p> - -<pre class="brush: js">function hide(e) { +// Il se déclenche pour chaque <li> clické +ul.addEventListener('click', hide, false); +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | +| {{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}} | {{Spec2("DOM WHATWG")}} | | +| {{SpecName("DOM4", "#dom-event-target", "Event.target")}} | {{Spec2("DOM4")}} | | +| {{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}} | {{Spec2("DOM2 Events")}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.Event.target")}} + +## Notes concernant la compatibilité + +Sur IE6-8, le modèle d'événement est différent. Les écouteurs sont attachés avec la méthode non standard `{{domxref('EventTarget.attachEvent')}}` . Dans ce modèle, l'objet événement a une propriété `{{domxref('Event.srcElement')}}`, à la place de la propriété `target`, avec la même sémantique que `event.target`. + +```js +function hide(e) { // Support IE6-8 var target = e.target || e.srcElement; target.style.visibility = 'hidden'; } -</pre> +``` -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<p><a href="/fr/docs/Web/API/Event/Comparaison_des_cibles_d_%C3%A9v%C3%A8nements">Comparaison des cibles d'évènements</a></p> +[Comparaison des cibles d'évènements](/fr/docs/Web/API/Event/Comparaison_des_cibles_d_%C3%A9v%C3%A8nements) diff --git a/files/fr/web/api/event/timestamp/index.md b/files/fr/web/api/event/timestamp/index.md index c4bc3ffe6a..f053b897e7 100644 --- a/files/fr/web/api/event/timestamp/index.md +++ b/files/fr/web/api/event/timestamp/index.md @@ -9,53 +9,55 @@ tags: - temps translation_of: Web/API/Event/timeStamp --- -<div>{{ApiRef("DOM")}}</div> +{{ApiRef("DOM")}} -<p>Retourne le temps (en millisecondes) à partir duquel l'événement a été créé.</p> +Retourne le temps (en millisecondes) à partir duquel l'événement a été créé. -<div class="note"> -<p><strong>Note :</strong> Cette propriété fonctionne seulement si le système d'évènements le prend en charge pour des évènements particuliers.</p> -</div> +> **Note :** Cette propriété fonctionne seulement si le système d'évènements le prend en charge pour des évènements particuliers. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">event.timeStamp -</pre> + event.timeStamp -<h3 id="Examples">Valeur</h3> +### Valeur -<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> +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>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> +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. -<h2 id="Examples">Exemple</h2> +## Exemple -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><p> +```html +<p> Focus this iframe and press any key to get the current timestamp for the keypress event. -</p> -<p>timeStamp: <span id="time">-</span></p></pre> +</p> +<p>timeStamp: <span id="time">-</span></p> +``` -<h3 id="JavaScript">JavaScript</h3> +### JavaScript -<pre class="brush: js">function getTime(event) { +```js +function getTime(event) { var time = document.getElementById("time"); time.firstChild.nodeValue = event.timeStamp; } -document.body.addEventListener("keypress", getTime);</pre> +document.body.addEventListener("keypress", getTime); +``` -<h3 id="Résultat">Résultat</h3> +### Résultat -<p>{{EmbedLiveSample("Example", "100%", 100)}}</p> +{{EmbedLiveSample("Example", "100%", 100)}} -<h2 id="Notes">Précision du temps réduite</h2> +## Précision du temps réduite -<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> +Pour offrir une protection contre les attaques de synchronisation et les empreintes digitales, la précision de `event.timeStamp` peut être arrondie en fonction des paramètres du navigateur. +Dans Firefox, la préférence `privacy.reduceTimerPrecision` est activée et à 20 us par défaut dans Firefox 59 ; en version 60 ce sera 2 ms. -<pre class="brush: js">// Précision du temps réduite (2ms) dans Firefox 60 +```js +// Précision du temps réduite (2ms) dans Firefox 60 event.timeStamp; // 1519211809934 // 1519211810362 @@ -68,41 +70,19 @@ event.timeStamp; // 1519129853500 // 1519129858900 // 1519129864400 -// ...</pre> - -<p>Dans Firefox, vous pouvez aussi activer <code>privacy.resistFingerprinting</code>, la précision sera de 100 ms ou la valeur de <code>privacy.resistFingerprinting.reduceTimerPrecision.microseconds</code>, selon la valeur la plus grande.</p> - -<h2 id="Specifications">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> +// ... +``` + +Dans Firefox, vous pouvez aussi activer `privacy.resistFingerprinting`, la précision sera de 100 ms ou la valeur de `privacy.resistFingerprinting.reduceTimerPrecision.microseconds`, selon la valeur la plus grande. + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | +| {{SpecName('DOM WHATWG', '#dom-event-timestamp', 'Event.timeStamp')}} | {{ Spec2('DOM WHATWG') }} | | +| {{SpecName('DOM4', '#dom-event-timestamp', 'Event.timeStamp')}} | {{ Spec2('DOM4') }} | | +| {{SpecName('DOM2 Events', '#Events-Event-timeStamp', 'Event.timeStamp')}} | {{ Spec2('DOM2 Events') }} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.Event.timeStamp")}} diff --git a/files/fr/web/api/event/type/index.md b/files/fr/web/api/event/type/index.md index 7931a24a5a..854f67f717 100644 --- a/files/fr/web/api/event/type/index.md +++ b/files/fr/web/api/event/type/index.md @@ -9,29 +9,29 @@ tags: - Type translation_of: Web/API/Event/type --- -<p>{{APIRef}}</p> +{{APIRef}} -<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> +La propriété en lecture seule **Event.type** retourne une chaîne de caractères (_string_) 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 `click`, `load` ou `error`. -<p>L'argument <code><em>event</em></code> de {{ domxref("EventTarget.addEventListener()") }} et {{ domxref("EventTarget.removeEventListener()") }} n'est pas sensible à la casse.</p> +L'argument `event` de {{ domxref("EventTarget.addEventListener()") }} et {{ domxref("EventTarget.removeEventListener()") }} n'est pas sensible à la casse. -<p>Pour une liste des types d'événements disponibles, aller voir la page <a href="/fr/docs/Web/Events">Référence des évènements</a>.</p> +Pour une liste des types d'événements disponibles, aller voir la page [Référence des évènements](/fr/docs/Web/Events). -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">event.type -</pre> + event.type -<h2 id="Example">Exemples</h2> +## Exemples -<pre class="brush: html"><!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="utf-8"> +```html +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> - <title>Event.type Example</title> + <title>Event.type Example</title> - <script> + <script> var currEvent; function getEvtType(evt) { console.group(); @@ -45,7 +45,7 @@ translation_of: Web/API/Event/type } //Évènements du clavier - document.addEventListener("keypress", getEvtType, false); //[second] + document.addEventListener("keypress", getEvtType, false); //[second] document.addEventListener("keydown", getEvtType, false); //premier document.addEventListener("keyup", getEvtType, false); //troisième @@ -56,47 +56,29 @@ translation_of: Web/API/Event/type document.addEventListener("mousedown", getEvtType, false); //premier document.addEventListener("mouseup", getEvtType, false); //second - </script> -</head> + </script> +</head> -<body> +<body> -<p>Press any key or click the mouse to get the event type.</p> -<p>Event type: <span id="Etype" style="color:red">-</span></p> +<p>Press any key or click the mouse to get the event type.</p> +<p>Event type: <span id="Etype" style="color:red">-</span></p> -</body> -</html></pre> +</body> +</html> +``` -<h3 id="Specifications">Résultat</h3> +### Résultat -<p>{{EmbedLiveSample('Example')}}</p> +{{EmbedLiveSample('Example')}} -<h2 id="Specifications">Spécifications</h2> +## Spécifications -<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> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | +| {{SpecName('DOM WHATWG', '#dom-event-type', 'Event.type')}} | {{ Spec2('DOM WHATWG') }} | | +| {{SpecName('DOM2 Events', '#Events-Event-type', 'Event.type')}} | {{ Spec2('DOM2 Events') }} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs - - -<p>{{Compat("api.Event.type")}}</p> +{{Compat("api.Event.type")}} |