From c05efa8d7ae464235cf83d7c0956e42dc6974103 Mon Sep 17 00:00:00 2001 From: julieng Date: Sat, 2 Oct 2021 17:20:14 +0200 Subject: move *.html to *.md --- files/fr/web/api/event/bubbles/index.html | 83 --------- files/fr/web/api/event/bubbles/index.md | 83 +++++++++ files/fr/web/api/event/cancelable/index.html | 88 --------- files/fr/web/api/event/cancelable/index.md | 88 +++++++++ files/fr/web/api/event/cancelbubble/index.html | 49 ------ files/fr/web/api/event/cancelbubble/index.md | 49 ++++++ .../event/comparison_of_event_targets/index.html | 169 ------------------ .../api/event/comparison_of_event_targets/index.md | 169 ++++++++++++++++++ files/fr/web/api/event/currenttarget/index.html | 92 ---------- files/fr/web/api/event/currenttarget/index.md | 92 ++++++++++ files/fr/web/api/event/defaultprevented/index.html | 58 ------ files/fr/web/api/event/defaultprevented/index.md | 58 ++++++ files/fr/web/api/event/event/index.html | 73 -------- files/fr/web/api/event/event/index.md | 73 ++++++++ files/fr/web/api/event/eventphase/index.html | 196 --------------------- files/fr/web/api/event/eventphase/index.md | 196 +++++++++++++++++++++ .../api/event/explicitoriginaltarget/index.html | 49 ------ .../web/api/event/explicitoriginaltarget/index.md | 49 ++++++ files/fr/web/api/event/index.html | 167 ------------------ files/fr/web/api/event/index.md | 167 ++++++++++++++++++ files/fr/web/api/event/initevent/index.html | 85 --------- files/fr/web/api/event/initevent/index.md | 85 +++++++++ files/fr/web/api/event/istrusted/index.html | 61 ------- files/fr/web/api/event/istrusted/index.md | 61 +++++++ files/fr/web/api/event/originaltarget/index.html | 37 ---- files/fr/web/api/event/originaltarget/index.md | 37 ++++ files/fr/web/api/event/preventdefault/index.html | 95 ---------- files/fr/web/api/event/preventdefault/index.md | 95 ++++++++++ files/fr/web/api/event/returnvalue/index.html | 32 ---- files/fr/web/api/event/returnvalue/index.md | 32 ++++ files/fr/web/api/event/srcelement/index.html | 32 ---- files/fr/web/api/event/srcelement/index.md | 32 ++++ .../api/event/stopimmediatepropagation/index.html | 42 ----- .../api/event/stopimmediatepropagation/index.md | 42 +++++ files/fr/web/api/event/stoppropagation/index.html | 59 ------- files/fr/web/api/event/stoppropagation/index.md | 59 +++++++ files/fr/web/api/event/target/index.html | 89 ---------- files/fr/web/api/event/target/index.md | 89 ++++++++++ files/fr/web/api/event/timestamp/index.html | 108 ------------ files/fr/web/api/event/timestamp/index.md | 108 ++++++++++++ files/fr/web/api/event/type/index.html | 102 ----------- files/fr/web/api/event/type/index.md | 102 +++++++++++ 42 files changed, 1766 insertions(+), 1766 deletions(-) delete mode 100644 files/fr/web/api/event/bubbles/index.html create mode 100644 files/fr/web/api/event/bubbles/index.md delete mode 100644 files/fr/web/api/event/cancelable/index.html create mode 100644 files/fr/web/api/event/cancelable/index.md delete mode 100644 files/fr/web/api/event/cancelbubble/index.html create mode 100644 files/fr/web/api/event/cancelbubble/index.md delete mode 100644 files/fr/web/api/event/comparison_of_event_targets/index.html create mode 100644 files/fr/web/api/event/comparison_of_event_targets/index.md delete mode 100644 files/fr/web/api/event/currenttarget/index.html create mode 100644 files/fr/web/api/event/currenttarget/index.md delete mode 100644 files/fr/web/api/event/defaultprevented/index.html create mode 100644 files/fr/web/api/event/defaultprevented/index.md delete mode 100644 files/fr/web/api/event/event/index.html create mode 100644 files/fr/web/api/event/event/index.md delete mode 100644 files/fr/web/api/event/eventphase/index.html create mode 100644 files/fr/web/api/event/eventphase/index.md delete mode 100644 files/fr/web/api/event/explicitoriginaltarget/index.html create mode 100644 files/fr/web/api/event/explicitoriginaltarget/index.md delete mode 100644 files/fr/web/api/event/index.html create mode 100644 files/fr/web/api/event/index.md delete mode 100644 files/fr/web/api/event/initevent/index.html create mode 100644 files/fr/web/api/event/initevent/index.md delete mode 100644 files/fr/web/api/event/istrusted/index.html create mode 100644 files/fr/web/api/event/istrusted/index.md delete mode 100644 files/fr/web/api/event/originaltarget/index.html create mode 100644 files/fr/web/api/event/originaltarget/index.md delete mode 100644 files/fr/web/api/event/preventdefault/index.html create mode 100644 files/fr/web/api/event/preventdefault/index.md delete mode 100644 files/fr/web/api/event/returnvalue/index.html create mode 100644 files/fr/web/api/event/returnvalue/index.md delete mode 100644 files/fr/web/api/event/srcelement/index.html create mode 100644 files/fr/web/api/event/srcelement/index.md delete mode 100644 files/fr/web/api/event/stopimmediatepropagation/index.html create mode 100644 files/fr/web/api/event/stopimmediatepropagation/index.md delete mode 100644 files/fr/web/api/event/stoppropagation/index.html create mode 100644 files/fr/web/api/event/stoppropagation/index.md delete mode 100644 files/fr/web/api/event/target/index.html create mode 100644 files/fr/web/api/event/target/index.md delete mode 100644 files/fr/web/api/event/timestamp/index.html create mode 100644 files/fr/web/api/event/timestamp/index.md delete mode 100644 files/fr/web/api/event/type/index.html create mode 100644 files/fr/web/api/event/type/index.md (limited to 'files/fr/web/api/event') diff --git a/files/fr/web/api/event/bubbles/index.html b/files/fr/web/api/event/bubbles/index.html deleted file mode 100644 index 6c9a6b68fc..0000000000 --- a/files/fr/web/api/event/bubbles/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Event.bubbles -slug: Web/API/Event/bubbles -tags: - - API - - DOM - - Propagation - - Propriétés - - évènements -translation_of: Web/API/Event/bubbles ---- -

{{ ApiRef("DOM") }}

- -

Indique si l'événement donné se propage à travers le DOM ou non.

- -
-

Note : Voir Propagation et capture des évènements pour plus d'informations sur la propagation.

-
- -

Syntaxe

- -
event.bubbles
- -

Valeur

- -

Retourne un booléen dont la valeur est true (vraie) si l'événement se propage à travers le DOM.

- -

Exemple

- -
function goInput(e) {
-  // vérifie la propagation et
-  if (!e.bubbles) {
-     // la lance si elle ne l'a pas été
-     passItOn(e);
-  }
-  // déjà propagé
-  doOutput(e)
-}
- -
-

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.

