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
|
---
title: EventTarget
slug: Web/API/EventTarget
tags:
- API
- Cible de l'événement
- DOM
- DOM Events
- EventTarget
- Interface
- Événements DOM
translation_of: Web/API/EventTarget
browser-compat: api.EventTarget
---
{{ApiRef("DOM Events")}}
`EventTarget` est une interface DOM implémentée par des objets qui peuvent recevoir des événements et peuvent avoir des écouteurs pour eux.
{{domxref ("Element")}}, {{domxref ("Document")}} et {{domxref ("Window")}} sont les cibles d'événements les plus fréquentes, mais d'autres objets peuvent également être des cibles d'événements. Par exemple {{domxref ("XMLHttpRequest")}}, {{domxref ("AudioNode")}}, {{domxref ("AudioContext")}} et autres.
De nombreuses cibles d'événements (y compris des éléments, des documents et des fenêtres) supporte également la définition de [gestionnaires d'événements](/fr/docs/Web/Guide/DOM/Events/Event_handlers) via les propriétés et attributs `onevent`.
{{InheritanceDiagram}}
## Constructeur
- {{domxref("EventTarget.EventTarget()", "EventTarget()")}}
- : Crée une nouvelle instance d'objet `EventTarget`.
## Méthodes
- {{domxref("EventTarget.addEventListener()", "<var>EventTarget</var>.addEventListener()")}}
- : Enregistre un gestionnaire d'événements d'un type d'événement spécifique sur `EventTarget`.
- {{domxref("EventTarget.removeEventListener()", "<var>EventTarget</var>.removeEventListener()")}}
- : Supprime un écouteur d'événement de `EventTarget`.
- {{domxref("EventTarget.dispatchEvent()", "<var>EventTarget</var>.dispatchEvent()")}}
- : Envoie un événement à cet `EventTarget`.
### Méthodes supplémentaires dans la base de code Chrome de Mozilla
Mozilla inclut quelques extensions à utiliser par les cibles d'événements implémentées par JS pour implémenter les propriétés `onevent`.
Voir aussi [liaisons WebIDL](/fr/docs/Mozilla/WebIDL_bindings).
- `void setEventHandler(DOMString type, EventHandler handler)` {{non-standard_inline}}
- `EventHandler getEventHandler(DOMString type)` {{non-standard_inline}}
## Exemple
### Implémentation simple d'EventTarget
```js
const EventTarget = function () {
this.listeners = {}
}
EventTarget.prototype.listeners = null
EventTarget.prototype.addEventListener = function (type, callback) {
if (!(type in this.listeners)) {
this.listeners[type] = []
}
this.listeners[type].push(callback)
}
EventTarget.prototype.removeEventListener = function (type, callback) {
if (!(type in this.listeners)) {
return
}
const stack = this.listeners[type]
for (let i = 0, l = stack.length; i < l; i++) {
if (stack[i] === callback) {
stack.splice(i, 1)
return
}
}
}
EventTarget.prototype.dispatchEvent = function (event) {
if (!(event.type in this.listeners)) {
return true
}
const stack = this.listeners[event.type].slice()
for (let i = 0, l = stack.length; i < l; i++) {
stack[i].call(this, event)
}
return !event.defaultPrevented
}
```
## Spécifications
{{Specifications}}
## Compatiblité des navigateurs
{{Compat}}
## Voir également
- [Référence d'événement](/fr/docs/Web/Reference/Events) - les événements disponibles sur la plateforme.
- [Guide du développeur d'événements](/fr/docs/Web/Guide/DOM/Events)
- {{domxref("Event")}} interface
|
