EventTarget : constructeur EventTarget()
Baseline
Widely available
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
new EventTarget();
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
<button id="dec" aria-label="Réduire">-</button>
<span id="valeurActuelle">0</span>
<button id="inc" aria-label="Augmenter">+</button>
JavaScript
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
| Specification |
|---|
| DOM> # ref-for-dom-eventtarget-eventtarget①> |