Curso de Javascript: Eventos
Listado de Eventos
A continuación veremos casi todos los eventos disponibles, su descripción, es decir, cuando se vana disparar y sorbe que elementos del HTML responden.
| Evento | Descripción | Elementos para los que está definido |
|---|---|---|
onblur | Deseleccionar el elemento | <button>, <input>, <label>,<select>, <textarea>, <body> |
onchange | Deseleccionar un elemento que se ha modificado | <input>, <select>, <textarea> |
onclick | Pinchar y soltar el ratón | Todos los elementos |
ondblclick | Pinchar dos veces seguidas con el ratón | Todos los elementos |
onfocus | Seleccionar un elemento | <button>, <input>, <label>,<select>, <textarea>, <body> |
onkeydown | Pulsar una tecla (sin soltar) | Elementos de formulario y <body> |
onkeypress | Pulsar una tecla | Elementos de formulario y <body> |
onkeyup | Soltar una tecla pulsada | Elementos de formulario y <body> |
onload | La página se ha cargado completamente | <body> |
onmousedown | Pulsar (sin soltar) un botón del ratón | Todos los elementos |
onmousemove | Mover el ratón | Todos los elementos |
onmouseout | El ratón “sale” del elemento (pasa por encima de otro elemento) | Todos los elementos |
onmouseover | El ratón “entra” en el elemento (pasa por encima del elemento) | Todos los elementos |
onmouseup | Soltar el botón que estaba pulsado en el ratón | Todos los elementos |
onreset | Inicializar el formulario (borrar todos sus datos) | <form> |
onresize | Se ha modificado el tamaño de la ventana del navegador | <body> |
onselect | Seleccionar un texto | <input>, <textarea> |
onsubmit | Enviar el formulario | <form> |
onunload | Se abandona la página (por ejemplo al cerrar el navegador) | <body> |
Manejo de Eventos
Para gestionar los eventos es necesario conocer de antemano sobre que elemento queremos cambiar su comportamiento, para ello usaremos el método getElementById(), donde indicaremos como parámetro el nombre del ID que buscamos en el DOM. Una vez tenemos una variable con el elemento deberemos ejecutar el método addEventListener(), al cual le pasamos tres parámetros, nos importan los dos primeros, uno es el nombre del evento, sin el on delante y el segundo parámetro es el nombre de la función que se ejecutará ante ese evento.
En los ejemplos que veremos a continuación se mostrará el código HTML con el que vayamos a interactuar y el código JS correspondiente. Por simplificar la edición se ha eliminado la etiqueta
Un evento básico
En el siguiente ejemplo veremos el funcionamiento general de la modificación de los eventos Se declara en el html un botón con el id=“boton” desde JS localizamos el elemento con el getElementById(“boton”), llamamos al método addEventListener, le pasamos como primer parámetro el evento a modificar, en este caso el onclick, eliminamos el on, y dejamos el click y luego le aplicamos la función hazAlgo. De esta manera cada vez que pulsamos el botón sacará un mensaje por consola.
<button id**=**“boton”>Pulsame</button>
//código JS
function hazAlgo**()**{
console.log("He hecho algo");
}document.getElementById(“boton”).addEventListener(“click”, hazAlgo,false);
Carga del documento
Unas vez conocida la mecánica de la gestión del evento, es necesario conocer dos de los principales eventos en la carga de una página en el navegador, estos son load y DOMContentLoaded.
DOMContentLoaded es el evento que se dispara cuando se ha terminado de leer el documento HTML desde el servidor. Si queremos incluir el código JS para modificar cualquier elemento que esté presente en el HTML será necesario esperar a que este evento se dispare.
Por otra parte está onload, que se disparará cuando se terminen de cargar todos aquellos elementos relacionados con el HTML, es decir CSS, JS, Imágenes, etc… Si tenemos que interactuar contra imágenes es necesario esperar al evento onload.
Veamos dos ejemplo de uso, uno de cada uno de los dos eventos indicados: