`dispatchEvent / new Event / CustomEvent` în JavaScript

Evenimente și observatori Toate browserele moderne, Node.js 15+ (CustomEvent: Node.js 19+)

Creează și declanșează evenimente proprii, cu date atașate, pe care le ascultă alte părți ale codului.

Sintaxă

element.dispatchEvent(new Event("tip", { bubbles: true }))
new CustomEvent("tip", { detail: date })

Ce face `dispatchEvent / new Event / CustomEvent`

new Event(tip, optiuni) creează un eveniment; bubbles: true îl face să urce prin părinți, iar cancelable: true permite preventDefault. new CustomEvent(tip, { detail }) adaugă date proprii în e.detail.

dispatchEvent(e) trimite evenimentul: ascultătorii rulează imediat, sincron, înainte ca dispatchEvent să returneze. Returnează false dacă un ascultător a apelat preventDefault() pe un eveniment anulabil. Orice obiect poate emite evenimente dacă extinde EventTarget.

Parametri

Parametru	Descriere
`tip`	Numele evenimentului.
`optiuni`	`bubbles`, `cancelable`, `composed` și, la CustomEvent, `detail`.

Ce returnează

dispatchEvent: false dacă evenimentul a fost anulat, altfel true.

Exemple

Exemplul 1: Un coș care anunță modificările

class Cos extends EventTarget {
  #produse = [];
  adauga(produs) {
    this.#produse.push(produs);
    this.dispatchEvent(new CustomEvent("schimbat", { detail: { total: this.#produse.length, produs } }));
  }
}

const cos = new Cos();
cos.addEventListener("schimbat", (e) => console.log(`${e.detail.produs} adăugat; în coș: ${e.detail.total}`));
cos.adauga("Carte");
cos.adauga("Pix");

Rezultat

Carte adăugat; în coș: 1
Pix adăugat; în coș: 2

Exemplul 2: Un eveniment anulabil

const document_ = new EventTarget();

document_.addEventListener("inchide", (e) => {
  console.log("modificări nesalvate, opresc închiderea");
  e.preventDefault();
});

const permis = document_.dispatchEvent(new Event("inchide", { cancelable: true }));
console.log(permis);
console.log(document_.dispatchEvent(new Event("inchide")));