Eventos DOM de JavaScript: Onclick y Onload

En los primeros días de Internet, las páginas web eran realmente estáticas: solo había texto e imágenes. Claro, a veces esa imagen era un gif animado, pero seguía siendo solo una imagen.

Con la llegada de JavaScript, se hizo cada vez más posible crear páginas interactivas que responderían a acciones como hacer clic en un botón o tener una animación de desplazamiento.

Hay una serie de eventos que se pueden detectar en JavaScript DOM (Document Object Model), pero onclicky onloadse encuentran entre los más comunes.

Evento al hacer clic

El onclickevento en JavaScript le permite ejecutar una función cuando se hace clic en un elemento.

Ejemplo

Click me  function myFunction() { alert('Button was clicked!'); } 

En el ejemplo simple anterior, cuando un usuario hace clic en el botón, verá una alerta en su navegador Button was clicked!.

Agregar onclickdinámicamente

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

Para hacer esto, el onclickevento se puede agregar mediante programación a cualquier elemento usando el siguiente código en el siguiente ejemplo:

click on this element.

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!"); }

Nota

Es importante tener en cuenta que al usar onclickpodemos agregar solo una función de escucha. Si desea agregar más, simplemente use addEventListener(), que es la forma preferida para agregar eventos.

En el ejemplo anterior, cuando un usuario hace clic en el paragraphelemento del html, verá una alerta onclick Event triggered.

Evitar la acción predeterminada

Sin embargo, si adjuntamos onclickenlaces ( aetiqueta HTML ), es posible que deseemos evitar que ocurra la acción predeterminada:

Guides  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"); } 

En el ejemplo anterior, evitamos el comportamiento predeterminado del aelemento (enlace de apertura) usando event.preventDefault()dentro de nuestra onclickfunción de devolución de llamada.

Evento de carga

El onloadevento se utiliza para ejecutar una función de JavaScript inmediatamente después de que se haya cargado una página.

Ejemplo:

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

Que se puede abreviar a:

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

En el ejemplo anterior, tan pronto como se cargue la página web, myFunctionse llamará a la función, mostrando la Page finished loadingalerta al usuario.

El onloadevento generalmente se adjunta al elemento. Luego, una vez que se haya cargado la página, que incluye todas las imágenes y los archivos CSS y JS, se ejecutará el script.

Más información:

Estos son solo dos de los muchos eventos DOM que puede manipular con JavaScript, pero se encuentran entre los más utilizados.

Pero a veces no necesita escuchar eventos DOM en absoluto y desea usar un evento basado en el tiempo como una cuenta regresiva. Para obtener un tutorial rápido sobre la sincronización de eventos, consulte este artículo.