dexblog.ro
JS Comenzi JavaScript

addEventListener în JavaScript

Pagina web (DOM) Toate browserele moderne

Rulează o funcție când se întâmplă ceva pe pagină: un clic, o tastă, trimiterea unui formular.

Sintaxă 
element.addEventListener(eveniment, functie, optiuni)

Ce face addEventListener

addEventListener „ascultă” un eveniment pe un element. Când evenimentul are loc, funcția dată este apelată și primește un obiect cu detalii despre eveniment.

Evenimente frecvente: click, input (câmp modificat), submit (formular trimis), keydown (tastă apăsată), DOMContentLoaded (pagina a fost încărcată).

Cu eveniment.preventDefault() oprești comportamentul obișnuit al browserului, de exemplu reîncărcarea paginii la trimiterea unui formular.

Parametri

Parametru Descriere
eveniment Numele evenimentului, fără „on”: "click", nu "onclick".
functie Funcția apelată. Primește obiectul evenimentului.
optiuni Opțional. De exemplu { once: true } pentru a asculta o singură dată.

Ce returnează

undefined.

Exemple

Exemplul 1: Numărarea clicurilor

<button id="buton">Apasă</button>

<script>
  let clicuri = 0;

  document.querySelector("#buton").addEventListener("click", () => {
    clicuri++;
    console.log(`Clicuri: ${clicuri}`);
  });
</script>

Rezultat în browser, după trei clicuri

Clicuri: 1
Clicuri: 2
Clicuri: 3

Exemplul 2: Formular fără reîncărcarea paginii

<form id="abonare">
  <input name="email" value="ana@exemplu.ro">
  <button>Abonează-te</button>
</form>

<script>
  document.querySelector("#abonare").addEventListener("submit", (eveniment) => {
    eveniment.preventDefault();
    const email = eveniment.target.email.value;
    console.log("Trimit abonarea pentru " + email);
  });
</script>

Rezultat în browser, după apăsarea butonului

Trimit abonarea pentru ana@exemplu.ro

Greșeli frecvente

  • Scrii addEventListener("click", functie()), cu paranteze. Funcția rulează imediat, la încărcarea paginii, nu la clic.
  • Folosești "onclick" ca nume de eveniment. Numele corect este "click".
  • Adaugi ascultătorul de mai multe ori (de exemplu, într-o funcție apelată repetat) și funcția rulează de mai multe ori la un singur clic.

Comenzi înrudite