Ver índice
Eventos en JavaScript

        Ocultar índice  

   Índice de contenidos
   Instalación en Windows
   Instalación en Ubuntu
   Servidores seguros
   Páginas dinámicas
   Sintaxis básica
   Operaciones
   Arrays
   Formatos de presentación
   Operadores
   Bucles
   Extraer y ord. información
   Funciones
   Ficheros externos
   Imágenes dinámicas
   Gestión de directorios
   Cookies y sesiones
   Clases y objetos
   Ficheros en formato PDF
   Bases de datos MySQL
   PHP y XML
   PDO - Bases SQLite / MySQL
   MySQL a traves de misqli
   Algo de JavaScript y AJAX


¿Cómo activar las modificaciones?

En la página anterior hemos visto como modificar los aspectos de los elementos de una página por medio de javascript. En todos los ejemplos allí manejados la ejecución de las funciones requería pulsar sobre un enlace clásico con su sintaxis habitual de:

<a href="javascript:nombre_de_la_funcion()">texto del enlace </a>

Esta no es la única forma posible de hacerlo. En javascript existen una serie de eventos (acciones llevadas a cabo por el usuario) que pueden ser utilizados para «disparar» la ejecución de una función. Veamos los nombres de algunos, sus significados y su forma de utilización sobre los textos de un enlace. Su sintaxis más recomendada es:
<a href="javascript:void(0)" manejador="nombre_de_la_funcion(parametros)">texto del enlace</a> cuyo ejemplo de utilización requiere una sintaxis como esta <a href="javascript:void(0)" onClick="alert('Has hecho clic')"></a> y cuyo funcionamiento puedes comprobarlo al hacer «clic» sobre el enlace.

Existen otras opciones tales como <a href="#" manejador="nombre_de_la_funcion(parametros)">texto del enlace</a> y cuyo ejemplo de uso puedes ver en este código y en este enlace <a href="#" onClick="alert('Has hecho clic')"></a>

La diferencia entre ambas opciones es que en la primera se invoca la ejecución de la función javascript void(0) (daría lo mismo si en vez de cero llevara cualquier otro valor numérico) que devuelve un valor nulo para href con lo cual no se recarga la página. Si escribiéramos algo como: <a href="javascript:void()" onClick="alert('Has hecho clic')"></a> javascript nos daría un error de sintaxis (void requiere que incluyamos un valor dentro del paréntesis) y si intentáramos algo como <a href="" onClick="alert('Has hecho clic')"></a> podrás observar que si bien se produce el mensaje de alerta posteriormente intenta cargarse una página sin nombre y eso nos conducirá a un error de página no encontrada o a la eventual página de error que por defecto hayamos podido establecer en .htaccess.

El uso del formato <a href="#" onClick="alert('Has hecho clic')"></a> está bastante extendido aunque en puridad suele aconsejarse la opción void(0). Cuando se usa esta alternativa lo que ocurre es que al pulsar se intentar recargar la página redirigiéndola a un ancla de la misma (anchor) sin nombre. Podremos observar que en la barra de direcciones aparece la dirección de la página seguida de #

Eventos del ratón sobre textos de hiperenlaces

Además del ya comentado existen los siguientes manejadores para eventos del ratón:

Eventos del ratón sobre imágenes y botones

De igual forma que hemos hecho utilizando textos con áreas sensibles a los eventos también podríamos haber utilizado imágenes y/o elementos de formularios

  

     

Eventos del ratón y el teclado sobre campos de formulario tipo TEXT

Veamos que eventos se pueden manejar en los distintos elementos de un formulario. Empezaremos por los de tipo="text". Además de manejar los eventos comentados anteriormente tal como puedes ver en estos ejemplos

.

tanbién maneja los siguientes:

Eventos del ratón sobre input type="radio"

Eventos del ratón sobre input type="checkbox"

Eventos del ratón sobre select

Eventos del ratón y el teclado sobre campos de formulario tipo TEXTAREA

Maneja exactamente los mismos eventos que el input type=text tal como puedes ver en estos ejemplos

.

tanbién maneja los siguientes:

El botón submit

No presenta mayores complicaciones. Es un input type button (también podría ser una imagen que lleva asociado el evento onClick que lleva implícita la función submit() (enviar) el formulario que se indica.

     

Un ejemplo de uso de eventos

En este ejemplo ya contemplado en la página anterior hemos modificado únicamente la forma de modificar los diferentes valores de los elementos. Ahora usaremos algunos de los eventos aquí descritos y comprobaremos que se les puede asociar más de una instrucción javascript (observa el código fuente de los que requieren pulsar una tecla determinada) y, observa también, que un mismo elemento puede tener asociadas acciones distintas para dos eventos distintos. Tal es el caso de la opción que reduce la imagen al colocar el ratón encima y recupera el tamaño al quitarlo.

Ejecutar ejemplo Ver código fuente