JavaScript Eventos HTML DOM
HTML DOM permite que JavaScript tenga la capacidad de reaccionar a eventos HTML.
Ejemplos
Reaccionar a eventos
Podemos ejecutar JavaScript cuando ocurre un evento, como cuando el usuario hace clic en un elemento HTML.
Para ejecutar código cuando el usuario hace clic en un elemento, agregue código JavaScript a un atributo de evento HTML:
Ejemplos de eventos HTML:
- Cuando el usuario hace clic con el mouse
- Cuando la página web ha cargado
- Cuando la imagen ha cargado
- Cuando el mouse se mueve sobre un elemento
- Cuando se cambia un campo de entrada
- Cuando se envía un formulario HTML
- Cuando el usuario presiona una tecla
En este ejemplo, cuando el usuario hace clic en el elemento <h1>, se cambiará su contenido:
Ejemplos
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">¡Haz clic en el texto!</h1>
</body>
</html>
Pruébalo »
Este ejemplo llama a una función desde el controlador de eventos:
Ejemplos
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">¡Haz clic en el texto!</h1>
</body>
</html>
Pruébalo »
Atributos de eventos HTML
Para asignar eventos a elementos HTML, puede usar atributos de eventos.
Ejemplos
Asignar el evento onclick al elemento button:
Pruébalo »
En el ejemplo anterior, la función llamada displayDate se ejecutará cuando se haga clic en el botón.
Usar HTML DOM para asignar eventos
HTML DOM le permite usar JavaScript para asignar eventos a elementos HTML:
Ejemplos
Asignar el evento onclick al elemento button:
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
Pruébalo »
En el ejemplo anterior, la función llamada displayDate se asigna al elemento HTML con id="myBtn".
La función Javascript se ejecutará cuando se haga clic en el botón.
Eventos onload y onunload
Los eventos onload y onunload se activan cuando el usuario entra o sale de la página.
El evento onload se puede usar para detectar el tipo y la versión del navegador del visitante, y cargar la versión correcta de la página web basándose en esa información.
Los eventos onload y onunload se pueden usar para manejar cookies.
Evento onchange
El evento onchange se usa a menudo junto con la validación de campos de entrada.
A continuación se muestra un ejemplo de cómo usar onchange. Cuando el usuario cambia el contenido de un campo de entrada, se llama a la función upperCase().
Eventos onmouseover y onmouseout
Los eventos onmouseover y onmouseout se pueden usar para activar una función cuando el mouse del usuario se mueve sobre un elemento HTML o sale de él.
Eventos onmousedown, onmouseup y onclick
onmousedown, onmouseup y onclick constituyen todas las partes del evento de clic del mouse. Primero, cuando se presiona el botón del mouse, se activa el evento onmousedown; cuando se suelta el botón del mouse, se activa el evento onmouseup; y finalmente, cuando se completa el clic del mouse, se activa el evento onclick.
Ejemplos
Un ejemplo simple de onmousedown-onmouseup:
Más ejemplos
onmousedown y onmouseup
Cambiar una imagen cuando el usuario presiona el botón del mouse.
onload
Mostrar un cuadro de aviso cuando la página termine de cargar.
onfocus
Cambiar el color de fondo de un campo de entrada cuando recibe el foco.
Eventos del mouse
Cuando el puntero se mueve sobre un elemento, cambia su color; cuando el puntero sale del texto, cambia su color nuevamente.