HTMLpointHTMLpoint HTMLpoint.com


 Los eventos



Antes de nada, una premisa: a la hora de decidir en qué orden tratar los distintos temas, estaba bastante indeciso sobre el lugar en que colocar esta lección y las relacionadas con ella, ya que en algunos textos los eventos son tratados antes de las funciones y en otros después. La elección no era indiferente porque el tema constituye una parte importante de la teoría Javascript y, si se coloca en una posición equivocada, puede llegar a romper el carácter secuencial de la exposición. Al final, he optado por la presente colocación dado que el tema tiene claras afinidades con el examen de los script en general, aunque soy consciente de correr el riesgo de resultar poco comprensible a los neófitos: a ellos les pediría seguir las siguientes lecciones dando por sentadas algunas afirmaciones, sobre todo por lo que se refiere a las funciones, y centrando la atención en los ejemplos particularmente en el uso de los handler.

Los eventos se usan para invocar instrucciones. Así, el script se ejecuta secuencialmente, pero, para conseguir introducir el carácter dinámico e interactivo, debe cargarse en memoria y activarse o invocarse sólo cuando se verifican situaciones particulares como el ratón que pasa, un documento que se carga, etc. El problema de la conciliación con las funciones reside en el hecho de que a un evento puede ir asociada una sola instrucción, pero la mayor parte de las veces, la asociación está establecida con un bloque de instrucciones y, por tanto, con las funciones que toman el nombre de handler o gestores de eventos.

Los eventos, para poder interrelacionar HTML con Javascript, no se definen en la marca <SCRIPT> (excepto en algún caso), sino que se insertan dentro de las marcas HTML: el navegador compatible con Javascript, al encontrarse con un evento, lo interpreta y lo activa.

He aquí un ejemplo:

<A HREF="pagina.html" onclick="alert('hola')">Link</A>

Podemos observar que el evento onClick en la marca como si fuera un especificador del mismo.

Es importante entender este concepto porque Javascript, en sus comienzos, tenía pocos eventos, los cuales se activaban sólo si insertados en particulares marcas y sucede a menudo que se utilizan los handler de manera arbitraria y que se considere como error la no activación de un evento cuando insertado en marcas incompatibles. Internet Explorer en las versiones más recientes ha ampliado las posibilidades de uso de los eventos, por lo que pueden insertarse en muchísimas marcas, mientras que Netscape ha permanecido fiel a las impostaciones originarias. Esto podría ser bueno o malo, pero por experiencia prefiero la estrategia de Netscape ya que los eventos podrían entrar en conflicto y, si estuvieran omnipresentes, podrían llegar a ser incontrolables.

Activar los eventos dentro de los script

Los eventos, además, se pueden también activar directamente dentro de los script, invocándose como si fueran una propiedad del objeto. La sintaxis es:

Objeto.evento=handler;

Para aclarar este concepto, que es muy útil pero raramente se aplica, voy a contaros una anécdota: cuando empecé a usar Javascript buscaba un script que me permitiera simular el streaming, es decir, cargar de la red una imagen de una secuencia sólo cuando estaba seguro de que la precedente ya había sido cargada y, por tanto, visualizada. Usar un temporizador era imposible porque el efecto cambiaba según la velocidad de conexión. En un óptimo tratado de Javascript, encontré unas líneas que me dieron el pie. De esta manera, elaboré un array de imágenes y operaba con el comando:

document.images[num].onload=carga();

donde la función carga() servía a cargar la imagen sucesiva. Todo funcionaba perfectamente, si bien con algunas pequeñas diferencias según el navegador usado.

Con Explorer, sin embargo, se puede utilizar un script específico para un objeto y para un evento mediante la sintaxis:

<SCRIPT FOR=Object EVENT=evento>....</SCRIPT>

 

Agrupar los eventos

En los últimos tiempos, los eventos se han multiplicado y es difícil seguirles el rastro. Por tanto, para no perder la pista de ninguno, intentaremos agruparlos en secciones homogéneas:

  1. Eventos que se activan con los botones del ratón
  2. Eventos que se activan con movimientos del ratón
  3. Eventos que se activan arrastrando el ratón (drag and drop)
  4. Eventos que activa el usuario con el teclado
  5. Eventos que se activan con las modificaciones del usuario
  6. Eventi vinculados al foco
  7. Eventos que se activan al cargarse los objetos
  8. Eventos que se activan con movimientos de las ventanas
  9. Eventi vinculados a determinados botones
  10. Otros eventos y nuevos tipos de eventos

En los dos primeros grupos, se incluyen los eventos típicos del ratón o el teclado, tales como el movimiento o la pulsación; en los otros, se incluyen los eventos estrechamente relacionados con los objetos. La agrupación se hace necesaria porque en muchos tratados, los eventos se describen singularmente, lo que, si por un lado ofrece ventajas para el análisis, por otro, compromete la sintaxis que, sin embargo, resulta de gran utilidad en las situaciones más complicadas.

Antes de entrar en la descripción, os adelantamos que todos los eventos tienen su propia sintaxis compuesta por su nombre con el prefijo Prima della descrizione anticipiamo che tutti gli eventi hanno la propria sentassi composta sentatticamente dal loro nome col prefisso on. Así, por ejemplo, el evento clic es invocado con el handler onclick. Daremos una sintaxis escrita con mayúsculas y minúsculas para resaltar bien el evento, pero no olvides que en Netscape 3.0 el evento es parte de javascript por lo que tiene que escribirse todo con minúsculas.



  Vuelve a principio de página