EventTarget

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.

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/fr/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

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

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

Compatibilité des navigateurs

Voir également

• Référence d'événement - les événements disponibles sur la plateforme.
•  Guide du développeur d'événements
• Event interface