HTML DOM permite JavaScript para reaccionar a los eventos de HTML:
Reacción a los eventos
Un JavaScript puede ejecutarse cuando se produce un evento, como cuando un usuario hace clic en un elemento HTML.
Para ejecutar código cuando un usuario hace clic en un elemento, añadir código JavaScript a un atributo de evento HTML:
onclick=JavaScript
Ejemplos de eventos HTML:
- Cuando un usuario hace clic en el ratón
- Cuando una página web se ha cargado
- Cuando una imagen se ha cargado
- Cuando el ratón se mueve sobre un elemento
- Cuando se cambia un campo de entrada
- Cuando se envía un formulario HTML
- Cuando un usuario trazos de una clave
En este ejemplo, el contenido de la <h1> elemento se cambia cuando un usuario hace clic en él:
Ejemplo
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>
</body>
</html>
Inténtalo tú mismo " En este ejemplo, una función es llamada desde el controlador de eventos:
Ejemplo
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Click on this text!</h1>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</body>
</html>
Inténtalo tú mismo " Atributos HTML Evento
Para asignar eventos a elementos HTML que puede utilizar atributos de los eventos.
Ejemplo
Asignar un evento onclick a un elemento de botón:
<button onclick="displayDate()">Try it</button>
Inténtalo tú mismo " En el ejemplo anterior, una función llamada displayDate se ejecutará cuando se hace clic en el botón.
Asignar eventos usando el DOM HTML
El DOM HTML le permite asignar eventos a elementos HTML con JavaScript:
Ejemplo
Asignar un evento onclick a un elemento de botón:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
Inténtalo tú mismo " En el ejemplo anterior, una función llamada displayDate se asigna a un elemento HTML con el id="myBtn" .
La función se ejecuta cuando se hace clic en el botón.
Los onload y onunload Eventos
Los onload y onunload eventos se desencadenan cuando el usuario entra o sale de la página.
El onload de eventos se puede utilizar para comprobar el tipo de navegador y versión del navegador del visitante, y cargar la versión correcta de la página web en base a la información.
Los onload y onunload eventos se pueden utilizar para hacer frente a las cookies.
El onchange evento
El onchange evento se utiliza a menudo en combinación con la validación de campos de entrada.
A continuación se muestra un ejemplo de cómo utilizar el onchange . El upperCase() función será llamada cuando un usuario cambia el contenido de un campo de entrada.
Los onmouseover y onmouseout Eventos
El onmouseover y onmouseout eventos se puede utilizar para activar una función cuando el usuario pasa el ratón sobre, o fuera de, un elemento HTML:
El onmousedown , onmouseup y onclick Eventos
El onmousedown , onmouseup , y onclick eventos son todos partes de un clic del ratón. En primer lugar, cuando se hace clic en un botón del ratón, la onmousedown evento se dispara, entonces, cuando se suelta el botón del ratón, el onmouseup evento se dispara, por último, cuando se haya completado el clic del ratón, el onclick evento se dispara.
Más ejemplos
onmousedown y onmouseup
Cambiar de imagen cuando un usuario presiona el botón del ratón.
en carga
Mostrar un cuadro de alerta cuando la página ha terminado de cargar.
enfocado
Cambiar el color de fondo de un campo de entrada cuando se obtiene el foco.
Eventos del ratón
Cambiar el color de un elemento cuando el cursor se mueve sobre ella.
HTML DOM evento de referencia de objetos
Para obtener una lista de todos los eventos DOM HTML, visita nuestra completa HTML DOM evento de referencia del objeto .
Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 »