En JavaScript, la interacción con el usuario se consigue mediante la captura de los eventos que éste produce. Un evento es una acción del usuario ante la cual puede realizarse algún proceso (por ejemplo, el cambio del valor de un formulario, o la pulsación de un enlace).
Los eventos se capturan mediante los manejadores de eventos. El proceso a realizar se programa mediante funciones JavaScript llamadas por los manejadores de eventos.
La siguiente tabla muestra los manejadores de eventos que pueden utilizarse en JavaScript, la versión a partir de la cual están soportados y su significado.
| Manejador | Versión | Se produce cuando... |
| onAbort | 1.1 | El usuario interrumpe la carga de una imagen |
| onBlur | 1.0 | Un elemento de formulario, una ventana o un marco pierden el foco |
| onChange | 1.0 (1.1 para FileUpload) | El valor de un campo de formulario cambia |
| onClick | 1.0 | Se hace click en un objeto o formulario |
| onDblClick | 1.2 (no en Mac) | Se hace click doble en un objeto o formulario |
| onDragDrop | 1.2 | El usuario arrastra y suelta un objeto en la ventana |
| onError | 1.1 | La carga de un documento o imagen produce un error |
| onFocus | 1.1 (1.2 para Layer) | Una ventana, marco o elemento de formulario recibe el foco |
| onKeyDown | 1.2 | El usuario pulsa una tecla |
| onKeyPress | 1.2 | El usuario mantiene pulsada una tecla |
| onKeyUp | 1.2 | El usuario libera una tecla |
| onLoad | 1.0 (1.1 para image) | El navegador termina la carga de una ventana |
| onMouseDown | 1.2 | El usuario pulsa un botón del ratón |
| onMouseMove | 1.2 | El usuario mueve el puntero |
| onMouseOut | 1.1 | El puntero abando una área o enlace |
| onMouseOver | 1.0 (1.1 para area) | El puntero entra en una área o imagen |
| onMouseUp | 1.2 | El usuario libera un botón del ratón |
| onMove | 1.2 | Se mueve una ventana o un marco |
| onReset | 1.1 | El usuario limpia un formulario |
| onResize | 1.2 | Se cambia el tamaño de una ventana o marco |
| onSelect | 1.0 | Se selecciona el texto del campo texto o área de texto de un formulario |
| onSubmit | 1.0 | El usuario envía un formulario |
| onUnload | 1.0 | El usuario abandona una página |
Ejemplo de evento:
<INPUT TYPE="text" onChange="CompruebaCampo(this)">
En este ejemplo, CompruebaCampo() es una función JavaScript definida en alguna parte del documento HTML (habitualmente en la cabecera del mismo). El identificador this es una palabra propia del lenguaje, y se refiere al objeto desde el cual se efectua la llamada a la función (en este caso, el campo del formulario).
La siguiente tabla muestra los eventos que pueden utilizarse con los objetos del modelo de objetos JavaScript del Navigator.
| Manejador de evento | Objetos para los que está definido |
| onAbort | Image |
| onBlur | Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, window |
| onChange | FileUpload, Select, Text, Textarea |
| onClick | Button, document, Checkbox, Link, Radio, Reset, Submit |
| onDblClick | document, Link |
| onDragDrop | window |
| onError | Image, window |
| onFocus | Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, window |
| onKeyDown | document, Image, Link, Textarea |
| onKeyPress | document, Image, Link, Textarea |
| onKeyUp | document, Image, Link, Textarea |
| onLoad | Image, Layer, window |
| onMouseDown | Button, document, Link |
| onMouseMove | Ninguno (debe asociarse a uno) |
| onMouseOut | Layer, Link |
| onMouseOver | Layer, Link |
| onMouseUp | Button, document, Link |
| onMove | window |
| onReset | Form |
| onResize | window |
| onSelect | Text, Textarea |
| onSubmit | Form |
| onUnload | window |
2. Métodos de evento disponibles en JavaScript
Los siguientes métodos de evento pueden utilizarse en JavaScript:| Métodos de evento | Función que realizan |
| blur() | Elimina el foco del objeto desde el que se llame |
| click() | Simula la realización de un click sobre el objeto desde el que se llame |
| focus() | Lleva el foco al objeto desde el que se llame |
| select() | Selecciona el área de texto del campo desde el que se llame |
| submit() | Realiza el envío del formulario desde el que se llame |
Ejemplo:
<HTML>
<HEAD><TITLE>Eventos</TITLE>
<SCRIPT>
<!--
function
Reacciona(campo) {
alert("¡Introduzca un valor!")
campo.focus()
}
//-->
</SCRIPT></HEAD>
<BODY> <FORM
METHOD=POST>
<INPUT TYPE=text NAME=campo
onFocus="Reacciona(this)">
</FORM> </BODY>
</HTML>
3. Eventos onLoad y onUnload
Se usan como atributos del tag <BODY> de HTML.Ejemplo:
<BODY onLoad="Hola()" onUnload="Adios()">La función Hola() se ejecutará antes de que se cargue la página y la función Adios() al abandonarla.
Ejemplo:
<HTML>En este otro ejemplo se utilizan funciones:
<HEAD>
<TITLE>Ejemplo onLoad
y onUnload</TITLE>
</HEAD>
<BODY
onLoad="alert('¡Bienvenido a mi página!')" onUnload="alert('¡Vuelva
pronto!')">
...
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Ejemplo con
funciones</TITLE>
<SCRIPT
LANGUAGE="JavaScript">
<!--
var name = ""
function Hola()
{
nombre = prompt('Introduzca su
nombre:','')
alert('¡Hola ' + nombre +
'!')
}
function Adios() {
alert('¡Adios
' + nombre +
'!')
}
//-->
</SCRIPT>
</HEAD>
<BODY
onLoad="Hola()"
onUnload="Adios()">
...
</BODY>
</HTML>
4. Ejemplo de aplicación en formularios
Vamos a ver un ejemplo para un campo de texto:<INPUT TYPE=text NAME="test" onBlur="alert('¡Gracias!')"En este ejemplo, simulamos una calculadora interactiva:
onChange="Comprueba(this)">
<HTML>
<HEAD><TITLE>Calculadora
interactiva</TITLE>
<SCRIPT
LANGUAGE="JavaScript">
<!--
function Calcula(form)
{
form.resultados.value =
eval(form.entrada.value)
}
function CogeExpresion(form)
{
form.entrada.blur()
form.entrada.value = prompt("Introduce una expresión matemática válida
en JavaScript","")
Calcula(form)
}
//-->
</SCRIPT></HEAD> <BODY> <FORM
METHOD=POST>
Calculadora interactiva:
<INPUT TYPE=text
NAME="entrada" VALUE=""
onFocus="CogeExpresion(this.form)">
<BR>El resultado
es:<INPUT TYPE=text NAME="resultados" VALUE=""
onFocus="this.blur()">
</FORM> </BODY> </HTML>
No hay comentarios:
Publicar un comentario