EventTarget : constructeur EventTarget()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 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① |
Compatibilité des navigateurs
Loading…