APÉNDICE. EVENTOS EN JAVASCRIPT. MANEJO DE EVENTOS EN Navigator 4 y en Explorer 4.

Tratamiento de eventos.

El tratamiento de eventos en JavaScript se puede hacer de dos formas:

1. En las etiquetas: Se pueden incluir los manejadores de evento con los eventos de muchas de las etiquetas, para esto se emplea la siguiente sintasix: <ETIQUETA manejador="Sentencias JavaScript"> Ejemplo:
   Código fuente:

    <FORM><INPUT TYPE="BUTTON" VALUE="Boton"
                 onClick="alert('Has pulsado el boton'); return false;"</INPUT>
    </FORM>
   	

2. Creando manejadores de eventos: Se realiza un captura de eventos utilizando los siguientes paso:
   • Preparación del objeto para la captura delos eventos deseados:Se indica cuales son los eventos que se desea que capture el objeto (ventana,docuemnto o layer). Por ejemplo, para el caso de una ventana:
     window.captureEvents(Event.CLICK)
     Para indicar varios eventos se utiliza el caracter |. Por ejemplo, para capturar varios eventos en un layer:
     window.milayer.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
     Cuando se indiquen varios objetos que capturen un mismo evento se realiza según la jerarquía en la que se han definido.
     
     
   • Definición de la función que atenderáa al evento:Se define la dunción JavaScript que manejará el evento, con un argumento que es un objeto evento, se define siempre de la misma forma y debe devolver true o false:
     function miManejador(e) { ......tratamiento del evento ... }
     
     
   • Registro de la función como manejador para ese evento:Para esto basta con asignar el nombre de la función al manejador del evento. Por ejemplo:
     document.milayer.onmousedown=miManejador
   En el siguiente ejemplo, el objeto document captura el evento MouseDown:

   <script language="JavaScript1.2"> <!--
   
     /*Preparación del objeto document para la captura del evento MOUSEDOWN*/	
     document.captureEvents(Event.MOUSEDOWN); 	
   
   
     /*Definición de la función manejador del evento*/
     function fun(e) {
       alert ("Se ha capturado un evento del tipo: " + e.type);
       alert ("La posición x es " + e.layerX);
       alert ("La posición y es " + e.layerY);
       if (e.modifiers && Event.ALT_MASK)
         alert ("La tecla ALT estaba pulsada cuando se produjo el evento.");
       return true;
     }
   
   
     /*Registro de la función como manejador de ese evento*/
     document.onMouseDown = fun;
   //-->
   </script>
   

   Pulsa aquí para ejecutar el ejemplo.
   

El objeto EVENT (evento).

Los eventos son objetos con las siguientes propiedades:

Propiedad	Descripción
type	Una cadena de texto indicando el tipo del evento.
target	Una cadena de texto indicando el objeto al que se ha enviado el evento.
layerX	Un número que especifica bien la anchura del objeto cuando es pasado con el evento resize o la posición horizontal del cursor en pixels relativa al layer en el que ha ocurrido el evento. layerX es igual que x.
layerY	Un número que especifica bien la altura del objeto cuando es pasado con el evento resize o la posición vertical del cursor en pixels relativa al layer en el que ha ocurrido el evento. layerY es igual que y.
pageX	Un número que especifica la posición horizontal del cursor en pixels relativa a la página.
pageY	Un número que especifica la posición vertical del cursor en pixels relativa a la página.
screenX	Un número que especifica la posición horizontal del cursor en pixels relativa a la pantalla.
screenY	Un número que especifica la posición vertical del cursor en pixels relativa a la pantalla.
which	Un número que especifica el botón del ratón que ha sido pulsado o bien el valor ASCII de la tecla que ha sido pulsada.
modifiers	Una cadena de texto que contiene las teclas modificadoras asociadas con un evento de ratón o de teclado. Los valores válidos son ALT_MASK, CONTROL_MASK, SHIFT_MASK y META_MASK.
data	Retorna un array de cadenas de texto que contienen las URLs de los objetos "soltados". Se pasa con el evento dragDrop.

Tipos de eventos.

Los eventos que existen son los siguientes:

• Eventos de JavaScript 1.0:

Evento	Descripción	Asociado a
Click	Pulsación sobre un enlace o un elemento de un form	Ratón
MouseOver	Colocación del ratón sobre un enlace	Ratón
Load	Carga de la página.	Página
UnLoad	Salida de la página.	Página
Focus	Seleción de un elemento de un form.	Teclado/Ratón
Blur	Des-seleción de un elemento de un form.	Teclado/Ratón
Change	Edición de un elemento de un elemento text, textarea o cambio de un select en un forma.	Teclado/Ratón
Select	Seleción del campo de entrada de un elemento de un form.	Teclado/Ratón
Submit	Envío de un form.	Teclado/Ratón




