În primele zile ale internetului, paginile web erau cu adevărat statice – existau doar text și imagini. Sigur, uneori acea imagine era un gif animat, dar era totuși doar o imagine.

Odată cu apariția JavaScript-ului, a devenit din ce în ce mai posibil să se creeze pagini interactive care să răspundă la acțiuni cum ar fi să faceți clic pe un buton sau să aveți o animație de derulare.

Există o serie de evenimente DOM (Document Object Model) pe care le puteți asculta în JavaScript, dar onclick și onload sunt printre cele mai frecvente.

Onclick Eveniment

onclick eveniment în JavaScript vă permite să executați o funcție atunci când se face clic pe un element.

Exemplu

<button onclick="myFunction()">Click me</button>

<script>
  function myFunction() {
    alert('Button was clicked!');
  }
</script>

În exemplul simplu de mai sus, când un utilizator face clic pe buton, va vedea o avertizare în browserul său Button was clicked!.

Se adaugă onclick dinamic

Exemplul de mai sus funcționează, dar este în general considerat o practică proastă. În schimb, este mai bine să separați conținutul paginii (HTML) de logică (JS).

Pentru a face acest lucru, onclick evenimentul poate fi adăugat programatic la orice element folosind următorul cod din exemplul următor:

<p id="foo">click on this element.</p>

<script>
  const p = document.getElementById("foo"); // Find the paragraph element in the page
  p.onclick = showAlert; // Add onclick function to element
    
  function showAlert(event) {
    alert("onclick Event triggered!");
  }
</script>

Notă

Este important să rețineți că utilizarea onclick putem adăuga o singură funcție de ascultător. Dacă doriți să adăugați mai multe, utilizați doar addEventListener(), care este modalitatea preferată pentru adăugarea evenimentelor.

În exemplul de mai sus, când un utilizator face clic pe fișierul paragraph element în html, vor vedea o alertă afișată onclick Event triggered.

Prevenirea acțiunii implicite

Cu toate acestea, dacă atașăm onclick către linkuri (HTML a etichetă) s-ar putea dori să împiedicăm să se producă acțiuni implicite:

<a id="bar" href="https://guide.freecodecamp.org">Guides</a>

<script>
  const link = document.getElementById("bar"); //  Find the link element
  link.onclick = myAlert; // Add onclick function to element

  function myAlert(event) {
    event.preventDefault();
    alert("Link was clicked but page was not open");
  }
</script>

În exemplul de mai sus am împiedicat comportamentul implicit al a element (link de deschidere) folosind event.preventDefault() în interiorul nostru onclick funcția de apel invers.

Eveniment Onload

onload evenimentul este folosit pentru a executa o funcție JavaScript imediat după încărcarea unei pagini.

Exemplu:

const body = document.body;
body.onload = myFunction;

function myFunction() {
  alert('Page finished loading');
}

Care poate fi scurtat la:

document.body.onload = function() {
  alert('Page finished loading');
}

În exemplul de mai sus, de îndată ce pagina web a fost încărcată, fișierul myFunction funcția va fi apelată, arătând Page finished loading alertă către utilizator.

onload evenimentul este de obicei atașat la <body> element. Apoi odată <body> a paginii a fost încărcat, care include toate imaginile și fișierele CSS și JS, scriptul dvs. va rula.

Mai multe informatii:

Acestea sunt doar două dintre numeroasele evenimente DOM pe care le puteți manipula cu JavaScript, dar sunt printre cele mai frecvent utilizate.

Dar uneori nu este nevoie să ascultați deloc evenimentele DOM și doriți să utilizați un eveniment bazat pe timp, cum ar fi o numărătoare inversă. Pentru un tutorial rapid despre evenimentele de sincronizare, consultați acest articol.