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 standard
  • EventHandler getEventHandler(DOMString type) Non standard

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

Specification
DOM
# interface-eventtarget

Compatiblité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
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