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

Exemplu de buton Onclick

<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!.

Adăugare onclick dinamic

onclick evenimentul poate fi, de asemenea, adăugat programatic la orice element folosind următorul cod din exemplul următor:

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

<script>
  var 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ă folosind onclick putem adăuga o singură funcție de ascultător. Dacă doriți să adăugați mai multe, folosiți doar addEventListener (), care este modalitatea preferată pentru adăugarea ascultătorului de evenimente.

Î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 href="https://guide.freecodecamp.org" onclick="myAlert()">Guides</a>

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

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

MDN

Alte resurse

jQuery .on () Atașament pentru gestionarea evenimentelor