JavaScript HTML DOM Eventos

HTML DOM permite que JavaScript reaccione a eventos HTML:

¡El ratón se ha desplazado!
¡Haz clic aquí!

Reaccionar a eventos

JavaScript puede ejecutarse en el momento del evento, por ejemplo, cuando el usuario hace clic en algún elemento HTML.

Para ejecutar código cuando el usuario haga clic en un elemento, agregue código JavaScript a la propiedad de evento HTML:

onclick=JavaScript

Ejemplo de evento HTML:

  • Cuando el usuario hace clic en el ratón
  • cuando se carga la página web
  • cuando se carga la imagen
  • cuando el cursor se coloca sobre el elemento
  • cuando se cambia el campo de entrada
  • cuando se envía un formulario HTML
  • cuando el usuario presiona una tecla

En este ejemplo, cuando el usuario hace clic <h1> se cambia su contenido:

ejemplo

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Hello!'">¡Haz clic en este texto!</h1>
</body>
</html>

¡Prueba tú mismo!

En este ejemplo, se llama a la función desde el gestor de eventos:

ejemplo

<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">¡Haz clic en este texto!</h1>
<script>
function changeText(id) { 
    id.innerHTML = "Hello:)";
}
</script>
</body>
</html>

¡Prueba tú mismo!

propiedades de eventos HTML

para asignar eventos a elementos HTML, puede usar las propiedades de eventos.

ejemplo

asignar a button elemento onclick evento:

<button onclick="displayDate()">Prueba</button>

¡Prueba tú mismo!

en el ejemplo anterior, la función llamada displayDate se ejecutará cuando se haga clic en el botón.

asignar eventos usando HTML DOM

HTML DOM le permite asignar eventos a elementos HTML utilizando JavaScript:

ejemplo

asignar a button elemento onclick evento:

<script>
document.getElementById("myBtn").onclick = displayDate;
</script>

¡Prueba tú mismo!

en el ejemplo anterior, la función llamada displayDate se asigna al elemento HTML con id="myBtn".

se ejecutará una función cuando se haga clic en el botón.

eventos onload y onunload

se desencadenan cuando el usuario entra y sale de la página. onload y onunload eventos.

onload este evento se puede utilizar para detectar el tipo de navegador y la versión del visitante, y luego cargar la versión adecuada de la página web basada en esta información.

onload y onunload este evento se puede utilizar para manejar cookies.

ejemplo

<body onload="checkCookies()">

¡Prueba tú mismo!

onchange evento

onchange este evento se utiliza a menudo en combinación con la validación de campos de entrada.

a continuación, se muestra cómo se utiliza onchange de ejemplo. Cuando el usuario cambia el contenido del campo de entrada, se llama a la función upperCase().

ejemplo

<input type="text" id="fname" onchange="upperCase()">

¡Prueba tú mismo!

eventos onmouseover y onmouseout

onmouseover y onmouseout Los eventos se pueden usar para desencadenar una función cuando el usuario mueve el ratón sobre o fuera de un elemento HTML:

¡El ratón se ha desplazado!

¡Prueba tú mismo!

eventos onmousedown, onmouseup y onclick

onmousedown, onmouseup y onclick Los eventos constituyen el evento de clic completo del ratón.

Primero cuando se hace clic en el botón del ratón:onmousedown El evento se ha desencadenado; luego cuando se libera el botón del ratón:onmouseup El evento se ha desencadenado; finalmente, cuando se completa el clic del ratón:onclick El evento se ha desencadenado.

¡Haz clic aquí!

¡Prueba tú mismo!

Más ejemplos

onmousedown y onmouseup
Cambia la imagen cuando el usuario presiona el botón del ratón.
onload
Muestra un cuadro de alerta cuando la página se ha cargado completamente.
onfocus
Cambia el color de fondo del campo de entrada cuando se obtiene el foco.
Eventos de ratón
Cambia el color del elemento cuando el puntero se mueve sobre él.

Manual de referencia del objeto evento DOM HTML

Para obtener una lista completa de todos los eventos DOM HTML, visite nuestra Manual de referencia del objeto evento DOM HTML.