• Eventos de JavaScript 1.1:

Evento	Descripción	Asociado a
Abort	Interrupción de la carga de una página o imagen	Página
Error	Error en la carga o ejecuciónde una página o imagen	Página
MouseOut	Salida del ratón de un área o enlace.	Ratón
Reset	Pulsació de un reset en un form.	Teclado/ratón




• Eventos de JavaScript 1.2:

Evento	Descripción	Asociado a
DblClick	Pulsación de doble Click sobre un enlace o un elemento de un form	Ratón
DragDrop	Se produce cuando se deja caer algo sobre la ventana.	Ratón
MouseDown	Pulsación de un botón del Ratón sobre un documento, enlace o form.	Ratón
MouseMove	Movimiento del cursor del Ratón.	Ratón
MouseUp	Liberación de un botón del Rtón sobre un docuemnto, enlace o form.	Ratón
KeyDown	Pulsación de una tecla.	Teclado
KeyUp	Liberación de una tecla.	Teclado
KeyPress	Cobinación de KeyDown y KeyUp.	Teclado
Move	Movimiento de la ventana o un frame.	Ventana
Resize	Redimensionamiento de la ventana o un frame.	Ventana

Diferencias entre Netscape e IE.

• E4 sigue un modelo de tratamiento de eventos "en burbuja",
• N4 utiliza un modelo "de captura".

La diferencia práctica entre ambos es que mientras que en E4 cualquier elemento HTML puede generar y procesar cualquier evento, en N4, sólo unos pocos elementos pueden hacerlo (a no ser que utilicemos los nuevos modelos de eventos).

Los problemas nos vienen debido a si queremos código que funcione bien en ambos tipos de navegadores, no podemos pasar los eventos a los manejadores de los elementos padres de los que lo han recibido, ya que la jerarquía está invertida.

La solución es manejar los eventos en funciones simples, y usar sólo los eventos definidos y soportados por N4, ya que esos funcionan bien en ambos.

E4 permite capturar eventos en layers, sin utilizar links, como si toda la zona rectangular del layer actuase como un link. N4 no lo permite de un modo tan directo como E4 (colocando onEvento en el mismo tag).

Sin embargo tenemos una forma de conseguir eso que queremos, y es mediante la definición de scripts localizados dentro de los propios layers. Veamos esto con un ejemplo:

<DIV STYLE="position:absolute; left:10; top:20;" 
   onMouseOver=" alert('Estoy sobre el layer (E4).'); "
   onMouseOut=" alert('Estoy fuera del layer (E4).'); ">

 Contenido del layer <br> de ejemplo.

<SCRIPT>
   function onMouseOver() {
           alert("Estoy sobre el layer (N4).");
   }

   function onMouseOut() {
           alert("Estoy fuera del layer (N4).");
   }
</SCRIPT>

</DIV>
      

Esta es una forma de tratar los eventos (no todos se pueden manejar de este modo) para conseguir mantener la compatibilidad.

Otra forma es utilizar el modelo de eventos nuevo para tratarlos tal y como requiere tanto N4 como E4. Un ejemplo de esto :

<SCRIPT>
if (document.layers) {n=1;ie=0}
if (document.all) {n=0;ie=1}

if (n) {
      pullout1 = document.layer.document.luna
      pullout2 = document.layer.document.layer2
      document.layer.document.luna.document.receptor.
                   document.captureEvents(Event.MOUSEUP)
      document.layer.document.luna.document.receptor.
                   document.onmouseup = deslizaNN
}

if (ie) {
      pullout1 = luna.style
      pullout2 = layer2.style
      document.all.receptor.onmouseup = deslizaIE
}

function deslizaIE() {
      pullout(pullout2);
}

function deslizaNN(e){ 
      pullout(pullout2);
}
</SCRIPT>
      

Al indicar cual es el manejador, debemos tener en cuenta que E4 no pasa el objeto evento a través de la cabecera de la función, tal y como sí hace N4, por lo que es conveniente que definamos funciones separadas como manejadores (tal y como vemos en ese ejemplo) y desde ellas llamemos al código común o específico para cada navegador.

En el ejemplo no hacemos uso de los objetos event, aunque eso es un caso particular de este problema.