Eventos en JavaScript

Eventos en JavaScript

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.

Ejemplo de evento:



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.

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


Eventos onLoad y onUnload

Se usan como atributos del tag de HTML.

Ejemplo:



La función Hola() se ejecutará antes de que se cargue la página y la función Adios() al abandonarla.

Ejemplo:






...



En este otro ejemplo se utilizan funciones:





Calculadora interactiva:


El resultado es:


Definición de estilos

Al igual que con CSS, mediante la sintaxis JavaScript podemos definir clases de estilos y estilos individualizados.
Mediante clases

Seguimos con una jerarquía de objetos a la hora de definir clases. Por ejemplo:
classes.all.NombreClase.color = "blue";

En lugar de tags, donde modificabamos etiquetas, ahora ponemos classes. Luego indicamos que queremos una clase que modifique todas las etiquetas (all), seguido del nombre de la clase y el atributo a modificar.
Mediante ID

De la misma manera, cuando queremos usar el parámetro ID, deberemos usar la siguiente jerarquía:

ids.NombreID.color = "blue";

Un modelo común

En capítulos posteriores desentrañaremos com mayor detalle las distintas maneras de escribir código compatible con los dos navegadores. Ahora sólamente usaremos una de ellas. Con ella comprobamos el nombre y la versión del navegador y bifurcamos según sea Netscape o Explorer. Si la versión es inferior a la 4.0 no hacemos nada, claro.

La principal mejora es que comprime los archivos de definición de fuentes de manera comparable al PFR de Netscape. Tiene también el pequeño problema del dominio, aunque al menos en este caso sí que podremos ver nuestras páginas desde el disco duro, ya que estas fuentes son las mismas que tenemos instaladas en nuestro sistema.