EventTarget
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
EventTarget
est une interface DOM implémentée par des objets qui peuvent recevoir des événements et peuvent avoir des écouteurs pour eux.
Element
, Document
et 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 XMLHttpRequest
, AudioNode
, 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 via les propriétés et attributs onevent
.
Constructeur
EventTarget()
-
Crée une nouvelle instance d'objet
EventTarget
.
Méthodes
EventTarget.addEventListener()
-
Enregistre un gestionnaire d'événements d'un type d'événement spécifique sur
EventTarget
. EventTarget.removeEventListener()
-
Supprime un écouteur d'événement de
EventTarget
. EventTarget.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.
void setEventHandler(DOMString type, EventHandler handler)
Non standardEventHandler getEventHandler(DOMString type)
Non standard
Exemple
Implémentation simple d'EventTarget
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
Specification |
---|
DOM # interface-eventtarget |
Compatiblité des navigateurs
Report problems with this compatibility data on GitHubdesktop | mobile | server | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
EventTarget | ||||||||||||||
EventTarget() constructor | ||||||||||||||
addEventListener | ||||||||||||||
Form with options object supported (third parameter can be either options or a Boolean , for backwards compatibility) | ||||||||||||||
options.capture parameter | ||||||||||||||
options.once parameter | ||||||||||||||
options.passive parameter | ||||||||||||||
options.passive parameter defaults to true for touchstart and touchmove events | ||||||||||||||
options.passive parameter defaults to true for wheel and mousewheel events | ||||||||||||||
options.signal parameter | ||||||||||||||
useCapture parameter is optional | ||||||||||||||
dispatchEvent | ||||||||||||||
removeEventListener | ||||||||||||||
Form with options object supported (third parameter can be either options or a Boolean , for backwards compatibility) | ||||||||||||||
useCapture parameter is optional |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- See implementation notes.
- Has more compatibility info.
Voir aussi
- Référence d'événement - les événements disponibles sur la plateforme.
- Guide du développeur d'événements
Event
interface