Capítulo 5: Eventos en JavaScript Page 1 of 5
Anuncios Google JavaScript JavaScript PDF JavaScript CSS IDE JavaScript
Código JavaScript
Herramientas para desarrolladores : Cursos,
para copiar y pegar manuales y guías de referencia : Cursos : Curso de
JavaScript :
Secciones
Scripts y código Capítulo 5: Eventos en JavaScript
Superscripts
1. Eventos en JavaScript
Herramientas 2. Métodos de evento disponibles en JavaScript
desarrolladores
3. Eventos onLoad y onUnload
4. Ejemplo de aplicación en formularios
Exclusivos de El
Código
Curso de 1. Eventos en JavaScript
JavaScript
En JavaScript, la interacción
JavaScript
con el usuario se consigue
avanzado
mediante la captura de los
Asistentes eventos que éste produce. Un
creación código evento es una acción del
Foros de usuario ante la cual puede Lima Cupones
discusión realizarse algún proceso (por Descuento diario de Spas en Lima,
ejemplo, el cambio del valor Restaurantes al 50-90% descuento!
[Link]/Lima
Buscador de un formulario, o la
pulsación de un enlace).
Buscador
Los eventos se capturan
Buscar mediante los manejadores de
Búsqueda eventos. El proceso a realizar
avanzada se programa mediante
funciones JavaScript llamadas
Colaboradores por los manejadores de eventos.
Enviar scripts La siguiente tabla muestra los manejadores de eventos
Top 10 que pueden utilizarse en JavaScript, la versión a partir de
colaboradores la cual están soportados y su significado.
Recomendar a
un amigo 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 El valor de un campo de
FileUpload) formulario cambia
onClick 1.0 Se hace click en un objeto
o formulario
onDblClick 1.2 (no en Se hace click doble en un
Mac) 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
[Link] 30/09/2010
Capítulo 5: Eventos en JavaScript Page 2 of 5
onFocus 1.1 (1.2 para Una ventana, marco o
Layer) 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 El navegador termina la
image) 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 El puntero entra en una
area) á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).
[Link] 30/09/2010
Capítulo 5: Eventos en JavaScript Page 3 of 5
La siguiente tabla muestra los eventos que pueden
utilizarse con los objetos del modelo de objetos JavaScript
del Navigator.
Manejador de Objetos para los que está definido
evento
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:
[Link] 30/09/2010
Capítulo 5: Eventos en JavaScript Page 4 of 5
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!")
[Link]()
}
//-->
</SCRIPT></HEAD>
<BODY> <FORM METHOD=POST>
<INPUT TYPE=text NAME=campo
onFocus="Reacciona(this)">
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>
<HEAD>
<TITLE>Ejemplo onLoad y
onUnload</TITLE>
</HEAD>
<BODY onLoad="alert('¡Bienvenido a mi
página!')" onUnload="alert('¡Vuelva
pronto!')">
...
</BODY>
</HTML>
En este otro ejemplo se utilizan funciones:
[Link] 30/09/2010
Capítulo 5: Eventos en JavaScript Page 5 of 5
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!')"
onChange="Comprueba(this)">
En este ejemplo, simulamos una calculadora interactiva:
<HTML>
<HEAD><TITLE>Calculadora
interactiva</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function Calcula(form) {
[Link] = eval
([Link])
}
function CogeExpresion(form) {
[Link]()
[Link] = prompt
Página de inicio Capítulo siguiente
© 1999 - 2008 por Iván Nieto Pérez
Aviso legal | Acerca de El Código | Sugerencias
[Link] 30/09/2010