Toda acción que realiza el usuario en el navegador -pulsar un bóton, cargar una página, mover el ratón, escribir texto, etc- se conoce como evento. Podemos crear código para que responda a un evento especifico, quizás deseamos un mensaje "Hola [mi nombre]" al pulsar un botón. Listamos algunos eventos comunmente usados con JavaScript y a continuación veremos un ejemplos prácticos:
- onblur: Cuando un elemento pierde el foco.
- onchange: Cuando el contenido de un elemento cambia.
- onclick: Cuando se da un clic en un elemento.
- ondblclick: Cuando se da doble clic en un elemento.
- onerror: Cuando hay un error en JavaScript.
- onfocus: Cuando un elemento tiene el foco.
- onkeydown: Cuando se presiona una tecla.
- onkeypress: Cuando se tiene presionado una tecla.
- onkeyup: Cuando se suelta una tecla.
- onload: Cuando se carga la página.
- onmousedown: Cuando se presiona un botón del ratón.
- onmousemove: Cuando se mueve el ratón en la página.
- onmouseout: Cuando se mueve el ratón fuera de un elemento.
- onmouseover: Cuando se mueve el ratón sobre un elemento.
- onmouseup: Cuando se suelta un botón del ratón.
- onreset: Cuando se presiona el botón Reset.
- onresize: Cuando se redimenciona la página o un elemento.
- onsubmit: Cuando se presiona el botón Submit.
- onunload: Cuando sale de la página actual o cambia a otra página.
Cada uno de estos eventos dependará de la etiqueta HTML que estemos usando. Por ejemplo, no podemos aplicar el evento onsubmit a un botón(input tipo button) porque este evento se usa especificamente con la etiqueta form.
Ejemplos de algunos Eventos
Ejemplo 01: Cambiando el color de fondo
Cambiaremos el color de fondo de la página al pulsar en el botón correspondiente. Note el evento onclick.
<html> <head> <title>Aprendiendo JavaScript</title> </head> <body> <h1>Estoy aprendiendo JavaScript</h1> <form name="formulario" action=""> <input type="button" value="Rojo" onclick="document.bgColor='red'" /> <input type="button" value="Azul" onclick="document.bgColor='blue'" /> <input type="button" value="Verde" onclick="document.bgColor='green'" /> </form> </body> </html>
Ejemplo 02: Cuando presionamos alguna tecla
Diversos eventos al momento de escribir algun texto, aunque a simple vista parece tener el mismo efecto, son diferentes eventos: onkeypress, onkeydown y onkeyup. Nota: Usamos confirm para mostrar un mensaje en una pequeña ventana del navegador. La forma de usarlo es: confirm(‘mi mensaje’).
<html>
<head>
<title>Aprendiendo JavaScript</title>
</head>
<body>
<h1>Distintas interacciones al presionar una tecla</h1>
<form name="formulario" action="">
<p>Aca muestra el mensaje cuando presionamos una tecla - <strong>onkeypress</strong> </p>
<input type="text" onkeypress="confirm('Evento onkeypress')" />
<p>Muestra el mensaje cuando tenemos presionado la tecla - <strong>onkeydown</strong> </p>
<input type="text" onkeydown="confirm('Evento onkeydown')" />
<p>Muestra el mensaje cuando soltamos la tecla - <strong>onkeyup</strong> </p>
<input type="text" onkeyup="confirm('Evento onkeyup')" />
</form>
</body>
</html>