-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{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.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Event.bubbles")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/event/bubbles/index.md b/files/fr/web/api/event/bubbles/index.md new file mode 100644 index 0000000000..6c9a6b68fc --- /dev/null +++ b/files/fr/web/api/event/bubbles/index.md @@ -0,0 +1,83 @@ +--- +title: Event.bubbles +slug: Web/API/Event/bubbles +tags: + - API + - DOM + - Propagation + - Propriétés + - évènements +translation_of: Web/API/Event/bubbles +--- +

{{ ApiRef("DOM") }}

+ +

Indique si l'événement donné se propage à travers le DOM ou non.

+ +
+

Note : Voir Propagation et capture des évènements pour plus d'informations sur la propagation.

+
+ +

Syntaxe

+ +
event.bubbles
+ +

Valeur

+ +

Retourne un booléen dont la valeur est true (vraie) si l'événement se propage à travers le DOM.

+ +

Exemple

+ +
function goInput(e) {
+  // vérifie la propagation et
+  if (!e.bubbles) {
+     // la lance si elle ne l'a pas été
+     passItOn(e);
+  }
+  // déjà propagé
+  doOutput(e)
+}
+ +
+

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.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{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.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Event.bubbles")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/event/cancelable/index.html b/files/fr/web/api/event/cancelable/index.html deleted file mode 100644 index 3f3b86744b..0000000000 --- a/files/fr/web/api/event/cancelable/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Event.cancelable -slug: Web/API/Event/cancelable -tags: - - API - - Annulable - - DOM - - Propriétés - - évènements -translation_of: Web/API/Event/cancelable ---- -
{{ ApiRef("DOM") }}
- -

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.

- -

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().

- -

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, scroll ou beforeunload empêcherait l'utilisateur de cliquer sur un élément, de faire défiler la page ou de la quitter, respectivement.

- -

Syntaxe

- -
bool = event.cancelable
-
- - - -

Exemple

- -

Par exemple, les vendeurs de navigateurs proposent que l'évènement wheel puisse être annulable seulement  la première fois que l'écouteur est appelé (en) ; les évènements  wheel suivants ne peuvent être annulés.

- -
function preventScrollWheel(event) {
-  if (typeof event.cancelable !== 'boolean' || event.cancelable) {
-    // L'événement peut être annulé, alors nous le faisons.
-    event.preventDefault();
-  } else {
-    // L'évènement ne peut pas être annulé, il n'est donc pas sûr
-    // d'appeler preventDefault() sur lui.
-    console.warn(`The following event couldn't be canceled:`);
-    console.dir(event);
-  }
-}
-
-document.addEventListener('wheel', preventCancelableEvents);
- -

 

- -

Notes

- -

Si l'événement peut être annulé, ou non, est déterminé au moment de l'initialisation de celui-ci.

- -

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.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{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

- - - -

{{Compat("api.Event.cancelable")}}

diff --git a/files/fr/web/api/event/cancelable/index.md b/files/fr/web/api/event/cancelable/index.md new file mode 100644 index 0000000000..3f3b86744b --- /dev/null +++ b/files/fr/web/api/event/cancelable/index.md @@ -0,0 +1,88 @@ +--- +title: Event.cancelable +slug: Web/API/Event/cancelable +tags: + - API + - Annulable + - DOM + - Propriétés + - évènements +translation_of: Web/API/Event/cancelable +--- +
{{ ApiRef("DOM") }}
+ +

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.

+ +

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().

+ +

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, scroll ou beforeunload empêcherait l'utilisateur de cliquer sur un élément, de faire défiler la page ou de la quitter, respectivement.

+ +

Syntaxe

+ +
bool = event.cancelable
+
+ + + +

Exemple

+ +

Par exemple, les vendeurs de navigateurs proposent que l'évènement wheel puisse être annulable seulement  la première fois que l'écouteur est appelé (en) ; les évènements  wheel suivants ne peuvent être annulés.

+ +
function preventScrollWheel(event) {
+  if (typeof event.cancelable !== 'boolean' || event.cancelable) {
+    // L'événement peut être annulé, alors nous le faisons.
+    event.preventDefault();
+  } else {
+    // L'évènement ne peut pas être annulé, il n'est donc pas sûr
+    // d'appeler preventDefault() sur lui.
+    console.warn(`The following event couldn't be canceled:`);
+    console.dir(event);
+  }
+}
+
+document.addEventListener('wheel', preventCancelableEvents);
+ +

 

+ +

Notes

+ +

Si l'événement peut être annulé, ou non, est déterminé au moment de l'initialisation de celui-ci.

+ +

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.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{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

+ + + +

{{Compat("api.Event.cancelable")}}

diff --git a/files/fr/web/api/event/cancelbubble/index.html b/files/fr/web/api/event/cancelbubble/index.html deleted file mode 100644 index 07d891daed..0000000000 --- a/files/fr/web/api/event/cancelbubble/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Event.cancelBubble -slug: Web/API/Event/cancelBubble -tags: - - API - - Annulation - - DOM - - Evènement - - Propagation - - Propriétés -translation_of: Web/API/Event/cancelBubble ---- -

{{APIRef("DOM Events")}}

- -

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. 

- -

Syntaxe

- -
event.cancelBubble = bool;
-var bool = event.cancelBubble;
-
- -

Exemple

- -
elem.onclick = function(e) {
- // fais des choses sympas ici
-  e.cancelBubble = true;
-}
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-event-cancelbubble', 'cancelBubble')}}{{Spec2('DOM WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.Event.cancelBubble")}}

diff --git a/files/fr/web/api/event/cancelbubble/index.md b/files/fr/web/api/event/cancelbubble/index.md new file mode 100644 index 0000000000..07d891daed --- /dev/null +++ b/files/fr/web/api/event/cancelbubble/index.md @@ -0,0 +1,49 @@ +--- +title: Event.cancelBubble +slug: Web/API/Event/cancelBubble +tags: + - API + - Annulation + - DOM + - Evènement + - Propagation + - Propriétés +translation_of: Web/API/Event/cancelBubble +--- +

{{APIRef("DOM Events")}}

+ +

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. 

+ +

Syntaxe

+ +
event.cancelBubble = bool;
+var bool = event.cancelBubble;
+
+ +

Exemple

+ +
elem.onclick = function(e) {
+ // fais des choses sympas ici
+  e.cancelBubble = true;
+}
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-event-cancelbubble', 'cancelBubble')}}{{Spec2('DOM WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Event.cancelBubble")}}

diff --git a/files/fr/web/api/event/comparison_of_event_targets/index.html b/files/fr/web/api/event/comparison_of_event_targets/index.html deleted file mode 100644 index 506a981aef..0000000000 --- a/files/fr/web/api/event/comparison_of_event_targets/index.html +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: Comparaison des cibles d'évènements -slug: Web/API/Event/Comparison_of_Event_Targets -tags: - - Cibles - - DOM - - évènements -translation_of: Web/API/Event/Comparison_of_Event_Targets -original_slug: Web/API/Event/Comparaison_des_cibles_d_évènements ---- -

{{ ApiRef() }}

- -

Cibles d'évènements

- -

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.

- -

Il y a 5 cibles à considérer :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéDéfinie dansObjectif
event.targetDOM Event Interface -

L'élément DOM sur le côté gauche de l'appel qui a déclenché cet événement, par exemple :

- - 
-element.dispatchEvent(event)
-
-
event.currentTargetDOM Event InterfaceLa EventTarget (cible d'évènement) que les EventListeners traitent actuellement. Au fur et à mesure de la capture et de la diffusion des évènements, cette valeur change.
event.relatedTargetDOM MouseEvent InterfaceIdentifie une cible secondaire pour l'évènement.
event.explicitOriginalTarget{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}{{ 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, .target affichera le parent .explicitOriginalTarget et le noeud de texte.
- Contrairement à .originalTarget, .explicitOriginalTarget n'aura jamais de contenu anonyme.
event.originalTarget{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}{{ Non-standard_inline() }} La cible originale de l'évènement, avant tout reciblage. Voir Anonymous Content#Event_Flow_and_Targeting pour plus de détails.
- -

Utilisation de explicitOriginalTarget et originalTarget

- -

Problème : Seulement disponible dans un navigateur basé sur Mozilla ? Problème : Convient uniquement aux développeurs d'extensions ?

- -

Exemples

- -
<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>Comparison of Event Targets</title>
-    <style>
-        table {
-            border-collapse: collapse;
-            height: 150px;
-            width: 100%;
-        }
-        td {
-            border: 1px solid #ccc;
-            font-weight: bold;
-            padding: 5px;
-            min-height: 30px;
-        }
-        .standard {
-            background-color: #99ff99;
-        }
-        .non-standard {
-            background-color: #902D37;
-        }
-    </style>
-</head>
-<body>
-    <table>
-    <thead>
-        <tr>
-            <td class="standard">Original target dispatching the event <small>event.target</small></td>
-            <td class="standard">Target who's event listener is being processed <small>event.currentTarget</small></td>
-            <td class="standard">Identify other element (if any) involved in the event <small>event.relatedTarget</small></td>
-            <td class="non-standard">If there was a retargetting of the event for some reason <small> event.explicitOriginalTarget</small> contains the target before retargetting (never contains anonymous targets)</td>
-            <td class="non-standard">If there was a retargetting of the event for some reason <small> event.originalTarget</small> contains the target before retargetting (may contain anonymous targets)</td>
-        </tr>
-    </thead>
-    <tr>
-        <td id="target"></td>
-        <td id="currentTarget"></td>
-        <td id="relatedTarget"></td>
-        <td id="explicitOriginalTarget"></td>
-        <td id="originalTarget"></td>
-    </tr>
-</table>
-<p>Clicking on the text will show the difference between explicitOriginalTarget, originalTarget and target</p>
-<script>
-    function handleClicks(e) {
-        document.getElementById('target').innerHTML = e.target;
-        document.getElementById('currentTarget').innerHTML = e.currentTarget;
-        document.getElementById('relatedTarget').innerHTML = e.relatedTarget;
-        document.getElementById('explicitOriginalTarget').innerHTML = e.explicitOriginalTarget;
-        document.getElementById('originalTarget').innerHTML = e.originalTarget;
-    }
-
-    function handleMouseover(e) {
-        document.getElementById('target').innerHTML = e.target;
-        document.getElementById('relatedTarget').innerHTML = e.relatedTarget;
-    }
-
-    document.addEventListener('click', handleClicks, false);
-    document.addEventListener('mouseover', handleMouseover, false);
-</script>
-</body>
-</html>
- -

Utilisation de target et relatedTarget

- -

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é à.

- - - - - - - - - - - - - - - - - - - -
Type d'évènementevent.targetevent.relatedTarget
mouseoverLa 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.
mouseoutLa 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.
- -

Problème : A également besoin de descriptions sur les évènements dragenter et dragexit.

- -

Exemple

- -
<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/comparison_of_event_targets/index.md b/files/fr/web/api/event/comparison_of_event_targets/index.md new file mode 100644 index 0000000000..506a981aef --- /dev/null +++ b/files/fr/web/api/event/comparison_of_event_targets/index.md @@ -0,0 +1,169 @@ +--- +title: Comparaison des cibles d'évènements +slug: Web/API/Event/Comparison_of_Event_Targets +tags: + - Cibles + - DOM + - évènements +translation_of: Web/API/Event/Comparison_of_Event_Targets +original_slug: Web/API/Event/Comparaison_des_cibles_d_évènements +--- +

{{ ApiRef() }}

+ +

Cibles d'évènements

+ +

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.

+ +

Il y a 5 cibles à considérer :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéDéfinie dansObjectif
event.targetDOM Event Interface +

L'élément DOM sur le côté gauche de l'appel qui a déclenché cet événement, par exemple :

+ + 
+element.dispatchEvent(event)
+
+
event.currentTargetDOM Event InterfaceLa EventTarget (cible d'évènement) que les EventListeners traitent actuellement. Au fur et à mesure de la capture et de la diffusion des évènements, cette valeur change.
event.relatedTargetDOM MouseEvent InterfaceIdentifie une cible secondaire pour l'évènement.
event.explicitOriginalTarget{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}{{ 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, .target affichera le parent .explicitOriginalTarget et le noeud de texte.
+ Contrairement à .originalTarget, .explicitOriginalTarget n'aura jamais de contenu anonyme.
event.originalTarget{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}{{ Non-standard_inline() }} La cible originale de l'évènement, avant tout reciblage. Voir Anonymous Content#Event_Flow_and_Targeting pour plus de détails.
+ +

Utilisation de explicitOriginalTarget et originalTarget

+ +

Problème : Seulement disponible dans un navigateur basé sur Mozilla ? Problème : Convient uniquement aux développeurs d'extensions ?

+ +

Exemples

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Comparison of Event Targets</title>
+    <style>
+        table {
+            border-collapse: collapse;
+            height: 150px;
+            width: 100%;
+        }
+        td {
+            border: 1px solid #ccc;
+            font-weight: bold;
+            padding: 5px;
+            min-height: 30px;
+        }
+        .standard {
+            background-color: #99ff99;
+        }
+        .non-standard {
+            background-color: #902D37;
+        }
+    </style>
+</head>
+<body>
+    <table>
+    <thead>
+        <tr>
+            <td class="standard">Original target dispatching the event <small>event.target</small></td>
+            <td class="standard">Target who's event listener is being processed <small>event.currentTarget</small></td>
+            <td class="standard">Identify other element (if any) involved in the event <small>event.relatedTarget</small></td>
+            <td class="non-standard">If there was a retargetting of the event for some reason <small> event.explicitOriginalTarget</small> contains the target before retargetting (never contains anonymous targets)</td>
+            <td class="non-standard">If there was a retargetting of the event for some reason <small> event.originalTarget</small> contains the target before retargetting (may contain anonymous targets)</td>
+        </tr>
+    </thead>
+    <tr>
+        <td id="target"></td>
+        <td id="currentTarget"></td>
+        <td id="relatedTarget"></td>
+        <td id="explicitOriginalTarget"></td>
+        <td id="originalTarget"></td>
+    </tr>
+</table>
+<p>Clicking on the text will show the difference between explicitOriginalTarget, originalTarget and target</p>
+<script>
+    function handleClicks(e) {
+        document.getElementById('target').innerHTML = e.target;
+        document.getElementById('currentTarget').innerHTML = e.currentTarget;
+        document.getElementById('relatedTarget').innerHTML = e.relatedTarget;
+        document.getElementById('explicitOriginalTarget').innerHTML = e.explicitOriginalTarget;
+        document.getElementById('originalTarget').innerHTML = e.originalTarget;
+    }
+
+    function handleMouseover(e) {
+        document.getElementById('target').innerHTML = e.target;
+        document.getElementById('relatedTarget').innerHTML = e.relatedTarget;
+    }
+
+    document.addEventListener('click', handleClicks, false);
+    document.addEventListener('mouseover', handleMouseover, false);
+</script>
+</body>
+</html>
+ +

Utilisation de target et relatedTarget

+ +

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é à.

+ + + + + + + + + + + + + + + + + + + +
Type d'évènementevent.targetevent.relatedTarget
mouseoverLa 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.
mouseoutLa 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.
+ +

Problème : A également besoin de descriptions sur les évènements dragenter et dragexit.

+ +

Exemple

+ +
<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.html b/files/fr/web/api/event/currenttarget/index.html deleted file mode 100644 index d70ad8d00f..0000000000 --- a/files/fr/web/api/event/currenttarget/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Event.currentTarget -slug: Web/API/Event/currentTarget -tags: - - API - - Cible - - DOM - - Evènement - - Propriété -translation_of: Web/API/Event/currentTarget ---- -
{{APIRef("DOM")}}
- -

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).

- -

Syntaxe

- -
var currentEventTarget = event.currentTarget;
- -

Valeur

- -

{{domxref("EventTarget")}}

- -

Exemples

- -

Event.currentTarget peut s'avérer utile lorsqu'on attache le même gestionnaire d'évènement à plusieurs éléments.

- -
// Cette fonction masque la cible courante de l'évènement
-// et l'affiche dans la console.
-function hide(e){
-  e.currentTarget.style.visibility = 'hidden';
-  console.log(e.currentTarget);
-  // Lorsque cette fonction est utilisée en gestionnaire d'évènement
-  // on aura this === e.currentTarget
-}
-
-var ps = document.getElementsByTagName('p');
-
-for(var i = 0; i < ps.length; i++){
-  // On affiche l'élément <p> qui a été cliqué dans la console
-  ps[i].addEventListener('click', hide, false);
-}
-// On affiche l'élément <body> dans la console
-document.body.addEventListener('click', hide, false);
-
-
- -
-

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ÉtatCommentaires
{{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

- - diff --git a/files/fr/web/api/event/currenttarget/index.md b/files/fr/web/api/event/currenttarget/index.md new file mode 100644 index 0000000000..d70ad8d00f --- /dev/null +++ b/files/fr/web/api/event/currenttarget/index.md @@ -0,0 +1,92 @@ +--- +title: Event.currentTarget +slug: Web/API/Event/currentTarget +tags: + - API + - Cible + - DOM + - Evènement + - Propriété +translation_of: Web/API/Event/currentTarget +--- +
{{APIRef("DOM")}}
+ +

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).

+ +

Syntaxe

+ +
var currentEventTarget = event.currentTarget;
+ +

Valeur

+ +

{{domxref("EventTarget")}}

+ +

Exemples

+ +

Event.currentTarget peut s'avérer utile lorsqu'on attache le même gestionnaire d'évènement à plusieurs éléments.

+ +
// Cette fonction masque la cible courante de l'évènement
+// et l'affiche dans la console.
+function hide(e){
+  e.currentTarget.style.visibility = 'hidden';
+  console.log(e.currentTarget);
+  // Lorsque cette fonction est utilisée en gestionnaire d'évènement
+  // on aura this === e.currentTarget
+}
+
+var ps = document.getElementsByTagName('p');
+
+for(var i = 0; i < ps.length; i++){
+  // On affiche l'élément <p> qui a été cliqué dans la console
+  ps[i].addEventListener('click', hide, false);
+}
+// On affiche l'élément <body> dans la console
+document.body.addEventListener('click', hide, false);
+
+
+ +
+

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ÉtatCommentaires
{{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

+ + diff --git a/files/fr/web/api/event/defaultprevented/index.html b/files/fr/web/api/event/defaultprevented/index.html deleted file mode 100644 index f5b25e7c7d..0000000000 --- a/files/fr/web/api/event/defaultprevented/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: event.defaultPrevented -slug: Web/API/Event/defaultPrevented -tags: - - API - - DOM - - Evènement - - Propriété -translation_of: Web/API/Event/defaultPrevented ---- -

{{APIRef("DOM")}}

- -

Résumé

- -

Retourne un booléen indiquant si {{domxref("event.preventDefault()")}} a été appelée sur l'évènement ou non.

- -
-

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)}}).

-
- -

Syntaxe

- -
bool = event.defaultPrevented
- -

Exemple

- -
 if (e.defaultPrevented) {
-   /* Le comportement par défaut a été inhibé */
- }
-
- -

Spécification

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-event-defaultprevented', 'Event.defaultPrevented()')}}{{ Spec2('DOM WHATWG') }} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Event.defaultPrevented")}}

- - diff --git a/files/fr/web/api/event/defaultprevented/index.md b/files/fr/web/api/event/defaultprevented/index.md new file mode 100644 index 0000000000..f5b25e7c7d --- /dev/null +++ b/files/fr/web/api/event/defaultprevented/index.md @@ -0,0 +1,58 @@ +--- +title: event.defaultPrevented +slug: Web/API/Event/defaultPrevented +tags: + - API + - DOM + - Evènement + - Propriété +translation_of: Web/API/Event/defaultPrevented +--- +

{{APIRef("DOM")}}

+ +

Résumé

+ +

Retourne un booléen indiquant si {{domxref("event.preventDefault()")}} a été appelée sur l'évènement ou non.

+ +
+

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)}}).

+
+ +

Syntaxe

+ +
bool = event.defaultPrevented
+ +

Exemple

+ +
 if (e.defaultPrevented) {
+   /* Le comportement par défaut a été inhibé */
+ }
+
+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-event-defaultprevented', 'Event.defaultPrevented()')}}{{ Spec2('DOM WHATWG') }} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Event.defaultPrevented")}}

+ + diff --git a/files/fr/web/api/event/event/index.html b/files/fr/web/api/event/event/index.html deleted file mode 100644 index 8a6992dc29..0000000000 --- a/files/fr/web/api/event/event/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Event() -slug: Web/API/Event/Event -tags: - - API - - Constructeur - - DOM - - évènements -translation_of: Web/API/Event/Event ---- -

{{APIRef("DOM")}}

- -

Le constructeur Event() crée un nouvel {{domxref("Event")}} (évènement).

- -

Syntaxe

- -
 event = new Event(typeArg, eventInit);
- -

Valeurs

- -
-
typeArg
-
C'est une {{domxref("DOMString")}} (chaîne de caractères) représentant le nom de l'évènement.
-
eventInit{{optional_inline}}
-

C'est un dictionnaire EventInit ayant les champs suivants :

-
    -
  • 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

- -
// 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);
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#interface-event','Event()')}}{{Spec2('DOM WHATWG')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Event.Event")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/event/event/index.md b/files/fr/web/api/event/event/index.md new file mode 100644 index 0000000000..8a6992dc29 --- /dev/null +++ b/files/fr/web/api/event/event/index.md @@ -0,0 +1,73 @@ +--- +title: Event() +slug: Web/API/Event/Event +tags: + - API + - Constructeur + - DOM + - évènements +translation_of: Web/API/Event/Event +--- +

{{APIRef("DOM")}}

+ +

Le constructeur Event() crée un nouvel {{domxref("Event")}} (évènement).

+ +

Syntaxe

+ +
 event = new Event(typeArg, eventInit);
+ +

Valeurs

+ +
+
typeArg
+
C'est une {{domxref("DOMString")}} (chaîne de caractères) représentant le nom de l'évènement.
+
eventInit{{optional_inline}}
+

C'est un dictionnaire EventInit ayant les champs suivants :

+
    +
  • 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

+ +
// 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);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#interface-event','Event()')}}{{Spec2('DOM WHATWG')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Event.Event")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/event/eventphase/index.html b/files/fr/web/api/event/eventphase/index.html deleted file mode 100644 index 290a0e6659..0000000000 --- a/files/fr/web/api/event/eventphase/index.html +++ /dev/null @@ -1,196 +0,0 @@ ---- -title: Event.eventPhase -slug: Web/API/Event/eventPhase -tags: - - API - - DOM - - Evènement - - Flux - - Phase - - Propriétés -translation_of: Web/API/Event/eventPhase ---- -

{{ApiRef("DOM")}}

- -

Indique quelle phase du flux d'événements est actuellement évaluée.

- -

Syntaxe

- -
var phase = event.eventPhase;
-
- -

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")}}.

- -

Constantes

- -

Constantes de phase d'événement

- -

Ces valeurs décrivent quelle est la phase du flux d'événements actuellement évalué.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ConstantValueDescription
Event.NONE0 -

Aucun événement n'est actuellement traité.

-
Event.CAPTURING_PHASE1 -

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.

-
Event.AT_TARGET2L'é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 false (faux), le traitement de l'événement est terminé une fois la phase complète.
Event.BUBBLING_PHASE3L'é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 true (vrai). Les {{domxref("EventListener", "Event listeners", "", 1)}} enregistrés pour cette phase sont déclenchés durant ce traitement.
- -

Pour plus de détails, voir section 3.1, Event dispatch and DOM event flow (en) de la spécification du DOM niveau 3 sur les évènements .

- -

Exemple

- -

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

- -
div {
-  margin: 20px;
-  padding: 4px;
-  border: thin black solid;
-}
-
-#divInfo {
-  margin: 18px;
-  padding: 8px;
-  background-color:white;
-  font-size:80%;
-}
- -

JavaScript

- -
var clear = false, divInfo = null, divs = null, useCapture = false;
-window.onload = function () {
-  divInfo = document.getElementById("divInfo");
-  divs = document.getElementsByTagName('div');
-  chCapture = document.getElementById("chCapture");
-  chCapture.onclick = function () {
-    RemoveListeners();
-    AddListeners();
-  }
-  Clear();
-  AddListeners();
-}
-
-function RemoveListeners() {
-  for (var i = 0; i < divs.length; i++) {
-    var d = divs[i];
-    if (d.id != "divInfo") {
-      d.removeEventListener("click", OnDivClick, true);
-      d.removeEventListener("click", OnDivClick, false);
-    }
-  }
-}
-
-function AddListeners() {
-  for (var i = 0; i < divs.length; i++) {
-    var d = divs[i];
-    if (d.id != "divInfo") {
-      if (chCapture.checked)
-        d.addEventListener("click", OnDivClick, true);
-      else
-        d.addEventListener("click", OnDivClick, false);
-      d.onmousemove = function () { clear = true; };
-    }
-  }
-}
-
-function OnDivClick(e) {
-  if (clear) {
-    Clear(); clear = false;
-  }
-  if (e.eventPhase == 2)
-    e.currentTarget.style.backgroundColor = 'red';
-  var level = e.eventPhase == 0 ? "none" : e.eventPhase == 1 ? "capturing" : e.eventPhase == 2 ? "target" : e.eventPhase == 3 ? "bubbling" : "error";
-  divInfo.innerHTML += e.currentTarget.id + "; eventPhase: " + level + "<br/>";
-}
-
-function Clear() {
-  for (var i = 0; i < divs.length; i++) {
-    if (divs[i].id != "divInfo")
-      divs[i].style.backgroundColor = (i & 1) ? "#f6eedb" : "#cceeff";
-  }
-  divInfo.innerHTML = '';
-}
- -

{{ EmbedLiveSample('Example', '', '700', '', 'Web/API/Event/eventPhase') }}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{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

- - - -

{{Compat("api.Event.eventPhase")}}

diff --git a/files/fr/web/api/event/eventphase/index.md b/files/fr/web/api/event/eventphase/index.md new file mode 100644 index 0000000000..290a0e6659 --- /dev/null +++ b/files/fr/web/api/event/eventphase/index.md @@ -0,0 +1,196 @@ +--- +title: Event.eventPhase +slug: Web/API/Event/eventPhase +tags: + - API + - DOM + - Evènement + - Flux + - Phase + - Propriétés +translation_of: Web/API/Event/eventPhase +--- +

{{ApiRef("DOM")}}

+ +

Indique quelle phase du flux d'événements est actuellement évaluée.

+ +

Syntaxe

+ +
var phase = event.eventPhase;
+
+ +

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")}}.

+ +

Constantes

+ +

Constantes de phase d'événement

+ +

Ces valeurs décrivent quelle est la phase du flux d'événements actuellement évalué.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstantValueDescription
Event.NONE0 +

Aucun événement n'est actuellement traité.

+
Event.CAPTURING_PHASE1 +

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.

+
Event.AT_TARGET2L'é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 false (faux), le traitement de l'événement est terminé une fois la phase complète.
Event.BUBBLING_PHASE3L'é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 true (vrai). Les {{domxref("EventListener", "Event listeners", "", 1)}} enregistrés pour cette phase sont déclenchés durant ce traitement.
+ +

Pour plus de détails, voir section 3.1, Event dispatch and DOM event flow (en) de la spécification du DOM niveau 3 sur les évènements .

+ +

Exemple

+ +

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

+ +
div {
+  margin: 20px;
+  padding: 4px;
+  border: thin black solid;
+}
+
+#divInfo {
+  margin: 18px;
+  padding: 8px;
+  background-color:white;
+  font-size:80%;
+}
+ +

JavaScript

+ +
var clear = false, divInfo = null, divs = null, useCapture = false;
+window.onload = function () {
+  divInfo = document.getElementById("divInfo");
+  divs = document.getElementsByTagName('div');
+  chCapture = document.getElementById("chCapture");
+  chCapture.onclick = function () {
+    RemoveListeners();
+    AddListeners();
+  }
+  Clear();
+  AddListeners();
+}
+
+function RemoveListeners() {
+  for (var i = 0; i < divs.length; i++) {
+    var d = divs[i];
+    if (d.id != "divInfo") {
+      d.removeEventListener("click", OnDivClick, true);
+      d.removeEventListener("click", OnDivClick, false);
+    }
+  }
+}
+
+function AddListeners() {
+  for (var i = 0; i < divs.length; i++) {
+    var d = divs[i];
+    if (d.id != "divInfo") {
+      if (chCapture.checked)
+        d.addEventListener("click", OnDivClick, true);
+      else
+        d.addEventListener("click", OnDivClick, false);
+      d.onmousemove = function () { clear = true; };
+    }
+  }
+}
+
+function OnDivClick(e) {
+  if (clear) {
+    Clear(); clear = false;
+  }
+  if (e.eventPhase == 2)
+    e.currentTarget.style.backgroundColor = 'red';
+  var level = e.eventPhase == 0 ? "none" : e.eventPhase == 1 ? "capturing" : e.eventPhase == 2 ? "target" : e.eventPhase == 3 ? "bubbling" : "error";
+  divInfo.innerHTML += e.currentTarget.id + "; eventPhase: " + level + "<br/>";
+}
+
+function Clear() {
+  for (var i = 0; i < divs.length; i++) {
+    if (divs[i].id != "divInfo")
+      divs[i].style.backgroundColor = (i & 1) ? "#f6eedb" : "#cceeff";
+  }
+  divInfo.innerHTML = '';
+}
+ +

{{ EmbedLiveSample('Example', '', '700', '', 'Web/API/Event/eventPhase') }}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{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

+ + + +

{{Compat("api.Event.eventPhase")}}

diff --git a/files/fr/web/api/event/explicitoriginaltarget/index.html b/files/fr/web/api/event/explicitoriginaltarget/index.html deleted file mode 100644 index 9844a934bf..0000000000 --- a/files/fr/web/api/event/explicitoriginaltarget/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Event.explicitOriginalTarget -slug: Web/API/Event/explicitOriginalTarget -tags: - - API - - DOM - - Gecko - - Non-standard - - Propriété - - Reference -translation_of: Web/API/Event/explicitOriginalTarget ---- -
{{ApiRef("DOM")}}{{Non-standard_header}}
- -

Cette propriété représente la cible originale de l'évènement. Elle est spécifique à Mozilla.

- -

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 pointera vers le parent et explicitOriginalTarget vers le nœud texte.

- -

À la différence de originalTarget, explicitOriginalTarget ne contiendra jamais de contenu anonyme.

- -

Voir aussi une comparaison des cibles pour les évènements.

- -

Exemples

- -

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.

- -

HTML

- -
<command id="my-cmd-anAction"
-         oncommand="myCommand(event);"/>
-<menulist>
-  <menupopup>
-    <menuitem label="Get my element name!"
-              command="my-cmd-anAction"/>
-  </menupopup>
-</menulist>
- -

JavaScript

- -
function myCommand(ev) {
-  console.log(ev.explicitOriginalTarget.nodeName);
-  // affichera 'menuitem'
-}
- -

Spécifications

- -

Cette propriété est spécifique à Mozilla. Elle est définie dans l'IDL {{Source("/dom/public/idl/events/nsIDOMNSEvent.idl")}}

- -

Cette propriété n'est pas définie dans la spécification DOM Level 2 Events

diff --git a/files/fr/web/api/event/explicitoriginaltarget/index.md b/files/fr/web/api/event/explicitoriginaltarget/index.md new file mode 100644 index 0000000000..9844a934bf --- /dev/null +++ b/files/fr/web/api/event/explicitoriginaltarget/index.md @@ -0,0 +1,49 @@ +--- +title: Event.explicitOriginalTarget +slug: Web/API/Event/explicitOriginalTarget +tags: + - API + - DOM + - Gecko + - Non-standard + - Propriété + - Reference +translation_of: Web/API/Event/explicitOriginalTarget +--- +
{{ApiRef("DOM")}}{{Non-standard_header}}
+ +

Cette propriété représente la cible originale de l'évènement. Elle est spécifique à Mozilla.

+ +

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 pointera vers le parent et explicitOriginalTarget vers le nœud texte.

+ +

À la différence de originalTarget, explicitOriginalTarget ne contiendra jamais de contenu anonyme.

+ +

Voir aussi une comparaison des cibles pour les évènements.

+ +

Exemples

+ +

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.

+ +

HTML

+ +
<command id="my-cmd-anAction"
+         oncommand="myCommand(event);"/>
+<menulist>
+  <menupopup>
+    <menuitem label="Get my element name!"
+              command="my-cmd-anAction"/>
+  </menupopup>
+</menulist>
+ +

JavaScript

+ +
function myCommand(ev) {
+  console.log(ev.explicitOriginalTarget.nodeName);
+  // affichera 'menuitem'
+}
+ +

Spécifications

+ +

Cette propriété est spécifique à Mozilla. Elle est définie dans l'IDL {{Source("/dom/public/idl/events/nsIDOMNSEvent.idl")}}

+ +

Cette propriété n'est pas définie dans la spécification DOM Level 2 Events

diff --git a/files/fr/web/api/event/index.html b/files/fr/web/api/event/index.html deleted file mode 100644 index a85599f14b..0000000000 --- a/files/fr/web/api/event/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: Event -slug: Web/API/Event -browser-compat: api.Event -translation_of: Web/API/Event ---- -

{{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() sur un élément ou en définissant l'évènement avant de l'envoyer sur une cible avec la méthode 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 (tels que <button>, <div>, <span>, etc.) grâce à la méthode EventTarget.addEventListener() qui remplace les anciens attributs de gestion d'évènement 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().

- -
-

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 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).

- - - -

Constructeur

- -
-
Event()
-
Crée un objet Event et le renvoie à l'appelant.
-
- -

Propriétés

- -
-
Event.bubbles {{readonlyinline}}
-
Un booléen qui indique si l'évènement bouillonne/remonte vers le haut dans l'arbre du DOM.
-
Event.cancelBubble
-
Un alias historique de 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 {{readonlyinline}}
-
Un booléen qui indique si l'évènement peut être annulé.
-
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 {{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 {{non-standard_inline}}
-
Un tableau (Array) de nœuds (Node) du DOM qui ont été parcourus lors du bouillonnement/de la remontée de l'évènement.
-
Event.defaultPrevented {{readonlyinline}}
-
Indique si un appel à Event.preventDefault() a annulé l'évènement.
-
Event.eventPhase {{readonlyinline}}
-
Indique la phase du flux de l'évènement qui est en cours de traitement.
-
Event.explicitOriginalTarget {{non-standard_inline}} {{readonlyinline}}
-
La cible explicite et originnelle de l'évènement (spécifique à Mozilla).
-
Event.originalTarget {{non-standard_inline}} {{readonlyinline}}
-
La cible originale de l'évènement avant tout reciblage (spécifique à Mozilla).
-
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() et Event.defaultPrevented.
-
Event.srcElement {{non-standard_inline}}
-
Un alias non-standard (provenant d'anciennes versions d'Internet Explorer) pour Event.target. Certains navigateurs le prennent en charge à des fins de compatibilité web.
-
Event.target {{readonlyinline}}
-
Une référence à la cible à laquelle l'évènement était initialement destiné.
-
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.
-
Event.type {{readonlyinline}}
-
Le nom de l'évènement, exprimé de façon insensible à la casse.
-
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).
-
- -

Propriétés dépréciées

- -
-
Event.scoped {{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 doit être utilisé à la place.
-
- -

Méthodes

- -
-
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.
-
Event.preventDefault()
-
Annule l'évènement (si celui-ci peut être annulé).
-
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
-
Arrête la propagation des évènements plus loin dans le DOM.
-
- -

Méthodes dépréciées

- -
-
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

- - diff --git a/files/fr/web/api/event/index.md b/files/fr/web/api/event/index.md new file mode 100644 index 0000000000..a85599f14b --- /dev/null +++ b/files/fr/web/api/event/index.md @@ -0,0 +1,167 @@ +--- +title: Event +slug: Web/API/Event +browser-compat: api.Event +translation_of: Web/API/Event +--- +

{{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() sur un élément ou en définissant l'évènement avant de l'envoyer sur une cible avec la méthode 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 (tels que <button>, <div>, <span>, etc.) grâce à la méthode EventTarget.addEventListener() qui remplace les anciens attributs de gestion d'évènement 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().

+ +
+

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 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).

+ + + +

Constructeur

+ +
+
Event()
+
Crée un objet Event et le renvoie à l'appelant.
+
+ +

Propriétés

+ +
+
Event.bubbles {{readonlyinline}}
+
Un booléen qui indique si l'évènement bouillonne/remonte vers le haut dans l'arbre du DOM.
+
Event.cancelBubble
+
Un alias historique de 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 {{readonlyinline}}
+
Un booléen qui indique si l'évènement peut être annulé.
+
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 {{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 {{non-standard_inline}}
+
Un tableau (Array) de nœuds (Node) du DOM qui ont été parcourus lors du bouillonnement/de la remontée de l'évènement.
+
Event.defaultPrevented {{readonlyinline}}
+
Indique si un appel à Event.preventDefault() a annulé l'évènement.
+
Event.eventPhase {{readonlyinline}}
+
Indique la phase du flux de l'évènement qui est en cours de traitement.
+
Event.explicitOriginalTarget {{non-standard_inline}} {{readonlyinline}}
+
La cible explicite et originnelle de l'évènement (spécifique à Mozilla).
+
Event.originalTarget {{non-standard_inline}} {{readonlyinline}}
+
La cible originale de l'évènement avant tout reciblage (spécifique à Mozilla).
+
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() et Event.defaultPrevented.
+
Event.srcElement {{non-standard_inline}}
+
Un alias non-standard (provenant d'anciennes versions d'Internet Explorer) pour Event.target. Certains navigateurs le prennent en charge à des fins de compatibilité web.
+
Event.target {{readonlyinline}}
+
Une référence à la cible à laquelle l'évènement était initialement destiné.
+
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.
+
Event.type {{readonlyinline}}
+
Le nom de l'évènement, exprimé de façon insensible à la casse.
+
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).
+
+ +

Propriétés dépréciées

+ +
+
Event.scoped {{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 doit être utilisé à la place.
+
+ +

Méthodes

+ +
+
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.
+
Event.preventDefault()
+
Annule l'évènement (si celui-ci peut être annulé).
+
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
+
Arrête la propagation des évènements plus loin dans le DOM.
+
+ +

Méthodes dépréciées

+ +
+
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

+ + diff --git a/files/fr/web/api/event/initevent/index.html b/files/fr/web/api/event/initevent/index.html deleted file mode 100644 index 6f06e8b7f3..0000000000 --- a/files/fr/web/api/event/initevent/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: event.initEvent -slug: Web/API/Event/initEvent -tags: - - API - - DOM - - Evènement - - Méthode - - Reference -translation_of: Web/API/Event/initEvent ---- -

{{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 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écificationStatutCommentaire
{{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

- - diff --git a/files/fr/web/api/event/initevent/index.md b/files/fr/web/api/event/initevent/index.md new file mode 100644 index 0000000000..6f06e8b7f3 --- /dev/null +++ b/files/fr/web/api/event/initevent/index.md @@ -0,0 +1,85 @@ +--- +title: event.initEvent +slug: Web/API/Event/initEvent +tags: + - API + - DOM + - Evènement + - Méthode + - Reference +translation_of: Web/API/Event/initEvent +--- +

{{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 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écificationStatutCommentaire
{{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

+ + diff --git a/files/fr/web/api/event/istrusted/index.html b/files/fr/web/api/event/istrusted/index.html deleted file mode 100644 index 0267223d10..0000000000 --- a/files/fr/web/api/event/istrusted/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Event.isTrusted -slug: Web/API/Event/isTrusted -tags: - - API - - Event - - Property - - Read-only - - Référence(2) -translation_of: Web/API/Event/isTrusted ---- -

{{APIRef("DOM")}}

- -

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.

- -

Syntaxe

- -
var bool = event.isTrusted;
-
- -

Exemple

- -
 if (e.isTrusted) {
-     /* The event is trusted. */
- } else {
-     /* The event is not trusted. */
- }
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('DOM WHATWG', '#dom-event-istrusted', 'Event.isTrusted')}}{{ Spec2('DOM WHATWG') }} 
{{SpecName('DOM3 Events', '#trusted-events', 'Trusted events')}}{{Spec2('DOM3 Events')}} -

Ajoute des conditions à propos des événement trusted et untrusted. Cependant, cela ne défini pas la propriété isTrusted.

-
{{SpecName('DOM4', '#dom-event-istrusted', 'Event.isTrusted')}}{{Spec2('DOM4')}}Première définition.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Event.isTrusted")}}

diff --git a/files/fr/web/api/event/istrusted/index.md b/files/fr/web/api/event/istrusted/index.md new file mode 100644 index 0000000000..0267223d10 --- /dev/null +++ b/files/fr/web/api/event/istrusted/index.md @@ -0,0 +1,61 @@ +--- +title: Event.isTrusted +slug: Web/API/Event/isTrusted +tags: + - API + - Event + - Property + - Read-only + - Référence(2) +translation_of: Web/API/Event/isTrusted +--- +

{{APIRef("DOM")}}

+ +

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.

+ +

Syntaxe

+ +
var bool = event.isTrusted;
+
+ +

Exemple

+ +
 if (e.isTrusted) {
+     /* The event is trusted. */
+ } else {
+     /* The event is not trusted. */
+ }
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('DOM WHATWG', '#dom-event-istrusted', 'Event.isTrusted')}}{{ Spec2('DOM WHATWG') }} 
{{SpecName('DOM3 Events', '#trusted-events', 'Trusted events')}}{{Spec2('DOM3 Events')}} +

Ajoute des conditions à propos des événement trusted et untrusted. Cependant, cela ne défini pas la propriété isTrusted.

+
{{SpecName('DOM4', '#dom-event-istrusted', 'Event.isTrusted')}}{{Spec2('DOM4')}}Première définition.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Event.isTrusted")}}

diff --git a/files/fr/web/api/event/originaltarget/index.html b/files/fr/web/api/event/originaltarget/index.html deleted file mode 100644 index 810c8276a5..0000000000 --- a/files/fr/web/api/event/originaltarget/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: Event.originalTarget -slug: Web/API/Event/originalTarget -tags: - - API - - Cible - - DOM - - Evènement - - Propriétés - - origine -translation_of: Web/API/Event/originalTarget ---- -
{{ ApiRef("DOM") }} {{Non-standard_header}}
- -

La cible d'origine de l'évènement avant tout reciblage. (spécifique à Mozilla)

- -

En présence de contenu anonyme 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 pour plus de détails.

- -

Note : originalTarget peut aussi être un contenu anonyme natif  (voir {{Bug("208427")}}), dans ce cas, il est inutile pour le code non privilégié.

- -

Voir aussi Comparaison des cibles d'évènements.

- -

Exemple

- -

Besoin d'un exemple qui ait du sens ici. ^^

- -

Spécification

- -

C'est une propriété propre à Mozilla. Définie dans {{Source("/dom/public/idl/events/nsIDOMNSEvent.idl")}}

- -

Cette propriété d'évènements n'est pas définie dans la spécification W3.org DOM niveau 2 Events

- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Event.originalTarget")}}

diff --git a/files/fr/web/api/event/originaltarget/index.md b/files/fr/web/api/event/originaltarget/index.md new file mode 100644 index 0000000000..810c8276a5 --- /dev/null +++ b/files/fr/web/api/event/originaltarget/index.md @@ -0,0 +1,37 @@ +--- +title: Event.originalTarget +slug: Web/API/Event/originalTarget +tags: + - API + - Cible + - DOM + - Evènement + - Propriétés + - origine +translation_of: Web/API/Event/originalTarget +--- +
{{ ApiRef("DOM") }} {{Non-standard_header}}
+ +

La cible d'origine de l'évènement avant tout reciblage. (spécifique à Mozilla)

+ +

En présence de contenu anonyme 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 pour plus de détails.

+ +

Note : originalTarget peut aussi être un contenu anonyme natif  (voir {{Bug("208427")}}), dans ce cas, il est inutile pour le code non privilégié.

+ +

Voir aussi Comparaison des cibles d'évènements.

+ +

Exemple

+ +

Besoin d'un exemple qui ait du sens ici. ^^

+ +

Spécification

+ +

C'est une propriété propre à Mozilla. Définie dans {{Source("/dom/public/idl/events/nsIDOMNSEvent.idl")}}

+ +

Cette propriété d'évènements n'est pas définie dans la spécification W3.org DOM niveau 2 Events

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Event.originalTarget")}}

diff --git a/files/fr/web/api/event/preventdefault/index.html b/files/fr/web/api/event/preventdefault/index.html deleted file mode 100644 index db435939bb..0000000000 --- a/files/fr/web/api/event/preventdefault/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Event.preventDefault() -slug: Web/API/Event/preventDefault -tags: - - API - - DOM - - Event - - Method - - Reference -translation_of: Web/API/Event/preventDefault -browser-compat: api.Event.preventDefault ---- -
{{apiref("DOM")}}
- -

La méthode preventDefault(), rattachée à l'interface 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.

- -

L'évènement continue sa propagation habituelle à moins qu'un des gestionnaires d'évènement invoque stopPropagation() ou stopImmediatePropagation() pour interrompre la propagation.

- -

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() sans avoir indiqué cancelable: true).

- -

Syntaxe

- -
event.preventDefault();
- -

Exemples

- -

Bloquer la gestion du clic par défaut

- -

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 :

- -

JavaScript

- -
document.querySelector("#id-checkbox").addEventListener("click", function(event) {
-  console.log("Désolé ! preventDefault() ne vous laissera pas cocher ceci.");
-  event.preventDefault();
-}, false);
- -

HTML

- -
<p>Essayez de cliquer sur la case à cocher.</p>
-
-<form>
-  <label for="id-checkbox">Checkbox:</label>
-  <input type="checkbox" id="id-checkbox"/>
-</form>
- -

Résultat

- -

{{EmbedLiveSample("blocking_default_click_handling")}}

- -

Empêcher les pressions du clavier sur un champ texte

- -

Dans l'exemple qui suit, on démontre comment empêcher d'écrire au clavier dans un champ texte grâce à preventDefault().

- -

HTML

- -

Voici le formulaire contenant le champ texte :

- -
<form>
-  <label>Un champ texte
-    <input type="text" id="mon-champ-texte">
-  </label>
-</form>
- -

JavaScript

- -

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 :

- -
let monChampTexte = document.getElementById('mon-champ-texte');
-monChampTexte.addEventListener('keypress', bloqueSaisie, false);
- -

La fonction bloqueSaisie() empêche toute saisie au clavier :

- -
function bloqueSaisie(evt) {
-  evt.preventDefault();
-  console.log("Une saisie a été empêchée.");
-};
- -

Résultat

- -

{{EmbedLiveSample('stopping_keystrokes_from_reaching_an_edit_field', 600, 200)}}

- -

Notes

- -

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.

- -

On peut utiliser la propriété Event.cancelable afin de vérifier si un évènement est annulable. Invoquer preventDefault() sur un évènement non-annulable n'aura aucun effet.

- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

diff --git a/files/fr/web/api/event/preventdefault/index.md b/files/fr/web/api/event/preventdefault/index.md new file mode 100644 index 0000000000..db435939bb --- /dev/null +++ b/files/fr/web/api/event/preventdefault/index.md @@ -0,0 +1,95 @@ +--- +title: Event.preventDefault() +slug: Web/API/Event/preventDefault +tags: + - API + - DOM + - Event + - Method + - Reference +translation_of: Web/API/Event/preventDefault +browser-compat: api.Event.preventDefault +--- +
{{apiref("DOM")}}
+ +

La méthode preventDefault(), rattachée à l'interface 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.

+ +

L'évènement continue sa propagation habituelle à moins qu'un des gestionnaires d'évènement invoque stopPropagation() ou stopImmediatePropagation() pour interrompre la propagation.

+ +

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() sans avoir indiqué cancelable: true).

+ +

Syntaxe

+ +
event.preventDefault();
+ +

Exemples

+ +

Bloquer la gestion du clic par défaut

+ +

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 :

+ +

JavaScript

+ +
document.querySelector("#id-checkbox").addEventListener("click", function(event) {
+  console.log("Désolé ! preventDefault() ne vous laissera pas cocher ceci.");
+  event.preventDefault();
+}, false);
+ +

HTML

+ +
<p>Essayez de cliquer sur la case à cocher.</p>
+
+<form>
+  <label for="id-checkbox">Checkbox:</label>
+  <input type="checkbox" id="id-checkbox"/>
+</form>
+ +

Résultat

+ +

{{EmbedLiveSample("blocking_default_click_handling")}}

+ +

Empêcher les pressions du clavier sur un champ texte

+ +

Dans l'exemple qui suit, on démontre comment empêcher d'écrire au clavier dans un champ texte grâce à preventDefault().

+ +

HTML

+ +

Voici le formulaire contenant le champ texte :

+ +
<form>
+  <label>Un champ texte
+    <input type="text" id="mon-champ-texte">
+  </label>
+</form>
+ +

JavaScript

+ +

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 :

+ +
let monChampTexte = document.getElementById('mon-champ-texte');
+monChampTexte.addEventListener('keypress', bloqueSaisie, false);
+ +

La fonction bloqueSaisie() empêche toute saisie au clavier :

+ +
function bloqueSaisie(evt) {
+  evt.preventDefault();
+  console.log("Une saisie a été empêchée.");
+};
+ +

Résultat

+ +

{{EmbedLiveSample('stopping_keystrokes_from_reaching_an_edit_field', 600, 200)}}

+ +

Notes

+ +

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.

+ +

On peut utiliser la propriété Event.cancelable afin de vérifier si un évènement est annulable. Invoquer preventDefault() sur un évènement non-annulable n'aura aucun effet.

+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

diff --git a/files/fr/web/api/event/returnvalue/index.html b/files/fr/web/api/event/returnvalue/index.html deleted file mode 100644 index 97654470d7..0000000000 --- a/files/fr/web/api/event/returnvalue/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Event.returnValue -slug: Web/API/Event/returnValue -tags: - - API - - DOM - - Propriétés - - action - - évènements -translation_of: Web/API/Event/returnValue ---- -

{{APIRef("DOM Events")}}{{Non-standard_header}}{{ Deprecated_header() }}

- -

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.

- -
-

Note : Utilisez {{domxref("Event.preventDefault()")}} à la place de cette méthode non standard.

-
- -

Syntaxe

- -
event.returnValue = bool;
-var bool = event.returnValue;
-
- -

Spécifications

- -

Bien qu'elle ait été inclue dans l'ancien brouillon de travail de W3C DOM niveau 2, cette propriété ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- -

{{Compat("api.Event.returnValue")}}

diff --git a/files/fr/web/api/event/returnvalue/index.md b/files/fr/web/api/event/returnvalue/index.md new file mode 100644 index 0000000000..97654470d7 --- /dev/null +++ b/files/fr/web/api/event/returnvalue/index.md @@ -0,0 +1,32 @@ +--- +title: Event.returnValue +slug: Web/API/Event/returnValue +tags: + - API + - DOM + - Propriétés + - action + - évènements +translation_of: Web/API/Event/returnValue +--- +

{{APIRef("DOM Events")}}{{Non-standard_header}}{{ Deprecated_header() }}

+ +

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.

+ +
+

Note : Utilisez {{domxref("Event.preventDefault()")}} à la place de cette méthode non standard.

+
+ +

Syntaxe

+ +
event.returnValue = bool;
+var bool = event.returnValue;
+
+ +

Spécifications

+ +

Bien qu'elle ait été inclue dans l'ancien brouillon de travail de W3C DOM niveau 2, cette propriété ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Event.returnValue")}}

diff --git a/files/fr/web/api/event/srcelement/index.html b/files/fr/web/api/event/srcelement/index.html deleted file mode 100644 index 6b0ab681b4..0000000000 --- a/files/fr/web/api/event/srcelement/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Event.srcElement -slug: Web/API/Event/srcElement -tags: - - API - - DOM - - Evènement - - Propriétés - - Éléments SRC -translation_of: Web/API/Event/srcElement ---- -

{{ApiRef("DOM")}}

- -

{{ Non-standard_header() }}

- -

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.

- -

Spécification

- -

Ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Event.srcElement")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/event/srcelement/index.md b/files/fr/web/api/event/srcelement/index.md new file mode 100644 index 0000000000..6b0ab681b4 --- /dev/null +++ b/files/fr/web/api/event/srcelement/index.md @@ -0,0 +1,32 @@ +--- +title: Event.srcElement +slug: Web/API/Event/srcElement +tags: + - API + - DOM + - Evènement + - Propriétés + - Éléments SRC +translation_of: Web/API/Event/srcElement +--- +

{{ApiRef("DOM")}}

+ +

{{ Non-standard_header() }}

+ +

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.

+ +

Spécification

+ +

Ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Event.srcElement")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/event/stopimmediatepropagation/index.html b/files/fr/web/api/event/stopimmediatepropagation/index.html deleted file mode 100644 index 8770b808a0..0000000000 --- a/files/fr/web/api/event/stopimmediatepropagation/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Event.stopImmediatePropagation() -slug: Web/API/Event/stopImmediatePropagation -tags: - - API - - Event - - Méthode - - Reference -translation_of: Web/API/Event/stopImmediatePropagation ---- -
{{APIRef("DOM")}}
- -

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.

- -

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.

- -

Syntaxe

- -
event.stopImmediatePropagation();
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('DOM WHATWG', '#dom-event-stopimmediatepropagation', 'Event.stopImmediatePropagation()')}}{{Spec2('DOM WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.Event.stopImmediatePropagation")}}

diff --git a/files/fr/web/api/event/stopimmediatepropagation/index.md b/files/fr/web/api/event/stopimmediatepropagation/index.md new file mode 100644 index 0000000000..8770b808a0 --- /dev/null +++ b/files/fr/web/api/event/stopimmediatepropagation/index.md @@ -0,0 +1,42 @@ +--- +title: Event.stopImmediatePropagation() +slug: Web/API/Event/stopImmediatePropagation +tags: + - API + - Event + - Méthode + - Reference +translation_of: Web/API/Event/stopImmediatePropagation +--- +
{{APIRef("DOM")}}
+ +

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.

+ +

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.

+ +

Syntaxe

+ +
event.stopImmediatePropagation();
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('DOM WHATWG', '#dom-event-stopimmediatepropagation', 'Event.stopImmediatePropagation()')}}{{Spec2('DOM WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Event.stopImmediatePropagation")}}

diff --git a/files/fr/web/api/event/stoppropagation/index.html b/files/fr/web/api/event/stoppropagation/index.html deleted file mode 100644 index 1f8dd6e09f..0000000000 --- a/files/fr/web/api/event/stoppropagation/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Event.stopPropagation() -slug: Web/API/Event/stopPropagation -tags: - - API - - DOM - - Evènement - - Méthode - - Reference -translation_of: Web/API/Event/stopPropagation ---- -
{{APIRef("DOM")}}
- -

Évite que l'évènement courant ne se propage plus loin dans les phases de capture et de déploiement.

- -

Syntaxe

- -
event.stopPropagation();
- -

Exemple

- -

Voir la section Exemple 5 : Propagation d'évènements dans le chapitre Exemples pour un exemple plus détaillé de cette méthode et de la propagation d'évènements dans le DOM.

- -

Notes

- -

Voir DOM specification (en)  pour une explication du flux d'évènements. (Une illustration est disponible dans le brouillon DOM Level 3 Event draft (en)).

- -

preventDefault est une méthode complémentaire qui peut être utilisée pour empêcher l'action par défaut de l'évènement.

- -

Spécification

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{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
- -

Compatibilité des navigateurs

- -

{{Compat("api.Event.stopPropagation")}}

\ No newline at end of file diff --git a/files/fr/web/api/event/stoppropagation/index.md b/files/fr/web/api/event/stoppropagation/index.md new file mode 100644 index 0000000000..1f8dd6e09f --- /dev/null +++ b/files/fr/web/api/event/stoppropagation/index.md @@ -0,0 +1,59 @@ +--- +title: Event.stopPropagation() +slug: Web/API/Event/stopPropagation +tags: + - API + - DOM + - Evènement + - Méthode + - Reference +translation_of: Web/API/Event/stopPropagation +--- +
{{APIRef("DOM")}}
+ +

Évite que l'évènement courant ne se propage plus loin dans les phases de capture et de déploiement.

+ +

Syntaxe

+ +
event.stopPropagation();
+ +

Exemple

+ +

Voir la section Exemple 5 : Propagation d'évènements dans le chapitre Exemples pour un exemple plus détaillé de cette méthode et de la propagation d'évènements dans le DOM.

+ +

Notes

+ +

Voir DOM specification (en)  pour une explication du flux d'évènements. (Une illustration est disponible dans le brouillon DOM Level 3 Event draft (en)).

+ +

preventDefault est une méthode complémentaire qui peut être utilisée pour empêcher l'action par défaut de l'évènement.

+ +

Spécification

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{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
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Event.stopPropagation")}}

\ No newline at end of file diff --git a/files/fr/web/api/event/target/index.html b/files/fr/web/api/event/target/index.html deleted file mode 100644 index 2ab12c5de0..0000000000 --- a/files/fr/web/api/event/target/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Event.target -slug: Web/API/Event/target -tags: - - API - - Cible - - DOM - - Evènement - - Propriétés -translation_of: Web/API/Event/target ---- -

{{ ApiRef("DOM") }}

- -

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.

- -

Syntaxe

- -
laCible = event.target
- -

Exemple

- -

La propriété event.target peut être utilisée pour implémenter la délégation d'événements.

- -
// Produit une liste
-var ul = document.createElement('ul');
-document.body.appendChild(ul);
-
-var li1 = document.createElement('li');
-var li2 = document.createElement('li');
-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.style.visibility = 'hidden';
-}
-
-// Attache l'écouteur à la liste
-// Il se déclenche pour chaque <li> clické
-ul.addEventListener('click', hide, false);
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{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.

- -
function hide(e) {
-  // Support IE6-8
-  var target = e.target || e.srcElement;
-  target.style.visibility = 'hidden';
-}
-
- -

Voir aussi

- -

Comparaison des cibles d'évènements

diff --git a/files/fr/web/api/event/target/index.md b/files/fr/web/api/event/target/index.md new file mode 100644 index 0000000000..2ab12c5de0 --- /dev/null +++ b/files/fr/web/api/event/target/index.md @@ -0,0 +1,89 @@ +--- +title: Event.target +slug: Web/API/Event/target +tags: + - API + - Cible + - DOM + - Evènement + - Propriétés +translation_of: Web/API/Event/target +--- +

{{ ApiRef("DOM") }}

+ +

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.

+ +

Syntaxe

+ +
laCible = event.target
+ +

Exemple

+ +

La propriété event.target peut être utilisée pour implémenter la délégation d'événements.

+ +
// Produit une liste
+var ul = document.createElement('ul');
+document.body.appendChild(ul);
+
+var li1 = document.createElement('li');
+var li2 = document.createElement('li');
+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.style.visibility = 'hidden';
+}
+
+// Attache l'écouteur à la liste
+// Il se déclenche pour chaque <li> clické
+ul.addEventListener('click', hide, false);
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{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.

+ +
function hide(e) {
+  // Support IE6-8
+  var target = e.target || e.srcElement;
+  target.style.visibility = 'hidden';
+}
+
+ +

Voir aussi

+ +

Comparaison des cibles d'évènements

diff --git a/files/fr/web/api/event/timestamp/index.html b/files/fr/web/api/event/timestamp/index.html deleted file mode 100644 index c4bc3ffe6a..0000000000 --- a/files/fr/web/api/event/timestamp/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: Event.timeStamp -slug: Web/API/Event/timeStamp -tags: - - API - - DOM - - Evènement - - Propriétés - - temps -translation_of: Web/API/Event/timeStamp ---- -
{{ApiRef("DOM")}}
- -

Retourne le temps (en millisecondes) à partir duquel l'événement a été créé.

- -
-

Note : Cette propriété fonctionne seulement si le système d'évènements le prend en charge pour des évènements particuliers.

-
- -

Syntaxe

- -
event.timeStamp
-
- -

Valeur

- -

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.

- -

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.

- -

Exemple

- -

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>
- -

JavaScript

- -
function getTime(event) {
-  var time = document.getElementById("time");
-  time.firstChild.nodeValue = event.timeStamp;
-}
-document.body.addEventListener("keypress", getTime);
- -

Résultat

- -

{{EmbedLiveSample("Example", "100%", 100)}}

- -

Précision du temps réduite

- -

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.

- -
// Précision du temps réduite (2ms) dans Firefox 60
-event.timeStamp;
-// 1519211809934
-// 1519211810362
-// 1519211811670
-// ...
-
-
-// Précision du temps réduite avec `privacy.resistFingerprinting` activé
-event.timeStamp;
-// 1519129853500
-// 1519129858900
-// 1519129864400
-// ...
- -

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écificationStatutCommentaire
{{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/timestamp/index.md b/files/fr/web/api/event/timestamp/index.md new file mode 100644 index 0000000000..c4bc3ffe6a --- /dev/null +++ b/files/fr/web/api/event/timestamp/index.md @@ -0,0 +1,108 @@ +--- +title: Event.timeStamp +slug: Web/API/Event/timeStamp +tags: + - API + - DOM + - Evènement + - Propriétés + - temps +translation_of: Web/API/Event/timeStamp +--- +
{{ApiRef("DOM")}}
+ +

Retourne le temps (en millisecondes) à partir duquel l'événement a été créé.

+ +
+

Note : Cette propriété fonctionne seulement si le système d'évènements le prend en charge pour des évènements particuliers.

+
+ +

Syntaxe

+ +
event.timeStamp
+
+ +

Valeur

+ +

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.

+ +

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.

+ +

Exemple

+ +

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>
+ +

JavaScript

+ +
function getTime(event) {
+  var time = document.getElementById("time");
+  time.firstChild.nodeValue = event.timeStamp;
+}
+document.body.addEventListener("keypress", getTime);
+ +

Résultat

+ +

{{EmbedLiveSample("Example", "100%", 100)}}

+ +

Précision du temps réduite

+ +

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.

+ +
// Précision du temps réduite (2ms) dans Firefox 60
+event.timeStamp;
+// 1519211809934
+// 1519211810362
+// 1519211811670
+// ...
+
+
+// Précision du temps réduite avec `privacy.resistFingerprinting` activé
+event.timeStamp;
+// 1519129853500
+// 1519129858900
+// 1519129864400
+// ...
+ +

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écificationStatutCommentaire
{{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.html b/files/fr/web/api/event/type/index.html deleted file mode 100644 index 7931a24a5a..0000000000 --- a/files/fr/web/api/event/type/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Event.type -slug: Web/API/Event/type -tags: - - API - - DOM - - Evènement - - Propriétés - - Type -translation_of: Web/API/Event/type ---- -

{{APIRef}}

- -

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.

- -

L'argument event de {{ domxref("EventTarget.addEventListener()") }} et {{ domxref("EventTarget.removeEventListener()") }} n'est pas sensible à la casse.

- -

Pour une liste des types d'événements disponibles, aller voir la page Référence des évènements.

- -

Syntaxe

- -
event.type
-
- -

Exemples

- -
<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-
-    <title>Event.type Example</title>
-
-    <script>
-        var currEvent;
-        function getEvtType(evt) {
-            console.group();
-
-            currEvent = evt.type;
-            console.log(currEvent);
-
-            document.getElementById("Etype").innerHTML = currEvent;
-
-            console.groupEnd();
-        }
-
-        //Évènements du clavier
-        document.addEventListener("keypress", getEvtType, false); //[second]  
-
-        document.addEventListener("keydown", getEvtType, false); //premier
-        document.addEventListener("keyup", getEvtType, false); //troisième
-
-        //Évènements de la souris
-        document.addEventListener("click", getEvtType, false); // troisième
-
-        document.addEventListener("mousedown", getEvtType, false); //premier
-        document.addEventListener("mouseup", getEvtType, false); //second
-
-    </script>
-</head>
-
-<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>
-
-</body>
-</html>
- -

Résultat

- -

{{EmbedLiveSample('Example')}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{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.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Event.type")}}

diff --git a/files/fr/web/api/event/type/index.md b/files/fr/web/api/event/type/index.md new file mode 100644 index 0000000000..7931a24a5a --- /dev/null +++ b/files/fr/web/api/event/type/index.md @@ -0,0 +1,102 @@ +--- +title: Event.type +slug: Web/API/Event/type +tags: + - API + - DOM + - Evènement + - Propriétés + - Type +translation_of: Web/API/Event/type +--- +

{{APIRef}}

+ +

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.

+ +

L'argument event de {{ domxref("EventTarget.addEventListener()") }} et {{ domxref("EventTarget.removeEventListener()") }} n'est pas sensible à la casse.

+ +

Pour une liste des types d'événements disponibles, aller voir la page Référence des évènements.

+ +

Syntaxe

+ +
event.type
+
+ +

Exemples

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+
+    <title>Event.type Example</title>
+
+    <script>
+        var currEvent;
+        function getEvtType(evt) {
+            console.group();
+
+            currEvent = evt.type;
+            console.log(currEvent);
+
+            document.getElementById("Etype").innerHTML = currEvent;
+
+            console.groupEnd();
+        }
+
+        //Évènements du clavier
+        document.addEventListener("keypress", getEvtType, false); //[second]  
+
+        document.addEventListener("keydown", getEvtType, false); //premier
+        document.addEventListener("keyup", getEvtType, false); //troisième
+
+        //Évènements de la souris
+        document.addEventListener("click", getEvtType, false); // troisième
+
+        document.addEventListener("mousedown", getEvtType, false); //premier
+        document.addEventListener("mouseup", getEvtType, false); //second
+
+    </script>
+</head>
+
+<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>
+
+</body>
+</html>
+ +

Résultat

+ +

{{EmbedLiveSample('Example')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{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.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Event.type")}}

-- cgit v1.2.3-54-g00ecf