preventDefault / stopPropagation în JavaScript

eveniment.preventDefault()
eveniment.stopPropagation()
eveniment.stopImmediatePropagation()
eveniment.composedPath()

Ce face preventDefault / stopPropagation

preventDefault() anulează comportamentul implicit: trimiterea și reîncărcarea paginii la submit, deschiderea unui link, bifarea unei căsuțe. Evenimentul continuă să ajungă la ceilalți ascultători.

stopPropagation() oprește evenimentul să mai urce spre elementele părinte, dar ceilalți ascultători de pe același element rulează. stopImmediatePropagation() îi oprește și pe aceștia. composedPath() returnează lista elementelor prin care trece evenimentul, de la țintă spre window.

Ce returnează

composedPath: un tablou. Celelalte: undefined.

Exemple

Exemplul 1: Formular trimis fără reîncărcare

document.querySelector("#abonare").addEventListener("submit", async (e) => {
  e.preventDefault();
  const email = new FormData(e.target).get("email");
  console.log("trimit fără reîncărcare:", email, e.defaultPrevented);
});

Rezultat în browser

trimit fără reîncărcare: ana@exemplu.ro true

Exemplul 2: Propagarea, pas cu pas

Ordinea ascultătorilor și oprirea propagării funcționează la fel și pe un EventTarget simplu, de aceea exemplul poate rula și în Node.js.

const buton = new EventTarget();

buton.addEventListener("click", (e) => {
  console.log("primul ascultător; elemente pe drum:", e.composedPath().length);
  e.preventDefault();
  e.stopImmediatePropagation();
});
buton.addEventListener("click", () => console.log("al doilea (nu rulează)"));

const e = new Event("click", { cancelable: true });
console.log(buton.dispatchEvent(e), e.defaultPrevented);

Rezultat

primul ascultător; elemente pe drum: 1
false true

Greșeli frecvente

• Pui return false într-un ascultător adăugat cu addEventListener. Nu oprește nimic (merge doar la onclick scris în HTML); apelează preventDefault().
• Folosești stopPropagation peste tot „ca să fie sigur” și strici delegarea evenimentelor și închiderea meniurilor la clic în afară.

Comenzi înrudite

• addEventListener: Rulează o funcție când se întâmplă ceva pe pagină: un clic, o tastă, trimiterea unui formular.
• dispatchEvent / new Event / CustomEvent: Creează și declanșează evenimente proprii, cu date atașate, pe care le ascultă alte părți ale codului.
• Element.closest: Urcă de la element spre părinți și returnează primul care se potrivește cu un selector CSS.