Home Original page

EventTarget : constructeur EventTarget() - Les API Web | MDN

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2020.

Note : Cette fonctionnalité est disponible via les Web Workers.

Le constructeur EventTarget() crée une nouvelle instance d'objet EventTarget.

Note : Il est assez rare d'appeler explicitement ce constructeur. La plupart du temps, ce constructeur est utilisé à l'intérieur du constructeur d'un objet étendant l'interface EventTarget, en utilisant le mot-clé super.

Syntaxe

Paramètres

Aucun.

Valeur de retour

Une instance de l'objet EventTarget.

Exemples

Implémentation d'un compteur

Cet exemple implémente une classe Compteur, avec des méthodes augmenter() et reduire(). Elle déclenche un événement personnalisé "valuechange" lorsque l'une de ces méthodes est appelée.

HTML

html

<button id="dec" aria-label="Réduire">-</button>
<span id="valeurActuelle">0</span>
<button id="inc" aria-label="Augmenter">+</button>

JavaScript

js

class Compteur extends EventTarget {
  constructor(initialValue = 0) {
    super();
    this.value = initialValue;
  }

  #emettreEvenementChangement() {
    this.dispatchEvent(new CustomEvent("valuechange", { detail: this.value }));
  }

  augmenter() {
    this.value++;
    this.#emettreEvenementChangement();
  }

  reduire() {
    this.value--;
    this.#emettreEvenementChangement();
  }
}

const initialValue = 0;
const compteur = new Compteur(initialValue);
document.querySelector("#valeurActuelle").innerText = initialValue;

compteur.addEventListener("valuechange", (event) => {
  document.querySelector("#valeurActuelle").innerText = event.detail;
});

document.querySelector("#inc").addEventListener("click", () => {
  compteur.augmenter();
});

document.querySelector("#dec").addEventListener("click", () => {
  compteur.reduire();
});

Résultat

Spécifications

Spécification
DOM
# ref-for-dom-eventtarget-eventtarget①

Compatibilité des navigateurs

Voir aussi

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le par les contributeur·ice·s du MDN.