JavaScript HTML DOM Eventos
HTML DOM permite que JavaScript reaccione a eventos HTML:
Reaccionar a los eventos
Un JavaScript se puede ejecutar cuando ocurre un evento, como cuando un usuario hace clic en un elemento HTML.
Para ejecutar código cuando un usuario hace clic en un elemento, agregue código JavaScript a un atributo de evento HTML:
onclick=JavaScript
Ejemplos de eventos HTML:
- Cuando un usuario hace clic con el mouse
- Cuando una página web ha cargado
- Cuando se ha cargado una imagen
- Cuando el mouse se mueve sobre un elemento
- Cuando se cambia un campo de entrada
- Cuando se envía un formulario HTML
- Cuando un usuario pulsa una tecla
En este ejemplo, el contenido del <h1>elemento 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>
En este ejemplo, se llama a una función 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>
Atributos de eventos HTML
Para asignar eventos a elementos HTML, puede usar atributos de eventos.
Ejemplo
Asigne un evento onclick a un elemento de botón:
<button onclick="displayDate()">Try it</button>
En el ejemplo anterior, se ejecutará una función nombrada displayDatecuando se haga clic en el botón.
Asignar eventos utilizando el HTML DOM
El HTML DOM le permite asignar eventos a elementos HTML usando JavaScript:
Ejemplo
Asigne un evento onclick a un elemento de botón:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
En el ejemplo anterior, displayDatese asigna una función con nombre a un elemento HTML con la extensión id="myBtn".
La función se ejecutará cuando se haga clic en el botón.
Los eventos onload y onunload
Los eventos onloady onunloadse activan cuando el usuario entra o sale de la página.
El onloadevento se puede utilizar para comprobar el tipo de navegador y la versión del navegador del visitante, y cargar la versión adecuada de la página web en función de la información.
Los eventos onloady onunloadse pueden utilizar para tratar con las cookies.
Ejemplo
<body onload="checkCookies()">
El evento onchange
El onchangeevento se usa a menudo en combinación con la validación de campos de entrada.
A continuación se muestra un ejemplo de cómo utilizar onchange. La upperCase()
función se llamará cuando un usuario cambie el contenido de un campo de entrada.
Ejemplo
<input type="text" id="fname"
onchange="upperCase()">
Los eventos onmouseover y onmouseout
Los eventos onmouseovery onmouseoutse pueden usar para activar una función cuando el usuario pasa el mouse sobre o fuera de un elemento HTML:
Los eventos onmousedown, onmouseup y onclick
Los eventos onmousedown, onmouseupy onclickson todos partes de un clic del mouse. Primero, cuando se hace clic en un botón del mouse, se activa el evento onmousedown, luego, cuando se suelta el botón del mouse, se activa el evento onmouseup, finalmente, cuando se completa el clic del mouse, se activa el evento onclick.
Más ejemplos
Cambiar una imagen cuando un usuario mantiene presionado el botón del mouse.
Muestra un cuadro de alerta cuando la página ha terminado de cargarse.
Cambia el color de fondo de un campo de entrada cuando recibe el foco.
Cambia el color de un elemento cuando el cursor se mueve sobre él.
Referencia de objeto de evento HTML DOM
Para obtener una lista de todos los eventos DOM de HTML, consulte nuestra referencia completa de objetos de eventos DOM de HTML .