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
|
---
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
---
<nav>{{ApiRef("DOM Events")}}</nav>
<p><span class="seoSummary"><code>EventTarget</code> est une interface DOM implémentée par des objets qui peuvent recevoir des événements et peuvent avoir des écouteurs pour eux.</span></p>
<p>{{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.</p>
<p>De nombreuses cibles d'événements (y compris des éléments, des documents et des fenêtres) supporte également la définition de <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/Event_handlers">gestionnaires d'événements</a> via les propriétés et attributs <code>onevent</code>.</p>
<p>{{InheritanceDiagram}}</p>
<h2 id="Constructeur">Constructeur</h2>
<dl>
<dt>{{domxref("EventTarget.EventTarget()", "EventTarget()")}}</dt>
<dd>Crée une nouvelle instance d'objet <code>EventTarget</code>.</dd>
</dl>
<h2 id="Méthodes">Méthodes</h2>
<dl>
<dt>{{domxref("EventTarget.addEventListener()", "<var>EventTarget</var>.addEventListener()")}}</dt>
<dd>Enregistre un gestionnaire d'événements d'un type d'événement spécifique sur <code>EventTarget</code>.</dd>
<dt>{{domxref("EventTarget.removeEventListener()", "<var>EventTarget</var>.removeEventListener()")}}</dt>
<dd>Supprime un écouteur d'événement de <code>EventTarget</code>.</dd>
<dt>{{domxref("EventTarget.dispatchEvent()", "<var>EventTarget</var>.dispatchEvent()")}}</dt>
<dd>Envoie un événement à cet <code>EventTarget</code>.</dd>
</dl>
<h3 id="Méthodes_supplémentaires_dans_la_base_de_code_Chrome_de_Mozilla">Méthodes supplémentaires dans la base de code Chrome de Mozilla</h3>
<p>Mozilla inclut quelques extensions à utiliser par les cibles d'événements implémentées par JS pour implémenter les propriétés <code>onevent</code>.</p>
<p>Voir aussi <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/WebIDL_bindings">liaisons WebIDL</a>.</p>
<ul>
<li><code>void <strong>setEventHandler</strong>(DOMString <var>type</var>, EventHandler <var>handler</var>)</code> {{non-standard_inline}}</li>
<li><code>EventHandler <strong>getEventHandler</strong>(DOMString <var>type</var>)</code> {{non-standard_inline}}</li>
</ul>
<h2 id="Exemple">Exemple</h2>
<h3 id="Implémentation_simple_dEventTarget">Implémentation simple d'EventTarget</h3>
<pre class="brush: js notranslate">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
}
</pre>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('DOM WHATWG', '#interface-eventtarget', 'EventTarget')}}</td>
<td>{{Spec2('DOM WHATWG')}}</td>
<td>Pas de changement.</td>
</tr>
<tr>
<td>{{SpecName('DOM3 Events', 'DOM3-Events.html#interface-EventTarget', 'EventTarget')}}</td>
<td>{{Spec2('DOM3 Events')}}</td>
<td>Quelques paramètres sont désormais optionnels (<code>listener</code>), ou acceptent la valeur nulle (<code>useCapture</code>).</td>
</tr>
<tr>
<td>{{SpecName('DOM2 Events', 'events.html#Events-EventTarget', 'EventTarget')}}</td>
<td>{{Spec2('DOM2 Events')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{Compat("api.EventTarget")}}</p>
<h2 id="Voir_également">Voir également</h2>
<ul>
<li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Reference/Events">Référence d'événement</a> - les événements disponibles sur la plateforme.</li>
<li> <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events">Guide du développeur d'événements</a></li>
<li>{{domxref("Event")}} interface</li>
</ul>
|
