6.1 Los eventos en Javascript
Con javascript podemos definir qué es lo que pasa cuando se produce un evento como podría ser que un usuario pulse sobre un botón, edite un campo de texto o abandone la página.
6.1.1 Cómo se define un evento
Para definir las acciones que queremos realizar al producirse un evento utilizamos los manejadores de eventos. Existen muchos tipos de manejadores de eventos, para muchos tipos de acciones del usuario. El maneador de eventos se coloca en la etiqueta HTML del elemento de la página que queremos que responda a las acciones del usuario.
Por ejemplo tenemos el manejador de eventos onclick, que sirve para describir acciones que queremos que se ejecuten cuando se hace un click. Si queremos que al hacer click sobre un botón pase alguna cosa, escribimos el manejador onclick en la etiqueta <INPUT type=button> de ese botón:
<INPUT type=button value="pulsame" onclick="sentencias_javascript...">
Se coloca un atributo nuevo en la etiqueta que tiene el mismo nombre que el evento, en este caso onclick. El atributo se iguala a las sentencias Javascript que queremos que se ejecuten al producirse el evento.
Cada elemento de la página tiene su propia lista de eventos soportados, vamos a ver otro ejemplo de manejo de eventos, esta vez sobre un menú desplegable, en el que definimos un comportamiento cuando cambiamos el valor seleccionado.
<SELECT onchange="window.alert('Cambiaste la selección')">
<OPTION value="opcion1">Opcion 1
<OPTION value="opcion2">Opcion 2
</SELECT>
En este ejemplo cada vez que se cambia la opción muestra una caja de alerta.
Dentro de los manejadores de eventos podemos colocar tantas instrucciones como deseemos, pero siempre separadas por punto y coma. Lo habitual es colocar una sola instrucción, y si se desean colocar más de una se suele crear una función con todas las instrucciones y dentro del manejador se coloca una sola instrucción que es la llamada a la función.
Vamos a ver cómo se colocarían en un manejador varias instrucciones.
<input type=button value=Pulsame
onclick="x=30; window.alert(x); window.document.bgColor = 'red'">
Son instrucciones muy simples como asignar a x el valor 30, hacer una ventana de alerta con el valor de x y cambiar el color del fondo a rojo.
Sin embargo, tantas instrucciones puestas en un manejador quedan un poco confusas, habría sido mejor crear una función así.
<script>
function ejecutaEventoOnclick(){
x = 30
window.alert(x)
window.document.bgColor = 'red'
}
</script>
<FORM>
<input type=button value=Pulsame onclick="ejecutaEventoOnclick()">
</FORM>
6.1.2 Jerarquía desde el objeto window
En los manejadores de eventos se tiene que especificar la jerarquía entera de objetos del navegador, empezando siempre por el objeto window.
6.2 Los manejadores de eventos en Javascript
La lista de manejadores de eventos contiene el nombre del manejador en negrita, su descripción y finalmente la versión de Javascript que incorporó dicho manejador.
onabort
Este evento se produce cuando un usuario detiene la carga de una imagen, ya sea porque detiene la carga de la página o porque realiza una acción que la detiene, como por ejemplo irse de la página. Javascript 1.1
onblur
Se desata un evento onblur cuando un elemento pierde el foco de la aplicación. El foco de la aplicación es el lugar donde está situado el cursor, por ejemplo puede estar situado sobre un campo de texto, una página, un botón o cualquier otro elemento. Javascript 1.0
onchange
Se desata este evento cuando cambia el estado de un elemento de formulario, en ocasiones no se produce hasta que el usuario retira el foco de la aplicación del elemento. Javascript 1.0
onclick
Se produce cuando se da una pulsación o clic al botón del ratón sobre un elemento de la página, generalmente un botón o un enlace. Javascript 1.0
ondragdrop
Se produce cuando un usuario suelta algo que había arrastrado sobre la página web. Javascript 1.2
onerror
Se produce cuando no se puede cargar un documento o una imagen y esta queda rota. Javascript 1.1
onfocus
El evento onfocus es lo contrario de onblur. Se produce cuando un elemento de la página o la ventana ganan el foco de la aplicación. Javascript 1.0
onkeydown
Este evento se produce en el instante que un usuario presiona una tecla, independientemente que la suelte o no. Se produce en el momento de la pulsación. Javascript 1.2
onkeypress
Ocurre un evento onkeypress cuando el usuario deja pulsada una tecla un tiempo determinado. Antes de este evento se produce un onkeydown en el momento que se pulsa la tecla.. Javascript 1.2
onkeyup
Se produce cuando el usuario deja de apretar una tecla. Se produce en el momento que se libera la tecla. Javascript 1.2
onload
Este evento se desata cuando la página, o en Javascript 1.1 las imágenes, ha terminado de cargarse. Javascript 1.0
onmousedown
Se produce el evento onmousedown cuando el uuario pulsa sobre un elemento de la página. onmousedown se produce en el momento de pulsar el botón, se suelte o no. Javascript 1.2
onmousemove
Se produce cuando el ratón se mueve por la página. Javascript 1.2
onmouseout
Se desata un evento onmuoseout cuando el puntero del ratón sale del área ocupada por un elemento de la página. Javascript 1.1
onmouseover
Este evento se desata cuando el puntero del ratón entra en el área ocupada por un eolemento de la página. Javascript 1.0
onmouseup
Este evento se produce en el momento que el usuario suelta el botón del ratón, que previamente había pulsado. Javascript 1.2
onmove
Evento que se ejecuta cuando se mueve la ventana del navegador, o un frame. Javascript 1.2
onresize
Evento que se produce cuando se redimensiona la ventana del navegador, o el frame, en caso de que la página los tenga. Javascript 1.2
onreset
Este evento está asociado a los formularios y se desata en el momento que un usuario hace clic en el botón de reset de un formulario. Javascript 1.1
onselect
Se ejecuta cuando un usuario realiza una selección de un elemento de un formulario. Javascript 1.0
onsubmit
Ocurre cuando el visitante apreta sobre el botón de enviar el formulario. Se ejecuta antes del envío propiamente dicho. Javascript 1.0
onunload
Al abandonar una página, ya sea porque se pulse sobre un enlace que nos lleve a otra página o porque se cierre la ventana del navegador, se ejecuta el evento onunload. Javascript 1.0
Este evento se produce en el momento que el usuario suelta el botón del ratón, que previamente había pulsado. Javascript 1.2
onmove
Evento que se ejecuta cuando se mueve la ventana del navegador, o un frame. Javascript 1.2
onresize
Evento que se produce cuando se redimensiona la ventana del navegador, o el frame, en caso de que la página los tenga. Javascript 1.2
onreset
Este evento está asociado a los formularios y se desata en el momento que un usuario hace clic en el botón de reset de un formulario. Javascript 1.1
onselect
Se ejecuta cuando un usuario realiza una selección de un elemento de un formulario. Javascript 1.0
onsubmit
Ocurre cuando el visitante apreta sobre el botón de enviar el formulario. Se ejecuta antes del envío propiamente dicho. Javascript 1.0
onunload
Al abandonar una página, ya sea porque se pulse sobre un enlace que nos lleve a otra página o porque se cierre la ventana del navegador, se ejecuta el evento onunload. Javascript 1.0
6.3 Ejemplos de eventos en Javascript. Onabort
Enlaces a diversas aplicaciones prácticas donde se tratan eventos para el evento onabort.
• Acceso por clave con Javascript (Evento onclick)
• Rollover con Javascript (Eventos onmuoseover y onmouseout)
• Navegador desplegable (Evento onchange)
• Calculadora sencilla (Evento onclick)
• Confirmación del envío de formulario (Evento onclick)
• Posicionarse en un select (Evento onkeypress)
• Inhibir campo de formulario (Evento onfocus)
• Cuenta caracteres de un textarea (Eventos onkeydown y onkeyup)
• Rollover con Javascript (Eventos onmuoseover y onmouseout)
• Navegador desplegable (Evento onchange)
• Calculadora sencilla (Evento onclick)
• Confirmación del envío de formulario (Evento onclick)
• Posicionarse en un select (Evento onkeypress)
• Inhibir campo de formulario (Evento onfocus)
• Cuenta caracteres de un textarea (Eventos onkeydown y onkeyup)
6.3.1 Evento onabort
Este evento se activa al cancelarse la carga de una página, ya sea porque se pulsa el botón de cancelar o porque el usuario se marcha de la página por otro enlace.
Este ejemplo contiene una imagen que tiene el evento onabort asignado para que se ejecute una función en caso de que la imagen no llegue a cargarse. La función informa al usuario de que la imagen no se ha llegado a cargar y le pregunta si desea cargarla otra vez. Si el usuario contesta que sí, entonces se pone a descargar la imagen otra vez. Si dice que no, no hace nada.
La pregunta se hace con una caja confirm de Javascript.
<title>Evento onabort</title>
<script>
function preguntarSeguir(){
respuesta = confirm ("Has detenido la carga de la página y hay una imagen que no estás
viendo.n¿Deseas cargar la imagen?")
if (respuesta)
document.img1.src = "http://ipaginate.iespana.es/ipaginate/desarrollogrande.gif"
}
</script>
</head>
<body>
<img name=img1 src="http://ipaginate.iespana.es/ipaginate/desarrollogrande.gif" width=500 height=458
alt="Imagen que pesa 115K" border="0" onabort="preguntarSeguir()">
<br>
Pulsa el botón de parar la carga de la página y se pondrá en marcha el evento onerror
</body>
</html>
Este ejemplo estaría bien si siempre se detuviese la carga por pulsar el botón de cancelar, pero si lo que pasa es que el usuario ha cancelado por irse a otra página a través de un enlace, saldrá la caja de confirmación pero no ocurrirá nada independientemente de lo que se responda y el navegante se marchará irremediablemente a la nueva página.
6.4 Ejemplo del evento onblur en Javascript
Se comprueba la validez de un dato al salir del campo de texto donde está escrito.
Onblur se activa cuando el usuario retira el foco de la aplicación de un elemento de la página. El foco de la aplicación es el lugar donde está el cursor.
Si yo deseo que, al situarse fuera de un campo de texto, se compruebe que el valor introducido es correcto puedo utilizar onblur y llamar a una función que compruebe si el dato es correcto. Si no es correcto puedo obligar al foco de la aplicación a situarse nuevamente sobre el campo de texto y avisar al usuario para que cambie dicho valor.
Comprobar un campo de texto para asegurarnos que es un número entero:
<html>
<head>
<title>Evento onblur</title>
<script>
function validarEntero(valor){
//intento convertir a entero.
//si era un entero no le afecta, si no lo era lo intenta convertir
valor = parseInt(valor)
//Compruebo si es un valor numérico
if (isNaN(valor)) {
//entonces (no es numero) devuelvo el valor cadena vacia
return ""
}else{
//En caso contrario (Si era un número) devuelvo el valor
return valor
}
}
function compruebaValidoEntero(){
enteroValidado = validarEntero(document.f1.numero.value)
if (enteroValidado == ""){
//si era la cadena vacía es que no era válido. Lo aviso
alert ("Debe escribir un entero!")
//selecciono el texto
document.f1.numero.select()
//coloco otra vez el foco
document.f1.numero.focus()
}else
document.f1.numero.value = enteroValidado
}
</script>
</head>
<body>
<form name=f1>
Escriba un número entero: <input type=text name=numero size=8 value=""
onblur="compruebaValidoEntero()">
</form>
</body>
</html>
Onblur se activa cuando el usuario retira el foco de la aplicación de un elemento de la página. El foco de la aplicación es el lugar donde está el cursor.
Si yo deseo que, al situarse fuera de un campo de texto, se compruebe que el valor introducido es correcto puedo utilizar onblur y llamar a una función que compruebe si el dato es correcto. Si no es correcto puedo obligar al foco de la aplicación a situarse nuevamente sobre el campo de texto y avisar al usuario para que cambie dicho valor.
Comprobar un campo de texto para asegurarnos que es un número entero:
<html>
<head>
<title>Evento onblur</title>
<script>
function validarEntero(valor){
//intento convertir a entero.
//si era un entero no le afecta, si no lo era lo intenta convertir
valor = parseInt(valor)
//Compruebo si es un valor numérico
if (isNaN(valor)) {
//entonces (no es numero) devuelvo el valor cadena vacia
return ""
}else{
//En caso contrario (Si era un número) devuelvo el valor
return valor
}
}
function compruebaValidoEntero(){
enteroValidado = validarEntero(document.f1.numero.value)
if (enteroValidado == ""){
//si era la cadena vacía es que no era válido. Lo aviso
alert ("Debe escribir un entero!")
//selecciono el texto
document.f1.numero.select()
//coloco otra vez el foco
document.f1.numero.focus()
}else
document.f1.numero.value = enteroValidado
}
</script>
</head>
<body>
<form name=f1>
Escriba un número entero: <input type=text name=numero size=8 value=""
onblur="compruebaValidoEntero()">
</form>
</body>
</html>
Al salirse del campo de texto (onblur) se ejecuta compruebaValidoEntero(), que utiliza la función validarEntero. Si el valor devuelto por la función no es el de un entero, en este caso se recibiría una cadena vacía, muestra un mensaje en una caja alert, selecciona el texto escrito en la caja y coloca el foco de la aplicación en la caja de texto, para que el usuario coloque otro valor. Hasta que el visitante no escriba un número entero en el campo de texto el foco de la aplicación permanecerá en el campo y continuará recibiendo mensajes de error.
6.5 Continuación del ejemplo de onblur, para validar varios campos de texto.
Validar un número entero y un código postal. Para validar un código postal necesitamos comprobar que es una cadena de texto compuesta por 5 caracteres y todos son enteros, por lo menos para los numeros en España.
Por si alguien lo quiere intentar, la función para validar un código postal sería algo parecido a esto:
function ValidoCP(){
CPValido=true
//si no tiene 5 caracteres no es válido
if (document.f1.codigo.value.length != 5)
CPValido=false
else{
for (i=0;i<5;i++){
CActual = document.f1.codigo.value.charAt(i)
if (validarEntero(CActual)==""){
CPValido=false
break;
}
}
}
return CPValido
}
Simplemente se encarga de comprobar que el campo de texto contiene 5 caracteres y hacer un recorrido por cada uno de los caracteres para comprobar que todos son enteros. Al principio se supone que el código postal es correcto, colocando la variable CPValido a true, y si alguna comprobación falla se cambia el estado correcto a incorrecto, pasando dicha variable a false.
Se puede probar a montar el ejemplo con dos campos... nosotros ahora vamos a dar una solución al problema bastante complicadilla, ya que incluimos instrucciones para evitar el efecto del bucle infinito. No vamos a ver el ejemplo que daría el error, lo dejamos para el que desee intentarlo por si mismo y recomendamos hacerlo porque así comprenderemos mejor el siguiente código.
<html>
<head>
<title>Evento onblur</title>
<script>
avisado=false
function validarEntero(valor){
//intento convertir a entero.
//si era un entero no le afecta, si no lo era lo intenta convertir
valor = parseInt(valor)
//Compruebo si es un valor numérico
if (isNaN(valor)) {
//entonces (no es numero) devuelvo el valor cadena vacia
return ""
}else{
//En caso contrario (Si era un número) devuelvo el valor
return valor
}
}
function compruebaValidoEntero(){
enteroValidado = validarEntero(document.f1.numero.value)
if (enteroValidado == ""){
//si era la cadena vacía es que no era válido. Lo aviso
if (!avisado){
alert ("Debe escribir un entero!")
//selecciono el texto
document.f1.numero.select()
//coloco otra vez el foco
document.f1.numero.focus()
avisado=true
setTimeout('avisado=false',50)
}
}else
document.f1.numero.value = enteroValidado
function compruebaValidoCP(){
CPValido=true
//si no tiene 5 caracteres no es válido
if (document.f1.codigo.value.length != 5)
CPValido=false
else{
for (i=0;i<5;i++){
CActual = document.f1.codigo.value.charAt(i)
if (validarEntero(CActual)==""){
CPValido=false
break;
}
}
if (!CPValido){
if (!avisado){
//si no es valido, Lo aviso
alert ("Debe escribir un código postal válido")
//selecciono el texto
document.f1.codigo.select()
//coloco otra vez el foco
//document.f1.codigo.focus()
avisado=true
setTimeout('avisado=false',50)
}
</script>
</head>
<form name=f1>
Escriba un número entero: <input type=text name=numero size=8 value=""
onblur="compruebaValidoEntero()">
Escriba un código postal: <input type=text name=codigo size=8 value="" onblur="compruebaValidoCP()">
*espera una cadena con 5 carácteres numéricos
</form>
</body>
</html>
Para solucionar el tema del bucle infinito, que habréis podido investigar por vosotros mismos y en el que se mostraban una caja de alerta tras otra indefinidamente, hemos utilizado una variable llamada avisado que contiene un true si ya se ha avisado de que el campo estaba mal y un false si no se ha avisado todavía.
Cuando se va a mostrar la caja de alerta se comprueba si se ha avisado o no al usuario. Si ya se avisó no se hace nada, evitando que se muestren más cajas de alerta. Si no se había avisado todavía se muestra la caja de alerta y se coloca el foco en el campo que era incorrecto.
Para restituir la variable avisado a false, de modo que la próxima vez que se escriba mal el valor se muestre el mensaje correspondiente, se utiliza el método setTimeout, que ejecuta la instrucción con un retardo, en este caso de 50 milisegundos. Lo suficiente para que no se meta en un bucle infinito.
6.9.1 Manejadores de eventos (Event Handlers) en Javascript 1.3
Abort (onabort): Se lanza cuando se abortó la carga de un elemento de la página, por ejemplo una imagen.
Blur (onblur): Se procesa este evento cuando un elemento de la página, generalmente un elemento de formulario, pierde el foco de la aplicación.
Change (onchange): Este evento se produce cuando el usuario cambia el contenido de un elemento de formulario, tipo select, input o textarea.
Click (onclick): Se lanza cuando el usuario hace clic sobre un elemento de la página, que puede ser un botón, un enlace, etc.
DblClick (ondblclick): Este evento es lanzado cuando el usuario hace doble click en un elemento de formulario o un link.
DragDrop (ondragdrop): Este evento se produce cuando el usuario arrastra y suelta un objeto en la ventana del navegador.
Error (onerror): producido cuando hubo un error en la carga de un elemento de la página o de un documento.
Focus (onfocus): Se produce este evento cuando un elemento de la página, generalmente un elemento de formulario, gana el foco de la aplicación.
KeyDown (onkeydown): Este evento se lanza cuando el usuario pulsa una tecla.
KeyPress (onkeypress): Se lanza el evento onkeypress cuando el usuario pulsa o mantiene pulsada una tecla.
KeyUp (onkeyup): Se produce cuando el usuario suelta una tecla que tenía pulsada.
Load (onload): Se ejecuta cuando se termina de cargar la página, o bien todos los frames del conjunto de FRAMESET.
MouseDown (onmousedown): Este evento se produce cuando el usuario aprieta el botón del ratón.
MouseMove (onmousemove): Se ejecuta cuando el usuario mueve el ratón.
MouseOut (onmouseout): Se lanza cuando el usuario retira el puntero del ratón. Por ejemplo, si colocamos onmouseout sobre una imagen, el evento se lanzaría en el momento que el usuario sale con el puntero del ratón de esa imagen.
MouseOver (onmouseover): Este evento se desata cuando el usuario mueve el puntero del ratón sobre un elemento. Imaginemos que colocamos este evento en una imagen, entonces se lanza, una sola vez, en el momento de entrar con el puntero en el área que ocupa esa imagen.
MouseUp (onmouseup): Este evento se produce cuando el usuario suelta o deja de apretar el botón del ratón.
Move (onmove): Se produce cuando el usuario o un script mueven la ventana del navegador.
Reset (onreset): El evento se ejecuta cuando se resetea el contenido de un formulario, haciendo clic en un botón de reset del formulario, si es que lo tiene.
Resize (onresize): Se lanza cuando el usuario, o un script, alteran el tamaño de una ventana del navegador o de un frame.
Select (onselect): El evento se produce cuando el usuario selecciona un texto de un textarea o bien de un campo de texto normal.
Submit (onsubmit): Se lanza cuando se aprieta el botón de submitir de un formulario, así que permite ejecutar código cuando el usuario envía el formulario.
UnLoad (onunload): Evento que se produce cuando el usuario sale de un documento, osea, al salir de la página web, ya sea por pulsar un enlace que lleva a otra página o por cerrar la ventana del navegador.
6.9.1 Manejadores de eventos (Event Handlers) en Javascript 1.3
Abort (onabort): Se lanza cuando se abortó la carga de un elemento de la página, por ejemplo una imagen.
Blur (onblur): Se procesa este evento cuando un elemento de la página, generalmente un elemento de formulario, pierde el foco de la aplicación.
Change (onchange): Este evento se produce cuando el usuario cambia el contenido de un elemento de formulario, tipo select, input o textarea.
Click (onclick): Se lanza cuando el usuario hace clic sobre un elemento de la página, que puede ser un botón, un enlace, etc.
DblClick (ondblclick): Este evento es lanzado cuando el usuario hace doble click en un elemento de formulario o un link.
DragDrop (ondragdrop): Este evento se produce cuando el usuario arrastra y suelta un objeto en la ventana del navegador.
Error (onerror): producido cuando hubo un error en la carga de un elemento de la página o de un documento.
Focus (onfocus): Se produce este evento cuando un elemento de la página, generalmente un elemento de formulario, gana el foco de la aplicación.
KeyDown (onkeydown): Este evento se lanza cuando el usuario pulsa una tecla.
KeyPress (onkeypress): Se lanza el evento onkeypress cuando el usuario pulsa o mantiene pulsada una tecla.
KeyUp (onkeyup): Se produce cuando el usuario suelta una tecla que tenía pulsada.
Load (onload): Se ejecuta cuando se termina de cargar la página, o bien todos los frames del conjunto de FRAMESET.
MouseDown (onmousedown): Este evento se produce cuando el usuario aprieta el botón del ratón.
MouseMove (onmousemove): Se ejecuta cuando el usuario mueve el ratón.
MouseOut (onmouseout): Se lanza cuando el usuario retira el puntero del ratón. Por ejemplo, si colocamos onmouseout sobre una imagen, el evento se lanzaría en el momento que el usuario sale con el puntero del ratón de esa imagen.
MouseOver (onmouseover): Este evento se desata cuando el usuario mueve el puntero del ratón sobre un elemento. Imaginemos que colocamos este evento en una imagen, entonces se lanza, una sola vez, en el momento de entrar con el puntero en el área que ocupa esa imagen.
MouseUp (onmouseup): Este evento se produce cuando el usuario suelta o deja de apretar el botón del ratón.
Move (onmove): Se produce cuando el usuario o un script mueven la ventana del navegador.
Reset (onreset): El evento se ejecuta cuando se resetea el contenido de un formulario, haciendo clic en un botón de reset del formulario, si es que lo tiene.
Resize (onresize): Se lanza cuando el usuario, o un script, alteran el tamaño de una ventana del navegador o de un frame.
Select (onselect): El evento se produce cuando el usuario selecciona un texto de un textarea o bien de un campo de texto normal.
Submit (onsubmit): Se lanza cuando se aprieta el botón de submitir de un formulario, así que permite ejecutar código cuando el usuario envía el formulario.
UnLoad (onunload): Evento que se produce cuando el usuario sale de un documento, osea, al salir de la página web, ya sea por pulsar un enlace que lleva a otra página o por cerrar la ventana del navegador.
No hay comentarios:
Publicar un comentario