Evento Onclick de JavaScript explicado.

El evento onclick en JavaScript te permite como programador, ejecutar una función cuando se le da clic a un elemento.

Ejemplo de botón onclick

<button onclick="miFunc()">Haz click</button>

<script>
  function miFunc() {
    alert('Se ha dado clic al botón!');
  }
</script>

En el ejemplo de arriba, cuando un usuario haga clic en el botón, verá una alerta en el navegador que muestra Se ha dado clic al botón!

Agregando onclick dinámicamente

El evento onclick se puede añadir también mediante código a cualquier elemento utilizando el siguiente ejemplo:

<p id="foo">Haz clic en este elemento.</p>

<script>
  let p = document.getElementById("foo"); // Encuentra el elemento "p" en el sitio
  p.onclick = muestraAlerta; // Agrega función onclick al elemento
    
  function muestraAlerta(evento) {
    alert("Evento onclick ejecutado!");
  }
</script>

Nota

Es importante notar que utilizando onclick solamente podemos agregar una función de escucha (listener function) que espera que algo suceda para capturarlo. Si quisieras agregar más, puedes utilizar addEventListener(), la cual es preferida para agregar capturadores de eventos.

En el ejemplo de arriba, cuando un usuario da clic en el elemento p dentro del html, verán una alerta que muestra Evento onclick ejecutado!.

Prevenir la acción por defecto

Ahora, si añadimos onclick a enlaces (etiqueta a de HTML) podríamos querer evitar que suceda la acción por defecto(default):

<a href="https://guide.freecodecamp.org" onclick="miAlerta()">Guías</a>

<script>
  function miAlerta(evento) {
    event.preventDefault();
    alert("Se ah dado clic al enlace pero el sitio no ah sido abierto");
  }
</script>

En el ejemplo anterior hemos prevenido el comportamiento por defecto del elemento a (abre el sitio) usando event.preventDefault() dentro de nuestra funciónonclick  callback.

MDN

Traducido del artículo - Javascript Onclick Event Explained