Repository navigation
Expand file tree
/
Copy pathindex.md
More file actions
146 lines (119 loc) · 9.49 KB
/
Copy pathindex.md
File metadata and controls
146 lines (119 loc) · 9.49 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
---
title: Event
slug: Web/API/Event
l10n:
sourceCommit: 91b5a448a517239876a4bc92640bbbf29e30b106
---
{{APIRef("DOM")}}{{AvailableInWorkers}}
L'interface **`Event`** représente un évènement qui se produit sur un [`EventTarget`](/fr/docs/Web/API/EventTarget).
Un évènement peut être déclenché par une action humaine (par exemple, un clic de souris ou une pression sur une touche du clavier) ou généré par des API pour représenter la progression d'une tâche asynchrone. Il peut aussi être déclenché par un programme, par exemple en appelant la méthode [`HTMLElement.click()`](/fr/docs/Web/API/HTMLElement/click) sur un élément, ou en définissant l'évènement puis en l'envoyant à une cible à l'aide de [`EventTarget.dispatchEvent()`](/fr/docs/Web/API/EventTarget/dispatchEvent).
Il existe de nombreux types d'évènements, dont certains utilisent d'autres interfaces dérivées de l'interface principale `Event`. L'interface `Event` contient les propriétés et méthodes communes à tous les évènements.
De nombreux éléments du DOM peuvent être configurés pour accepter (ou « écouter ») ces évènements et exécuter du code en réponse afin de les traiter (« gérer »). Les gestionnaires d'évènements sont généralement attachés à divers [éléments HTML](/fr/docs/Web/HTML/Reference/Elements) (tels que `<button>`, `<div>`, `<span>`, etc.) à l'aide de [`EventTarget.addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener), ce qui remplace généralement l'utilisation des anciens [attributs de gestion d'évènement](/fr/docs/Web/HTML/Reference/Global_attributes) en HTML. De plus, lorsqu'ils sont ajoutés correctement, ces gestionnaires peuvent aussi être détachés si besoin grâce à [`removeEventListener()`](/fr/docs/Web/API/EventTarget/removeEventListener).
> [!NOTE]
> Il est tout à fait possible d'attacher plusieurs gestionnaires d'évènement à un seul élément, y compris pour la gestion d'un évènement particulier. Ainsi, des modules de code indépendant peuvent attacher leurs gestionnaires de façon indépendante (par exemple, sur une page web, un module de publicité et un autre module d'analyse peuvent 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 propagation et de capture](/fr/docs/Learn_web_development/Core/Scripting/Events#la_propagation_et_la_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.
Notez que l'ensemble des interfaces d'évènements ont un nom qui termine par _Event_ (« évènement » en anglais).
- {{DOMxRef("AnimationEvent")}}
- {{DOMxRef("AudioProcessingEvent")}} {{Deprecated_Inline}}
- {{DOMxRef("BeforeUnloadEvent")}}
- {{DOMxRef("BlobEvent")}}
- {{DOMxRef("ClipboardChangeEvent")}}
- {{DOMxRef("ClipboardEvent")}}
- {{DOMxRef("CloseEvent")}}
- {{DOMxRef("CompositionEvent")}}
- {{DOMxRef("CustomEvent")}}
- {{DOMxRef("DeviceMotionEvent")}}
- {{DOMxRef("DeviceOrientationEvent")}}
- {{DOMxRef("DragEvent")}}
- {{DOMxRef("ErrorEvent")}}
- {{DOMxRef("FetchEvent")}}
- {{DOMxRef("FocusEvent")}}
- {{DOMxRef("FontFaceSetLoadEvent")}}
- {{DOMxRef("FormDataEvent")}}
- {{DOMxRef("GamepadEvent")}}
- {{DOMxRef("HashChangeEvent")}}
- {{DOMxRef("HIDInputReportEvent")}}
- {{DOMxRef("IDBVersionChangeEvent")}}
- {{DOMxRef("InputEvent")}}
- {{DOMxRef("KeyboardEvent")}}
- {{DOMxRef("MediaStreamEvent")}} {{Deprecated_Inline}}
- {{DOMxRef("MessageEvent")}}
- {{DOMxRef("MouseEvent")}}
- {{DOMxRef("MutationEvent")}} {{Deprecated_Inline}}
- {{DOMxRef("OfflineAudioCompletionEvent")}}
- {{DOMxRef("PageTransitionEvent")}}
- {{DOMxRef("PaymentRequestUpdateEvent")}}
- {{DOMxRef("PointerEvent")}}
- {{DOMxRef("PopStateEvent")}}
- {{DOMxRef("ProgressEvent")}}
- {{DOMxRef("RTCDataChannelEvent")}}
- {{DOMxRef("RTCPeerConnectionIceEvent")}}
- {{DOMxRef("StorageEvent")}}
- {{DOMxRef("SubmitEvent")}}
- {{DOMxRef("TimeEvent")}}
- {{DOMxRef("TouchEvent")}}
- {{DOMxRef("TrackEvent")}}
- {{DOMxRef("TransitionEvent")}}
- {{DOMxRef("UIEvent")}}
- {{DOMxRef("WebGLContextEvent")}}
- {{DOMxRef("WheelEvent")}}
## Constructeur
- {{DOMxRef("Event.Event", "Event()")}}
- : Crée un objet `Event` et le retourne à l'appelant.
## Propriétés d'instance
- {{DOMxRef("Event.bubbles")}} {{ReadOnlyInline}}
- : Un booléen indiquant si l'évènement se propage dans le DOM.
- {{DOMxRef("Event.cancelable")}} {{ReadOnlyInline}}
- : Un booléen indiquant si l'évènement est annulable.
- {{DOMxRef("Event.composed")}} {{ReadOnlyInline}}
- : Un booléen indiquant si l'évènement peut se propager à travers la frontière entre le DOM d'ombre (<i lang="en">shadow DOM</i>) et le DOM classique.
- {{DOMxRef("Event.currentTarget")}} {{ReadOnlyInline}}
- : Une référence vers la cible actuellement enregistrée pour l'évènement. Il s'agit de l'objet auquel l'évènement est actuellement destiné. Cette valeur peut être modifiée lors d'un _re-ciblage_.
- {{DOMxRef("Event.defaultPrevented")}} {{ReadOnlyInline}}
- : Indique si l'appel à {{DOMxRef("event.preventDefault()")}} a annulé l'évènement.
- {{DOMxRef("Event.eventPhase")}} {{ReadOnlyInline}}
- : Indique quelle phase du flux d'évènement est en cours de traitement. Il s'agit de l'un des nombres suivants : `NONE`, `CAPTURING_PHASE`, `AT_TARGET`, `BUBBLING_PHASE`.
- {{DOMxRef("Event.isTrusted")}} {{ReadOnlyInline}}
- : Indique si l'évènement a été initié par le navigateur (après un clic utilisateur·ice, par exemple) ou par un script (avec une méthode de création d'évènement, par exemple).
- {{DOMxRef("Event.srcElement")}} {{ReadOnlyInline}} {{Deprecated_Inline}}
- : Un alias pour la propriété {{DOMxRef("Event.target")}}. Utilisez plutôt {{DOMxRef("Event.target")}}.
- {{DOMxRef("Event.target")}} {{ReadOnlyInline}}
- : Une référence vers l'objet auquel l'évènement a été initialement envoyé.
- {{DOMxRef("Event.timeStamp")}} {{ReadOnlyInline}}
- : Un objet {{domxref("DOMHighResTimeStamp")}} représentant le moment où l'évènement a été créé, mesuré en millisecondes par rapport à l'origine temporelle de l'objet global pertinent.
- {{DOMxRef("Event.type")}} {{ReadOnlyInline}}
- : Le nom identifiant le type de l'évènement.
### Propriétés héritées et non standard
- {{DOMxRef("Event.cancelBubble")}} {{Deprecated_Inline}}
- : Un alias historique de {{DOMxRef("Event.stopPropagation()")}} qu'il convient d'utiliser à la place. Passer sa valeur à `true` avant de quitter un gestionnaire d'évènement empêche la propagation de l'évènement.
- {{DOMxRef("Event.explicitOriginalTarget")}} {{Non-standard_Inline}} {{ReadOnlyInline}}
- : La cible originale explicite de l'évènement.
- {{DOMxRef("Event.originalTarget")}} {{Non-standard_Inline}} {{ReadOnlyInline}}
- : La cible originale de l'évènement, avant tout changement de cible.
- {{DOMxRef("Event.returnValue")}} {{Deprecated_Inline}}
- : Propriété historique encore supportée pour garantir la compatibilité des sites existants. Utilisez plutôt {{DOMxRef("Event.preventDefault()")}} et {{DOMxRef("Event.defaultPrevented")}}.
- {{DOMxRef("Event.composed", "Event.scoped")}} {{ReadOnlyInline}} {{Deprecated_Inline}}
- : Un booléen indiquant si l'évènement va se propager à travers la racine d'ombre (<i lang="en">shadow root</i>) vers le DOM standard. Utilisez plutôt {{DOMxRef("Event.composed", "composed")}}.
## Méthodes d'instance
- {{DOMxRef("Event.composedPath()")}}
- : Retourne le chemin de l'évènement (un tableau d'objets sur lesquels les écouteurs sont invoqués). Cela n'inclut pas les nœuds dans les arbres d'ombre (<i lang="en">shadow trees</i>) si la racine d'ombre (<i lang="en">shadow root</i>) a été créée avec son {{DOMxRef("ShadowRoot.mode")}} fermé.
- {{DOMxRef("Event.preventDefault()")}}
- : Annule l'évènement (s'il est annulable).
- {{DOMxRef("Event.stopImmediatePropagation()")}}
- : Pour cet évènement particulier, empêche tous les autres écouteurs d'être appelés. Cela inclut les écouteurs attachés au même élément ainsi que ceux attachés à des éléments qui sont parcourus plus tard (par exemple lors de la phase de capture).
- {{DOMxRef("Event.stopPropagation()")}}
- : Stoppe la propagation de l'évènement plus loin dans le DOM.
### Méthodes dépréciées
- {{DOMxRef("Event.initEvent()")}} {{Deprecated_Inline}}
- : Initialise la valeur d'un objet `Event` créé. Si l'évènement a déjà été déclenché, cette méthode ne fait rien. Utilisez plutôt le constructeur ({{DOMxRef("Event.Event", "Event()")}}).
## Spécifications
{{Specifications}}
## Compatibilité des navigateurs
{{Compat}}
## Voir aussi
- [Référence des évènements](/fr/docs/Web/API/Document_Object_Model/Events#event_index)
- [Apprendre : Introduction aux évènements](/fr/docs/Learn_web_development/Core/Scripting/Events)
- [Apprendre : Propagation des évènements](/fr/docs/Learn_web_development/Core/Scripting/Event_bubbling)
- [Créer et déclencher des évènements personnalisés](/fr/docs/Web/API/Document_Object_Model/Events#créer_et_déclencher_des_évènements)