En los orígenes del internet, las páginas web eran realmente estáticas – solo había texto e imágenes. Bueno, algunas veces las imágenes eran gifs animados, pero al fin y al cabo son simplemente imágenes.

Con la llegada de JavaScript, se abrió un mundo de posibilidades para crear páginas interactivas que respondiesen a acciones como dar clic en un botón o tener una animación de desplazamiento.

Existen múltiples eventos del DOM (Document Object Model) que se pueden "escuchar" en JavaScript, pero onclick y onload están dentro de los más populares.

Evento onclick

El evento onclick en JavaScript te permite ejecutar una función cuando se hace clic en un elemento.

Ejemplo

<button onclick="miFuncion()">Dame clic</button>

<script>
  function miFuncion() {
    alert('¡El botón fue presionado!');
  }
</script>

En el ejemplo anterior, cuando un usuario da clic en el botón, aparece una alerta en el navegador que muestra ¡El botón fue presionado!.

Agregar onclick dinámicamente

El ejemplo anterior funciona, pero generalmente se considera una mala práctica. En vez de hacer eso, es mejor separar el contenido de la página (HTML) de la lógica (JS).

Para lograrlo, el evento onclick puede ser agregado programáticamente a cualquier elemento usando el siguiente código:

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

<script>
  const p = document.getElementById("foo"); // Encuentra el elemento de párrafo en la página a través de su id "foo"
  p.onclick = mostrarAlerta; // Agrega la función onclick al elemento
    
  function mostrarAlerta(evento) {
    alert("¡Evento onclick activado!");
  }
</script>

Nota

Es importante mencionar que al usar onclick, solo podemos agregar una función Listener. Si quieres agregar más, usa addEventListener(). Esta es la manera preferible de agregar eventos.

En el ejemplo anterior, cuando un usuario da clic en el elemento p en el html, verán una alerta que muestra ¡Evento onclick activado!.

Prevenir acciones por defecto

Si agregamos onclick a enlaces (Es decir, el tag a en HTML), es posible que queramos prevenir que ocurran acciones por defecto:

<a id="bar" href="https://www.freecodecamp.org/espanol/news/">Guías</a>

<script>
  const enlace = document.getElementById("bar"); //  Encuentra el elemento de enlace con id "bar"
  enlace.onclick = miAlerta; // Agrega la función onclick al elemento

  function miAlerta(evento) {
    evento.preventDefault();
    alert("Se dio clic al enlace pero no se abrió la página");
  }
</script>

En el anterior ejemplo, impedimos el comportamiento por defecto del elemento  a (abrir un enlace) al usar evento.preventDefault() dentro de nuestra función Callbak onclick.

Evento onload

El evento onload se usa para ejecutar una función de JavaScript tan pronto como una página haya cargado.

Ejemplo:

const cuerpoDelDocumento = document.body;
cuerpoDelDocumento.onload = miFuncion;

function miFuncion() {
  alert('La página terminó de cargar');
}

Que puede ser abreviado a:

document.body.onload = function() {
  alert('La página terminó de cargar');
}

En el ejemplo anterior, tan pronto como la página es cargada, la función miFuncion será llamada, y mostrará la alerta La página terminó de cargar al usuario.

El evento onload es usualmente añadido al elemento <body>. Entonces, tan pronto el cuerpo (<body>) del documento haya cargado — incluyendo imágenes, archivos de CSS y JavaScript, tu script se ejecutará.

Más información:

Estos son solo dos de los muchos eventos del DOM que puedes manipular con JavaScript, aunque son de los más usados.

Sin embargo, algunas veces no necesitarás "escuchar" eventos del DOM y querrás usar un evento de tiempo como lo es un conteo regresivo. Si te interesa un tutorial rápido sobre este tema, visita este artículo.

Traducido del artículo JavaScript DOM Events: Onclick and Onload